@vectoriox/iox-ui 5.31.2 → 5.32.0

package/fesm2022/vectoriox-iox-ui-generation-core.mjs

@@ -111,10 +111,12 @@ const SPEC_SITE_PATTERNS = {
         "family": "nav",
         "label": "Navigation bar",
         "global": "before",
+        "phoneMenu": "drawer",
         "node": {
             "t": "Container",
             "es": "nav",
             "tag": "nav",
+            "role": "nav",
             "lay": {
                 "display": "flex",
                 "flexWrap": "wrap",
@@ -127,6 +129,7 @@ const SPEC_SITE_PATTERNS = {
                     "t": "LinkedContainer",
                     "es": "box",
                     "href": "/",
+                    "role": "nav.brand",
                     "c": [
                         {
                             "t": "Heading",
@@ -140,6 +143,7 @@ const SPEC_SITE_PATTERNS = {
                 {
                     "t": "Container",
                     "es": "box",
+                    "role": "nav.links",
                     "lay": {
                         "display": "flex",
                         "flexWrap": "wrap",
@@ -153,14 +157,16 @@ const SPEC_SITE_PATTERNS = {
                             "es": "link",
                             "each": "$navPages",
                             "bind": "page.name",
-                            "href": "$page.route"
+                            "href": "$page.route",
+                            "role": "nav.link"
                         },
                         {
                             "t": "ButtonBlock",
                             "es": "button-primary",
                             "href": "/contact",
                             "slot": "cta",
-                            "text": "Get in touch"
+                            "text": "Get in touch",
+                            "role": "nav.cta"
                         }
                     ]
                 }
@@ -1347,7 +1353,8 @@ const NODE_BASELINES = {
             "href": "",
             "pageRoute": "",
             "target": "_self",
-            "type": "button"
+            "type": "button",
+            "ariaLabel": ""
         },
         "styleProps": {
             "position": "static",
@@ -1439,7 +1446,9 @@ const NODE_BASELINES = {
             "href",
             "pageRoute",
             "target",
-            "type"
+            "type",
+            "__accessibilityLabel",
+            "ariaLabel"
         ],
         "styleTraits": [
             "position",
@@ -2484,7 +2493,8 @@ const NODE_BASELINES = {
             "linkType": "external",
             "url": "https://",
             "pageRoute": "",
-            "target": "_self"
+            "target": "_self",
+            "ariaLabel": ""
         },
         "styleProps": {
             "position": "static",
@@ -2575,7 +2585,9 @@ const NODE_BASELINES = {
             "linkType",
             "url",
             "pageRoute",
-            "target"
+            "target",
+            "__accessibilityLabel",
+            "ariaLabel"
         ],
         "styleTraits": [
             "position",
@@ -2676,7 +2688,8 @@ const NODE_BASELINES = {
             "url": "https://",
             "pageRoute": "",
             "target": "_self",
-            "colorScheme": "default"
+            "colorScheme": "default",
+            "ariaLabel": ""
         },
         "styleProps": {
             "position": "static",
@@ -2767,7 +2780,9 @@ const NODE_BASELINES = {
             "url",
             "pageRoute",
             "target",
-            "colorScheme"
+            "colorScheme",
+            "__accessibilityLabel",
+            "ariaLabel"
         ],
         "styleTraits": [
             "position",
@@ -5816,7 +5831,9 @@ const NODE_BASELINES = {
             "placement": "center",
             "closeOnBackdrop": true,
             "showCloseButton": true,
-            "consentRole": false
+            "consentRole": false,
+            "closeAbove": "",
+            "ariaLabel": ""
         },
         "styleProps": {
             "position": "static",
@@ -5906,7 +5923,11 @@ const NODE_BASELINES = {
             "placement",
             "closeOnBackdrop",
             "showCloseButton",
-            "consentRole"
+            "consentRole",
+            "__responsiveLabel",
+            "closeAbove",
+            "__accessibilityLabel",
+            "ariaLabel"
         ],
         "styleTraits": [
             "position",
@@ -6315,7 +6336,7 @@ var SiteTemplateId;
 const STUDIO_TEMPLATE = SITE_TEMPLATES[SiteTemplateId.Studio];
 class SiteTemplateError extends Error {
 }
-const clone$2 = (value) => JSON.parse(JSON.stringify(value));
+const clone$3 = (value) => JSON.parse(JSON.stringify(value));
 /**
  * The template as a Site Plan (`source.kind: template`), with the customer's business and look. A
  * required page cannot be left out, and an unknown key is refused — nothing is guessed.
@@ -6332,12 +6353,12 @@ function planFromTemplate(template, input) {
     return {
         version: SITE_PLAN_VERSION,
         source: { kind: SitePlanSourceKind.Template, templateId: template.id, templateVersion: template.version },
-        business: clone$2(input.business),
-        design: clone$2(input.design),
-        contentTypes: clone$2(template.contentTypes),
-        dataSources: clone$2(template.dataSources),
-        pages: clone$2(template.pages.filter(p => !omit.has(p.key))),
-        globals: clone$2(template.globals),
+        business: clone$3(input.business),
+        design: clone$3(input.design),
+        contentTypes: clone$3(template.contentTypes),
+        dataSources: clone$3(template.dataSources),
+        pages: clone$3(template.pages.filter(p => !omit.has(p.key))),
+        globals: clone$3(template.globals),
     };
 }
 
@@ -6346,7 +6367,7 @@ function planFromTemplate(template, input) {
  *  wrong — never something to work around. */
 class ComposeError extends Error {
 }
-const clone$1 = (value) => JSON.parse(JSON.stringify(value));
+const clone$2 = (value) => JSON.parse(JSON.stringify(value));
 /**
  * A NEW node of `type`, as the builder creates one (ComponentRegistryService.createConfig, serialized):
  * the type's constructor defaults, its text colour released to `inherit` (NEW_NODE_STYLE_DEFAULTS), then
@@ -6361,8 +6382,8 @@ function createSerializedNode(id, type, props = {}, elementStyle, options = {})
     const node = {
         id,
         type,
-        props: { ...clone$1(baseline.props), ...props },
-        styleProps: clone$1(baseline.styleProps),
+        props: { ...clone$2(baseline.props), ...props },
+        styleProps: clone$2(baseline.styleProps),
         bindings: [],
         interactions: [],
     };
@@ -6892,6 +6913,518 @@ function assertValidSitePlan(plan) {
         throw new SitePlanError(result.issues);
 }
 
+/**
+ * The phone shapes of a navigation bar (complex-components plan CC1, §7a + R1; boards 1–3). ONE pure tree
+ * edit, `planNavShape`, turns a site's header into the shape the author (the Navigation bar's "Phone
+ * menu" section) or the composer (`nav.inline-cta`'s `phoneMenu`) asks for:
+ *
+ * - **Drawer** — a menu button in the header opens a slide-in Dialog at the end edge that lists every
+ *   page (board 1). The drawer is a child of the Navigation bar.
+ * - **Bottom bar** — an app-style bar fixed to the bottom of the screen with up to five pages, no drawer
+ *   (board 2). The phone header keeps only the brand (Q4).
+ * - **Both** — the bar with four pages and More, which opens the drawer; the drawer is then its own
+ *   global, beside the Navigation bar (board 2's layer tree).
+ *
+ * Every part is a real node with a `role` (R2): editable, selectable, styled by its element style. Parts
+ * a shape keeps are passed through untouched, so an author's edits survive a change of shape; the parts
+ * it no longer has are removed (undo brings them back — the caller records ONE history step). Nothing
+ * here reads a clock or a random source: ids come from `newId` (deterministic by default, so the
+ * composer's output is byte-stable).
+ */
+var NavShape;
+(function (NavShape) {
+    NavShape["Drawer"] = "drawer";
+    NavShape["Bar"] = "bar";
+    NavShape["Both"] = "both";
+})(NavShape || (NavShape = {}));
+/** The roles of a navigation's parts (the composite plan's `role` field, here for the nav). */
+var NavRole;
+(function (NavRole) {
+    NavRole["Root"] = "nav";
+    NavRole["Brand"] = "nav.brand";
+    NavRole["Links"] = "nav.links";
+    NavRole["Link"] = "nav.link";
+    NavRole["Cta"] = "nav.cta";
+    NavRole["MenuButton"] = "nav.menu-button";
+    NavRole["Drawer"] = "nav.drawer";
+    NavRole["DrawerHead"] = "nav.drawer-head";
+    NavRole["DrawerClose"] = "nav.drawer-close";
+    NavRole["DrawerLinks"] = "nav.drawer-links";
+    NavRole["DrawerLink"] = "nav.drawer-link";
+    NavRole["DrawerCta"] = "nav.drawer-cta";
+    NavRole["Bar"] = "nav.bar";
+    NavRole["BarItem"] = "nav.bar-item";
+    NavRole["More"] = "nav.more";
+})(NavRole || (NavRole = {}));
+/** The breakpoints a phone menu may switch at (the responsive Breakpoint ids; Q5: Mobile landscape). */
+var PhoneMenuBreakpoint;
+(function (PhoneMenuBreakpoint) {
+    PhoneMenuBreakpoint["Tablet"] = "tablet";
+    PhoneMenuBreakpoint["Mobile"] = "mobile";
+    PhoneMenuBreakpoint["Small"] = "small";
+})(PhoneMenuBreakpoint || (PhoneMenuBreakpoint = {}));
+const DEFAULT_PHONE_MENU_BREAKPOINT = PhoneMenuBreakpoint.Mobile;
+/** The bar's item count, More included (Q2: 3–5; iOS and Material both cap at five). */
+const BAR_ITEMS_MIN = 3;
+const BAR_ITEMS_MAX = 5;
+class NavShapeError extends Error {
+}
+const CONTAINER = 'Container';
+const DIALOG = 'Dialog';
+const LINK = 'Link';
+const LINKED = 'LinkedContainer';
+const BUTTON = 'ButtonBlock';
+const ICON = 'Icon';
+const TEXT$1 = 'Text';
+const HEADING = 'Heading';
+const NAV_STYLE = 'nav';
+const DISPLAY = 'display';
+const NONE = 'none';
+const CLICK = 'click';
+const HOME_ROUTE = '/';
+const COMPOSED$1 = { releaseLayoutDefaults: true };
+/** The words the parts carry — site copy, editable like any other (the composer writes English copy). */
+const NAV_SHAPE_COPY = {
+    menu: 'Menu',
+    closeMenu: 'Close menu',
+    more: 'More',
+    home: 'Home',
+};
+/** The layer names of the parts (R2: the tree, the breadcrumb and the toolbar read them). */
+const NAV_PART_LABELS = {
+    [NavRole.Root]: 'Navigation bar',
+    [NavRole.Brand]: 'Brand',
+    [NavRole.Links]: 'Links',
+    [NavRole.MenuButton]: 'Menu button',
+    [NavRole.Drawer]: 'Menu drawer',
+    [NavRole.DrawerHead]: 'Drawer header',
+    [NavRole.DrawerClose]: 'Close',
+    [NavRole.DrawerLinks]: 'Drawer links',
+    [NavRole.Bar]: 'Bottom bar',
+    [NavRole.More]: 'More',
+};
+/** Phosphor icons for the bar's items by route — there is no page icon field (Q6), so the bar starts here and
+ *  the author picks (the icons are ordinary Icon nodes). */
+const ROUTE_ICONS = [
+    [/^\/?$/, 'ph-thin ph-house'],
+    [/work|project|portfolio/i, 'ph-thin ph-squares-four'],
+    [/about|studio|team/i, 'ph-thin ph-user'],
+    [/journal|blog|news/i, 'ph-thin ph-book-open'],
+    [/contact/i, 'ph-thin ph-chat-circle'],
+    [/shop|store/i, 'ph-thin ph-bag'],
+];
+const FALLBACK_ICON = 'ph-thin ph-file';
+const MENU_ICON = 'ph-thin ph-list';
+const CLOSE_ICON = 'ph-thin ph-x';
+const MORE_ICON = 'ph-thin ph-dots-three';
+function barIconForRoute(route) {
+    return ROUTE_ICONS.find(([re]) => re.test(route))?.[1] ?? FALLBACK_ICON;
+}
+// ── reading ─────────────────────────────────────────────────────────────────────────────────
+const roleOf = (n) => n?.role;
+function find(nodes, role) {
+    let hit = null;
+    walkSerialized(nodes, n => { if (!hit && n.role === role)
+        hit = n; });
+    return hit;
+}
+function findAll(nodes, role) {
+    const out = [];
+    walkSerialized(nodes, n => { if (n.role === role)
+        out.push(n); });
+    return out;
+}
+/** The Navigation bar: the global with the root role, else the first global wearing the `nav` style. */
+function findNavRoot(globals, navId) {
+    if (navId)
+        return globals.find(g => g.id === navId) ?? null;
+    return globals.find(g => g.role === NavRole.Root) ?? globals.find(g => g.elementStyle === NAV_STYLE && g.type === CONTAINER) ?? null;
+}
+/** The shape a site's globals are in now, or null when there is no Navigation bar. */
+function navShapeOf(globals) {
+    if (!findNavRoot(globals))
+        return null;
+    const bar = !!find(globals, NavRole.Bar);
+    const drawer = !!find(globals, NavRole.Drawer);
+    if (bar && drawer)
+        return NavShape.Both;
+    if (bar)
+        return NavShape.Bar;
+    return drawer ? NavShape.Drawer : null;
+}
+const hiddenAt = (n) => Object.entries(n.responsive ?? {}).find(([, layer]) => layer?.styleProps?.[DISPLAY] === NONE)?.[0] ?? null;
+/** The breakpoint the phone shape takes over at, read off the header's links row (default Mobile). */
+function navShapeBreakpoint(globals) {
+    const links = find(globals, NavRole.Links);
+    const bp = links ? hiddenAt(links) : null;
+    return Object.values(PhoneMenuBreakpoint).includes(bp ?? '') ? bp : DEFAULT_PHONE_MENU_BREAKPOINT;
+}
+const prop = (n, name) => n.props?.[name];
+const isPageLink = (n) => prop(n, 'linkType') === LinkType.Page && typeof prop(n, 'pageRoute') === 'string';
+function textOf(n) {
+    if (n.type === LINK)
+        return String(prop(n, 'label') ?? '');
+    let words = '';
+    walkSerialized(n.children ?? [], c => { if (!words && (c.type === TEXT$1 || c.type === HEADING))
+        words = String(prop(c, 'content') ?? ''); });
+    return words;
+}
+/** The pages the header links to, in order: its Links (W1.1 — one plain Link per page in the navigation). */
+function navPages(root) {
+    const links = findAll([root], NavRole.Link);
+    const source = links.length ? links : collectHeaderLinks(root);
+    return source.filter(isPageLink).map(n => ({ label: textOf(n), route: String(prop(n, 'pageRoute')) }));
+}
+/** A hand-built header: every page Link outside a drawer. */
+function collectHeaderLinks(root) {
+    const out = [];
+    const visit = (n) => {
+        if (n.type === DIALOG)
+            return;
+        if (n.type === LINK)
+            out.push(n);
+        (n.children ?? []).forEach(visit);
+    };
+    (root.children ?? []).forEach(visit);
+    return out;
+}
+/** New ids: the caller's generator, else `<nav id>-<suffix>` made unique against every id already there. */
+function makeKit(globals, rootId, newId) {
+    if (newId)
+        return { id: newId };
+    const used = new Set();
+    walkSerialized(globals, n => used.add(n.id));
+    return {
+        id: (suffix) => {
+            const base = `${rootId}-${suffix}`;
+            let id = base;
+            for (let n = 2; used.has(id); n++)
+                id = `${base}-${n}`;
+            used.add(id);
+            return id;
+        },
+    };
+}
+/** Point an opener's dialog actions at `dialogId` (a drawer rebuilt under a new id keeps its openers working). */
+function retarget(node, dialogId) {
+    for (const ix of node.interactions) {
+        for (const a of ix.actions ?? [])
+            if (a.type === 'openDialog' || a.type === 'toggleDialog')
+                a.target = dialogId;
+    }
+    return node;
+}
+function part(kit, suffix, type, props, style, role, lay = {}) {
+    const node = createSerializedNode(kit.id(suffix), type, props, style, COMPOSED$1);
+    if (role)
+        node.role = role;
+    const label = role ? NAV_PART_LABELS[role] : undefined;
+    if (label)
+        node.label = label;
+    Object.assign(node.styleProps, lay);
+    return node;
+}
+function clickTo(kit, suffix, type, target) {
+    return { id: kit.id(`${suffix}-click`), trigger: CLICK, actions: [{ type, target, duration: 0, delay: 0, easing: 'ease' }] };
+}
+/** Show at the phone width, hidden above it (base `display: none`, the breakpoint's own `display`). */
+function phoneOnly(node, at, display) {
+    node.styleProps[DISPLAY] = NONE;
+    node.responsive = { ...(node.responsive ?? {}), [at]: { ...(node.responsive?.[at] ?? {}), styleProps: { ...(node.responsive?.[at]?.styleProps ?? {}), [DISPLAY]: display } } };
+}
+/** Hidden at the phone width: the header's links row. */
+function hideAt(node, at) {
+    node.responsive = { ...(node.responsive ?? {}), [at]: { ...(node.responsive?.[at] ?? {}), styleProps: { ...(node.responsive?.[at]?.styleProps ?? {}), [DISPLAY]: NONE } } };
+}
+/** Move every `display` override the shape owns to the new breakpoint. */
+function moveDisplayOverride(node, to) {
+    for (const [bp, layer] of Object.entries(node.responsive ?? {})) {
+        if (bp === to || !layer?.styleProps || !(DISPLAY in layer.styleProps))
+            continue;
+        const value = layer.styleProps[DISPLAY];
+        const { [DISPLAY]: _drop, ...rest } = layer.styleProps;
+        node.responsive[bp] = { ...layer, styleProps: rest };
+        if (!Object.keys(rest).length && Object.keys(layer).length === 1)
+            delete node.responsive[bp];
+        node.responsive[to] = { ...(node.responsive[to] ?? {}), styleProps: { ...(node.responsive[to]?.styleProps ?? {}), [DISPLAY]: value } };
+    }
+}
+function iconNode(kit, suffix, iconClass) {
+    return part(kit, suffix, ICON, { iconClass }, null);
+}
+function labelText(kit, suffix, words) {
+    return part(kit, suffix, TEXT$1, { content: words, tag: 'span' }, 'button-label');
+}
+function menuButton(kit, drawerId, at) {
+    const btn = part(kit, 'menu', BUTTON, { tag: 'button', ariaLabel: NAV_SHAPE_COPY.menu }, 'button-ghost', NavRole.MenuButton, { width: '48px', height: '48px', alignItems: 'center', justifyContent: 'center' });
+    btn.children = [iconNode(kit, 'menu-icon', MENU_ICON)];
+    btn.interactions = [clickTo(kit, 'menu', 'openDialog', drawerId)];
+    phoneOnly(btn, at, 'inline-flex');
+    return btn;
+}
+function pageLink(kit, suffix, page, role, lay = {}) {
+    return part(kit, suffix, LINK, { label: page.label, linkType: LinkType.Page, pageRoute: page.route }, 'link', role, lay);
+}
+function drawer(kit, root, pages, at) {
+    const dr = part(kit, 'drawer', DIALOG, {
+        placement: 'end', closeOnBackdrop: true, showCloseButton: false, ariaLabel: NAV_SHAPE_COPY.menu, closeAbove: at,
+    }, 'dialog', NavRole.Drawer, { width: '86vw', maxWidth: '360px', display: 'flex', flexDirection: 'column', gap: '20px' });
+    const brandWords = textOf(find([root], NavRole.Brand) ?? root) || NAV_PART_LABELS[NavRole.Root];
+    const head = part(kit, 'drawer-head', CONTAINER, {}, 'box', NavRole.DrawerHead, { display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: '12px' });
+    const close = part(kit, 'drawer-close', BUTTON, { tag: 'button', ariaLabel: NAV_SHAPE_COPY.closeMenu }, 'button-ghost', NavRole.DrawerClose, { width: '44px', height: '44px', alignItems: 'center', justifyContent: 'center' });
+    close.children = [iconNode(kit, 'drawer-close-icon', CLOSE_ICON)];
+    close.interactions = [clickTo(kit, 'drawer-close', 'closeDialog', dr.id)];
+    head.children = [part(kit, 'drawer-brand', HEADING, { content: brandWords, level: 'h3' }, 'h3'), close];
+    const list = part(kit, 'drawer-links', CONTAINER, {}, 'box', NavRole.DrawerLinks, { display: 'flex', flexDirection: 'column', gap: '4px' });
+    // Board 1: every page, Home first, at lead size (on each Link: a Link's own baseline font size would
+    // beat one inherited from the list). Only the CURRENT page is underlined — the shared CSS keys that on
+    // the list's role (iox-design.css), so no Link holds a literal over its element style.
+    list.children = withHome(root, pages).map((p, i) => pageLink(kit, `drawer-link-${i}`, p, NavRole.DrawerLink, { display: 'flex', alignItems: 'center', minHeight: '48px', fontSize: 'var(--iox-size-lead)' }));
+    dr.children = [head, list];
+    const cta = find([root], NavRole.Cta);
+    if (cta) {
+        const copy = JSON.parse(JSON.stringify(cta));
+        const reid = (n, path) => { n.id = kit.id(path); (n.children ?? []).forEach((c, i) => reid(c, `${path}-${i}`)); };
+        reid(copy, 'drawer-cta');
+        copy.role = NavRole.DrawerCta;
+        copy.styleProps = { ...copy.styleProps, alignSelf: 'stretch' };
+        dr.children.push(copy);
+    }
+    return dr;
+}
+function barItem(kit, i, page) {
+    const item = part(kit, `bar-item-${i}`, LINKED, { linkType: LinkType.Page, pageRoute: page.route, target: '_self' }, 'bottom-bar-item', NavRole.BarItem, BAR_ITEM_LAY);
+    item.label = page.label;
+    item.children = [iconNode(kit, `bar-item-${i}-icon`, barIconForRoute(page.route)), labelText(kit, `bar-item-${i}-label`, page.label)];
+    return item;
+}
+const BAR_ITEM_LAY = {
+    display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: '3px',
+    flexGrow: '1', flexShrink: '1', flexBasis: '0px', minWidth: '0px', minHeight: '52px', padding: '4px 2px', textDecoration: 'none',
+};
+function moreItem(kit, drawerId) {
+    const more = part(kit, 'bar-more', BUTTON, { tag: 'button' }, 'bottom-bar-item', NavRole.More, BAR_ITEM_LAY);
+    more.children = [iconNode(kit, 'bar-more-icon', MORE_ICON), labelText(kit, 'bar-more-label', NAV_SHAPE_COPY.more)];
+    more.interactions = [clickTo(kit, 'bar-more', 'openDialog', drawerId)];
+    return more;
+}
+/** Home first, then the header's pages: the header reaches Home through its brand, a phone menu names it. */
+function withHome(root, pages) {
+    const brand = find([root], NavRole.Brand);
+    const home = brand && isPageLink(brand) && prop(brand, 'pageRoute') === HOME_ROUTE && !pages.some(p => p.route === HOME_ROUTE)
+        ? [{ label: NAV_SHAPE_COPY.home, route: HOME_ROUTE }] : [];
+    return [...home, ...pages];
+}
+/** The bar's pages: Home first (a bottom bar's customary first stop), capped. */
+function barPages(root, pages, count) {
+    return withHome(root, pages).slice(0, count);
+}
+function bar(kit, root, pages, shape, count, drawerId, at) {
+    // The node IS fixed (not only its element style): the builder canvas forces a node's own `position`
+    // with !important, so a stored `static` default would pin the bar into the flow there.
+    const b = part(kit, 'bar', CONTAINER, { htmlTag: 'nav' }, 'bottom-bar', NavRole.Bar, { position: 'fixed', justifyContent: 'space-around', alignItems: 'stretch', gap: '4px', padding: '6px 8px', width: 'auto' });
+    phoneOnly(b, at, 'flex');
+    const itemCount = shape === NavShape.Both ? count - 1 : count;
+    b.children = barPages(root, pages, itemCount).map((p, i) => barItem(kit, i, p));
+    if (shape === NavShape.Both && drawerId)
+        b.children.push(moreItem(kit, drawerId));
+    b.isGlobal = true;
+    b.globalPosition = PatternGlobalPosition.After;
+    return b;
+}
+// ── the edit ────────────────────────────────────────────────────────────────────────────────
+const clone$1 = (v) => JSON.parse(JSON.stringify(v));
+function removeRole(node, role) {
+    let removed = null;
+    const visit = (n) => {
+        if (!n.children)
+            return;
+        const i = n.children.findIndex(c => c.role === role);
+        if (i >= 0) {
+            removed = n.children[i];
+            n.children.splice(i, 1);
+            return;
+        }
+        n.children.forEach(visit);
+    };
+    visit(node);
+    return removed;
+}
+/** The root's own parts that hide at the phone width: everything but the brand, the menu button and the drawer. */
+function phoneHiddenParts(root) {
+    const keep = new Set([NavRole.Brand, NavRole.MenuButton, NavRole.Drawer]);
+    return (root.children ?? []).filter((c, i) => !keep.has(roleOf(c)) && !(i === 0 && !c.role && c.type === LINKED));
+}
+/** Board 2 / board 8: five items either way — five pages (Bottom bar) or four pages + More (Both). */
+function defaultBarCount(_shape) {
+    return BAR_ITEMS_MAX;
+}
+const JUSTIFY = 'justifyContent';
+const CENTER = 'center';
+/** Board 2: with a bar, the phone header holds only the brand, centred. The override lives in the phone
+ *  breakpoint's layer only; switching back to the drawer (or moving the breakpoint) removes it. */
+function centerBrandAt(root, at, on) {
+    for (const [bp, layer] of Object.entries(root.responsive ?? {})) {
+        if (layer?.styleProps?.[JUSTIFY] !== CENTER)
+            continue;
+        const { [JUSTIFY]: _drop, ...rest } = layer.styleProps;
+        root.responsive[bp] = { ...layer, styleProps: rest };
+    }
+    if (on)
+        root.responsive = { ...(root.responsive ?? {}), [at]: { ...(root.responsive?.[at] ?? {}), styleProps: { ...(root.responsive?.[at]?.styleProps ?? {}), [JUSTIFY]: CENTER } } };
+}
+function clampBarCount(n, shape) {
+    const v = Number.isFinite(n) ? Math.round(n) : defaultBarCount(shape);
+    return Math.min(BAR_ITEMS_MAX, Math.max(BAR_ITEMS_MIN, v));
+}
+/**
+ * Put a site's header into `shape`. The Navigation bar is `navId` or the global carrying the root role
+ * (else the first Container wearing `nav`, which this then marks with roles). Returns new globals;
+ * the input is not mutated.
+ */
+function planNavShape(globals, shape, options = {}, navId) {
+    if (!Object.values(NavShape).includes(shape))
+        throw new NavShapeError(`unknown phone menu shape "${shape}"`);
+    const out = clone$1(globals);
+    const root = findNavRoot(out, navId);
+    if (!root)
+        throw new NavShapeError('no Navigation bar among the globals');
+    const at = (options.at ?? navShapeBreakpoint(out));
+    if (!Object.values(PhoneMenuBreakpoint).includes(at))
+        throw new NavShapeError(`a phone menu cannot switch at "${at}"`);
+    const kit = makeKit(out, root.id, options.newId);
+    adoptRoles(root);
+    const pages = navPages(root);
+    const wantDrawer = shape !== NavShape.Bar;
+    const wantBar = shape !== NavShape.Drawer;
+    const wantMenuButton = shape === NavShape.Drawer;
+    // The drawer: kept (moved to where the shape puts it) or built; removed for Bar.
+    let dr = removeRole(root, NavRole.Drawer);
+    const topIndex = out.findIndex(g => g.role === NavRole.Drawer);
+    if (!dr && topIndex >= 0)
+        dr = out.splice(topIndex, 1)[0];
+    if (dr) {
+        delete dr.isGlobal;
+        delete dr.globalPosition;
+    }
+    if (wantDrawer && !dr)
+        dr = drawer(kit, root, pages, at);
+    if (!wantDrawer)
+        dr = null;
+    if (dr)
+        dr.props = { ...dr.props, closeAbove: at };
+    // The menu button: Drawer only (Q4: with a bar, the phone header keeps only the brand).
+    const existingMenu = removeRole(root, NavRole.MenuButton);
+    const menu = wantMenuButton ? (existingMenu ?? menuButton(kit, dr.id, at)) : null;
+    for (const p of phoneHiddenParts(root)) {
+        moveDisplayOverride(p, at);
+        hideAt(p, at);
+    }
+    centerBrandAt(root, at, wantBar);
+    const kids = root.children ?? (root.children = []);
+    if (menu) {
+        moveDisplayOverride(menu, at);
+        kids.push(menu);
+    }
+    if (dr && shape === NavShape.Drawer)
+        kids.push(dr);
+    if (dr && shape === NavShape.Both) {
+        dr.isGlobal = true;
+        dr.globalPosition = PatternGlobalPosition.Before;
+        out.splice(out.indexOf(root) + 1, 0, dr);
+    }
+    // The bar: kept (its items are the author's; More follows the shape) or built; removed for Drawer.
+    const barIndex = out.findIndex(g => g.role === NavRole.Bar);
+    let b = barIndex >= 0 ? out.splice(barIndex, 1)[0] : null;
+    let more = null;
+    if (wantBar) {
+        const count = clampBarCount(options.barItems, shape);
+        if (!b)
+            b = bar(kit, root, pages, shape, count, dr?.id ?? null, at);
+        else {
+            moveDisplayOverride(b, at);
+            more = (b.children ?? []).find(c => c.role === NavRole.More) ?? null;
+            b.children = (b.children ?? []).filter(c => c.role !== NavRole.More);
+            if (options.barItems !== undefined) {
+                const items = b.children;
+                const want = shape === NavShape.Both ? count - 1 : count;
+                const extra = barPages(root, pages, BAR_ITEMS_MAX).filter(p => !items.some(c => prop(c, 'pageRoute') === p.route));
+                while (items.length > want)
+                    items.pop();
+                while (items.length < want && extra.length)
+                    items.push(barItem(kit, items.length, extra.shift()));
+            }
+            if (shape === NavShape.Both && dr)
+                b.children.push(retarget(more ?? moreItem(kit, dr.id), dr.id));
+        }
+        out.push(b);
+    }
+    return { globals: out, shape, at };
+}
+/** Mark a hand-built header's parts with their roles, so every later edit can find them. */
+function adoptRoles(root) {
+    root.role = NavRole.Root;
+    const kids = root.children ?? [];
+    const brand = kids.find(c => c.role === NavRole.Brand) ?? (kids[0]?.type === LINKED ? kids[0] : null);
+    if (brand)
+        brand.role = NavRole.Brand;
+    for (const c of kids) {
+        if (c === brand || c.role)
+            continue;
+        if (c.type === CONTAINER && (c.children ?? []).some(k => k.type === LINK)) {
+            c.role = NavRole.Links;
+            for (const k of c.children ?? []) {
+                if (k.role)
+                    continue;
+                if (k.type === LINK)
+                    k.role = NavRole.Link;
+                else if (k.type === BUTTON)
+                    k.role = NavRole.Cta;
+            }
+        }
+    }
+    nameParts(root);
+}
+/** Board 3's layer names for the header's own parts, where the author has not named them: Brand, Links,
+ *  and the call to action by its words ("Get in touch"). */
+function nameParts(root) {
+    for (const role of [NavRole.Brand, NavRole.Links]) {
+        const part = find([root], role);
+        if (part && !part.label)
+            part.label = NAV_PART_LABELS[role];
+    }
+    const cta = find([root], NavRole.Cta);
+    if (cta && !cta.label) {
+        const words = textOf(cta);
+        if (words)
+            cta.label = words;
+    }
+}
+/**
+ * The bar's Items list "Add item" (board 2): one more item, before More — the next navigation page the
+ * bar does not link to yet (Home when every page is there). Refused at five (Q2). Input not mutated.
+ */
+function addBarItem(globals, options = {}) {
+    const out = clone$1(globals);
+    const root = findNavRoot(out);
+    const b = find(out, NavRole.Bar);
+    if (!root || !b)
+        return { globals: out, added: false };
+    const kids = b.children ?? (b.children = []);
+    if (kids.length >= BAR_ITEMS_MAX)
+        return { globals: out, added: false };
+    const linked = new Set(kids.filter(c => c.role === NavRole.BarItem).map(c => prop(c, 'pageRoute')));
+    const page = barPages(root, navPages(root), BAR_ITEMS_MAX + 1).find(p => !linked.has(p.route))
+        ?? { label: NAV_SHAPE_COPY.home, route: HOME_ROUTE };
+    const item = barItem(makeKit(out, root.id, options.newId), kids.length, page);
+    const more = kids.findIndex(c => c.role === NavRole.More);
+    if (more >= 0)
+        kids.splice(more, 0, item);
+    else
+        kids.push(item);
+    return { globals: out, added: true };
+}
+
 /**
  * THE composer — a Site Plan in, ordinary IOX data out (design-system plan §6b, W1). Deterministic and
  * pure: the same plan composes to byte-identical output, with no clock, no randomness and no transport.
@@ -7235,6 +7768,8 @@ function composeNode(pn, id, repeater, ctx) {
     assertTraits(type, Object.keys(props));
     // Props first: a Heading with no `es` wears its LEVEL's default style.
     const node = create(id, type, props, pn.es ?? null);
+    if (pn.role)
+        node.role = pn.role;
     // Words.
     if (words.placeholder) {
         const shown = words.value ?? String(NODE_BASELINES[type]?.props[TEXT_PROP[type]] ?? '');
@@ -7466,13 +8001,20 @@ function composeSite(plan, context) {
             layout,
         };
     });
-    const globals = Object.values(GlobalSlot).map(slot => {
+    let globals = Object.values(GlobalSlot).map(slot => {
         const pattern = patternById(plan.globals[slot]);
         const node = composePattern(pattern, slot, { ...base, owner: slot, page: null, section: null, nextAlias: null });
         node.isGlobal = true;
         node.globalPosition = pattern.global;
         return node;
     });
+    // CC1: a header pattern that names its phone shape gets it — the same edit the author's "Phone menu"
+    // section makes, so the composed header and a hand-switched one are one structure.
+    for (const slot of Object.values(GlobalSlot)) {
+        const shape = patternById(plan.globals[slot])?.phoneMenu;
+        if (shape)
+            globals = planNavShape(globals, shape, {}, slot).globals;
+    }
     return {
         source: clone(plan.source),
         business: clone(plan.business),
@@ -7504,5 +8046,5 @@ function composeSite(plan, context) {
  * Generated bundle index. Do not edit.
  */
 
-export { BASELINE_ROLES, BaselineRole, BindScope, CardBindTarget, ComposeError, ComposeIssueCode, DANGLING_LINK_CODES, FACT_KEYS, GlobalSlot, NEUTRAL_STYLE_PROPS, NODE_BASELINES, PatternDirective, PatternGlobalPosition, PatternPlaceholder, PatternRecipe, PlaceholderKind, PlanDataSourceMode, PlanDataSourceType, RelativeOp, SAMPLE_IMAGE_REF, SITE_FACT_LABELS, SITE_PATTERNS, SITE_PLAN_VERSION, SITE_TEMPLATES, SPEC_SITE_FACTS, SPEC_SITE_PATTERNS, SPEC_SITE_PLAN_SHAPE, SPEC_SITE_TEMPLATES, STUDIO_TEMPLATE, SitePlanError, SitePlanIssueCode, SitePlanSourceKind, SiteTemplateError, SiteTemplateId, altSourceScopes, assertStyleSlots, assertValidSitePlan, composeSite, createSerializedNode, nextSourceOf, nodeBindPaths, parseSampleImageRef, patternById, patternNeedsBinding, patternNodes, patternOptionalParts, patternScopes, patternSlots, planFromTemplate, releasedLayoutDefaults, requiredShapeKeys, routeParams, sampleImageRef, setStyleProps, shapeKeys, validateSitePlan, walkSerialized };
+export { BAR_ITEMS_MAX, BAR_ITEMS_MIN, BASELINE_ROLES, BaselineRole, BindScope, CardBindTarget, ComposeError, ComposeIssueCode, DANGLING_LINK_CODES, DEFAULT_PHONE_MENU_BREAKPOINT, FACT_KEYS, GlobalSlot, NAV_PART_LABELS, NAV_SHAPE_COPY, NEUTRAL_STYLE_PROPS, NODE_BASELINES, NavRole, NavShape, NavShapeError, PatternDirective, PatternGlobalPosition, PatternPlaceholder, PatternRecipe, PhoneMenuBreakpoint, PlaceholderKind, PlanDataSourceMode, PlanDataSourceType, RelativeOp, SAMPLE_IMAGE_REF, SITE_FACT_LABELS, SITE_PATTERNS, SITE_PLAN_VERSION, SITE_TEMPLATES, SPEC_SITE_FACTS, SPEC_SITE_PATTERNS, SPEC_SITE_PLAN_SHAPE, SPEC_SITE_TEMPLATES, STUDIO_TEMPLATE, SitePlanError, SitePlanIssueCode, SitePlanSourceKind, SiteTemplateError, SiteTemplateId, addBarItem, altSourceScopes, assertStyleSlots, assertValidSitePlan, barIconForRoute, composeSite, createSerializedNode, findNavRoot, navPages, navShapeBreakpoint, navShapeOf, nextSourceOf, nodeBindPaths, parseSampleImageRef, patternById, patternNeedsBinding, patternNodes, patternOptionalParts, patternScopes, patternSlots, planFromTemplate, planNavShape, releasedLayoutDefaults, requiredShapeKeys, routeParams, sampleImageRef, setStyleProps, shapeKeys, validateSitePlan, walkSerialized };
 //# sourceMappingURL=vectoriox-iox-ui-generation-core.mjs.map