@vectoriox/iox-ui 5.39.0 → 5.41.0

package/src/generation-core/compose-site.ts

@@ -1,11 +1,11 @@
-import { DesignChoices, LinkType, resolveDesignChoices } from '@vectoriox/iox-ui/design-core';
+import { COLOR_SCHEMES, DesignChoices, LinkType, resolveDesignChoices, setColorScheme } from '@vectoriox/iox-ui/design-core';
 import { FormPresetDef, FormPresetField, formPresetById } from '@vectoriox/iox-ui/forms-core';
 import {
     ACCORDION_BIND_PROP, ACCORDION_CONTENT_LIMIT, ACCORDION_WORDS, accordionAnswerOf, accordionItems, accordionQuestionOf, AccordionRole,
     buildAccordionRecipe, buildCardRecipe, buildCarouselRecipe, buildLightboxRecipe, CardLayout, CardPart, CardRole, CARD_LAYOUTS, CARD_PARTS, CompositeNode,
     CompositeNodeSpec, findByRole, LIGHTBOX_LABEL, pickAccordionAutoBinds, pickTabsAutoBinds, SLIDE_TO_ROW, SLIDE_TYPE, buildTabsRecipe, tabLabelNodeOf,
     tabPanelImageOf, tabPanelTextOf, tabsListOf, tabsPanels, tabsPanelsOf, tabsTriggers, TABS_CONTENT_LIMIT, TABS_IMAGE_BIND_PROP, TABS_LABEL_BIND_PROP,
-    TABS_TEXT_BIND_PROP, TABS_WORDS,
+    TABS_TEXT_BIND_PROP, TABS_WORDS, BadgeTone, BADGE_TONES, buildSegmentedRecipe, CardWords, ITEM_OPEN_STATE, segmentedOptions,
 } from '@vectoriox/iox-ui/composite-core';
 
 import { NODE_BASELINES } from './node-baselines.generated';
@@ -41,6 +41,18 @@ export enum PlaceholderKind {
     Image = 'image',
     /** CC3: a video slot with no clip — the studio uploads its own (the poster blank meanwhile). */
     Video = 'video',
+    /** CC4b (Q37): a price — a FACT the customer could be held to. Free text the studio types ("₪ 1,200", "From $40",
+     *  "On request"); its label shows meanwhile ("Monthly price"), never a number. No currency model. */
+    Price = 'price',
+}
+
+/** The placeholders a page cannot be published with unfilled (W4's gate): a fact, a price, the studio's own video.
+ *  Copy and an empty image are the author's to rewrite, never blocking. */
+export const PUBLISH_BLOCKING_PLACEHOLDERS: ReadonlySet<PlaceholderKind> = new Set([PlaceholderKind.Fact, PlaceholderKind.Price, PlaceholderKind.Video]);
+
+/** True when a placeholder of `kind` blocks publishing until the studio fills it. */
+export function blocksPublish(kind: PlaceholderKind): boolean {
+    return PUBLISH_BLOCKING_PLACEHOLDERS.has(kind);
 }
 
 export interface ComposedPlaceholder {
@@ -241,6 +253,18 @@ interface Ctx {
     routes: ReadonlySet<string>;
     /** CC3: nodes whose click opens the pattern's lightbox (`opens`), wired once the pattern is stamped. */
     openers?: string[];
+    /** CC4b: nodes shown while an option is on (`shownWhen`), wired once the pattern is stamped. */
+    shownWhen?: ShownWhen[];
+    /** A section inserted from the palette (`composeSection`): a button to a page the studio lacks keeps its words,
+     *  unlinked — the author links it — instead of being removed. */
+    keepButtons?: boolean;
+}
+
+interface ShownWhen {
+    id: string;
+    key: string;
+    /** The display the node shows with (its own layout's, else flex). */
+    display: string;
 }
 
 function nonEmpty(v: unknown): v is string {
@@ -273,6 +297,7 @@ function chooseText(pn: PatternNode, ctx: Ctx): TextChoice {
     }
     const own = pn.text === undefined ? undefined : fillVariables(pn.text, ctx);
     if (pn.ph === PatternPlaceholder.Copy) return { value: own, placeholder: { kind: PlaceholderKind.Copy } };
+    if (pn.ph === PatternPlaceholder.Price) return { value: own, placeholder: { kind: PlaceholderKind.Price } };
     return { value: own };
 }
 
@@ -364,7 +389,7 @@ enum DanglingFate {
 function danglingFate(pn: PatternNode, ctx: Ctx): DanglingFate | null {
     if (!pn.href || pn.href === PatternDirective.PageRoute || ctx.routes.has(pn.href)) return null;
     if (ctx.email) return DanglingFate.Email;
-    return UNLINKED_TYPE[pn.t] ? DanglingFate.Unlink : DanglingFate.Remove;
+    return UNLINKED_TYPE[pn.t] || (ctx.keepButtons && pn.t === BUTTON_BLOCK) ? DanglingFate.Unlink : DanglingFate.Remove;
 }
 
 const DANGLING_ISSUE: Readonly<Record<DanglingFate, ComposeIssueCode>> = {
@@ -378,7 +403,9 @@ function reportDangling(fate: DanglingFate, pn: PatternNode, id: string, words:
     const outcome = {
         [DanglingFate.Email]: `it now opens an email to ${ctx.email}`,
         [DanglingFate.Remove]: 'with no email address to send to instead, it was removed',
-        [DanglingFate.Unlink]: 'with no email address to send to instead, the box keeps its contents without the link',
+        [DanglingFate.Unlink]: pn.t === BUTTON_BLOCK
+            ? 'with no email address to send to instead, the button keeps its words without the link'
+            : 'with no email address to send to instead, the box keeps its contents without the link',
     }[fate];
     ctx.issues.push({
         code: DANGLING_ISSUE[fate], nodeId: id, owner: ctx.owner, route: pn.href,
@@ -459,7 +486,7 @@ function composeNode(pn: PatternNode, id: string, repeater: RepeaterScope | null
         reportDangling(fate, pn, id, words.value, ctx);
         return null;
     }
-    const type = fate === DanglingFate.Unlink ? UNLINKED_TYPE[pn.t] : pn.t;
+    const type = fate === DanglingFate.Unlink ? UNLINKED_TYPE[pn.t] ?? pn.t : pn.t;
 
     const props: Record<string, unknown> = {};
     if (pn.level) props['level'] = pn.level;
@@ -501,6 +528,11 @@ function composeNode(pn: PatternNode, id: string, repeater: RepeaterScope | null
         ctx.placeholders.push({ nodeId: id, owner: ctx.owner, kind: PlaceholderKind.Video, text: '' });
     }
     if (pn.name) setProp(node, 'ariaLabel', pn.name);
+    if (pn.icon) {
+        if (type !== ICON) throw new ComposeError(`${id}: "icon" belongs on an Icon`);
+        setProp(node, 'iconClass', pn.icon);
+    }
+    if (pn.layer) node.label = pn.layer;
     if (pn.opens) {
         if (pn.opens !== PatternOpens.Lightbox) throw new ComposeError(`${id}: "opens" names the pattern's lightbox`);
         (ctx.openers ??= []).push(id);
@@ -542,11 +574,8 @@ function composeNode(pn: PatternNode, id: string, repeater: RepeaterScope | null
     }
 
     // Layout.
-    if (pn.lay) setStyleProps(node, pn.lay);
-    if (pn.resp) {
-        for (const layer of Object.values(pn.resp)) assertStyleSlots(node.type, Object.keys(layer));
-        node.responsive = Object.fromEntries(Object.entries(pn.resp).map(([bp, styleProps]) => [bp, { styleProps: { ...styleProps } }]));
-    }
+    applyLayout(node, pn);
+    if (pn.shownWhen) hideUntilOn(node, pn, ctx);
 
     // A Repeater's rows.
     let rowScope = repeater;
@@ -573,6 +602,44 @@ function composeNode(pn: PatternNode, id: string, repeater: RepeaterScope | null
     return node;
 }
 
+/** A pattern node's layout: its `lay` styleProps and its per-breakpoint `resp` layers. */
+function applyLayout(node: SerializedNode, pn: PatternNode): void {
+    if (pn.lay) setStyleProps(node, pn.lay);
+    if (pn.resp) {
+        for (const layer of Object.values(pn.resp)) assertStyleSlots(node.type, Object.keys(layer));
+        node.responsive = Object.fromEntries(Object.entries(pn.resp).map(([bp, styleProps]) => [bp, { styleProps: { ...styleProps } }]));
+    }
+}
+
+/** CC4b (`shownWhen`, Q38): hidden at base and shown — with its own layout's display — while the pattern's Segmented
+ *  option of that key is on. Wired once the pattern is stamped (the option's id is known then). */
+function hideUntilOn(node: SerializedNode, pn: PatternNode, ctx: Ctx): void {
+    const display = String(node.styleProps['display'] ?? '') || SHOWN_DISPLAY;
+    setStyleProps(node, { display: HIDDEN_DISPLAY });
+    (ctx.shownWhen ??= []).push({ id: node.id, key: pn.shownWhen!, display });
+}
+
+/** CC4b: every `shownWhen` node of a stamped pattern follows its option — the targeted `trigger-on` ("when Yearly is
+ *  on"), compiled by both renderers to ONE `:has()` rule on the nearest common ancestor. */
+function wireShownWhen(root: SerializedNode, entries: ReadonlyArray<ShownWhen>): void {
+    if (!entries.length) return;
+    const nodes = new Map<string, SerializedNode>();
+    const options = new Map<string, string>();
+    const visit = (n: SerializedNode) => {
+        nodes.set(n.id, n);
+        for (const option of segmentedOptions(n as unknown as CompositeNode)) if (option.itemKey && !options.has(option.itemKey)) options.set(option.itemKey, option.id!);
+        (n.children ?? []).forEach(visit);
+    };
+    visit(root);
+    for (const entry of entries) {
+        const option = options.get(entry.key);
+        if (!option) throw new ComposeError(`${entry.id}: "shownWhen: ${entry.key}" names no option of a segmented in the pattern`);
+        const node = nodes.get(entry.id)!;
+        node.stateStyles = { ...(node.stateStyles ?? {}), [ITEM_OPEN_STATE]: { display: entry.display } };
+        node.stateTriggers = { ...(node.stateTriggers ?? {}), [ITEM_OPEN_STATE]: option };
+    }
+}
+
 /** A Card v2 `binds` key → the part it binds and that part's bound prop. */
 const CARD_BINDS: Readonly<Record<CardBindTarget, { role: CardRole; prop: string }>> = {
     [CardBindTarget.Image]: { role: CardRole.Media, prop: 'src' },
@@ -591,6 +658,7 @@ function composeRecipe(pn: PatternNode, id: string, repeater: RepeaterScope | nu
     if (pn.recipe === PatternRecipe.Tabs) return composeTabs(pn, id, ctx);
     if (pn.recipe === PatternRecipe.Carousel) return composeCarousel(pn, id, ctx);
     if (pn.recipe === PatternRecipe.Lightbox) return composeLightbox(pn, id, repeater, ctx);
+    if (pn.recipe === PatternRecipe.Segmented) return composeSegmented(pn, id);
     if (pn.recipe !== PatternRecipe.Card) throw new ComposeError(`${id}: no recipe "${pn.recipe}" in composite-core`);
     const layout = (pn.layout ?? CardLayout.Top) as CardLayout;
     if (!CARD_LAYOUTS.includes(layout)) throw new ComposeError(`${id}: a card has no layout "${pn.layout}"`);
@@ -599,7 +667,21 @@ function composeRecipe(pn: PatternNode, id: string, repeater: RepeaterScope | nu
     }
     const factory = (spec: CompositeNodeSpec): CompositeNode =>
         create(spec.key === CardRole.Card ? id : `${id}-${spec.key}`, spec.type, { ...(spec.props ?? {}) }, spec.elementStyle ?? null) as CompositeNode;
-    const card = buildCardRecipe(factory, { layout, parts: pn.parts as Partial<Record<CardPart, boolean>> }) as SerializedNode;
+    const tone = pn.badge as BadgeTone | undefined;
+    if (tone && !BADGE_TONES.includes(tone)) throw new ComposeError(`${id}: a badge has no tone "${pn.badge}"`);
+    for (const key of Object.keys(pn.words ?? {})) if (!CARD_WORD_KEYS.includes(key)) throw new ComposeError(`${id}: a card has no words "${key}"`);
+    const card = buildCardRecipe(factory, {
+        layout, parts: pn.parts as Partial<Record<CardPart, boolean>>, words: pn.words as Partial<CardWords> | undefined, badgeTone: tone,
+    }) as SerializedNode;
+    if (pn.scheme) {
+        if (!COLOR_SCHEMES.some(c => c.id === pn.scheme)) throw new ComposeError(`${id}: no colour scheme "${pn.scheme}"`);
+        setColorScheme(card, pn.scheme);
+    }
+    if (pn.ph === PatternPlaceholder.Copy) copyPlaceholders(card, ctx);
+    if (pn.c?.length) {
+        const content = findByRole(card as CompositeNode, CardRole.Content) as SerializedNode;
+        content.children = [...(content.children ?? []), ...composeChildren(pn, id, repeater, ctx)];
+    }
 
     for (const [key, path] of Object.entries(pn.binds ?? {})) {
         const target = CARD_BINDS[key as CardBindTarget];
@@ -628,6 +710,31 @@ function composeRecipe(pn: PatternNode, id: string, repeater: RepeaterScope | nu
 }
 
 const REPEATER = 'Repeater';
+const ICON = 'Icon';
+const SHOWN_DISPLAY = 'flex';
+const HIDDEN_DISPLAY = 'none';
+/** The words a card recipe's `words` may set (composite-core `CardWords`). */
+const CARD_WORD_KEYS: ReadonlyArray<string> = ['eyebrow', 'title', 'text', 'primary', 'secondary', 'badge'];
+/** A card's words the studio rewrites (`ph: 'copy'`): its eyebrow, title, text and badge. */
+const CARD_COPY_ROLES: ReadonlyArray<string> = [CardRole.Eyebrow, CardRole.Title, CardRole.Text];
+
+/** A card's own words, as COPY placeholders (its badge's words too). */
+function copyPlaceholders(card: SerializedNode, ctx: Ctx): void {
+    for (const role of CARD_COPY_ROLES) {
+        const part = findByRole(card as unknown as CompositeNode, role) as SerializedNode | undefined;
+        if (part) ctx.placeholders.push({ nodeId: part.id, owner: ctx.owner, kind: PlaceholderKind.Copy, text: String(part.props?.['content'] ?? '') });
+    }
+    const badge = findByRole(card as unknown as CompositeNode, CardRole.Badge) as SerializedNode | undefined;
+    const words = badge?.children?.find(c => c.type === TEXT);
+    if (words) ctx.placeholders.push({ nodeId: words.id, owner: ctx.owner, kind: PlaceholderKind.Copy, text: String(words.props?.['content'] ?? '') });
+}
+
+/** CC4b: the Segmented control — composite-core's recipe (Monthly · Yearly), named by the pattern, laid out by it. */
+function composeSegmented(pn: PatternNode, id: string): SerializedNode {
+    const root = buildSegmentedRecipe(recipeFactory(id, 'segmented'), pn.name !== undefined ? { label: pn.name } : {}) as SerializedNode;
+    applyLayout(root, pn);
+    return root;
+}
 
 /**
  * An Accordion (CC2) — the composite-core recipe stamped with this composer's factory. Manual (no section
@@ -784,10 +891,11 @@ function wireOpeners(root: SerializedNode, openers: ReadonlyArray<string>): void
 
 function composePattern(pattern: SitePattern, id: string, ctx: Ctx): SerializedNode {
     if (pattern.node.each) throw new ComposeError(`${id}: a pattern's root cannot be stamped per page`);
-    const own: Ctx = { ...ctx, openers: [] };
+    const own: Ctx = { ...ctx, openers: [], shownWhen: [] };
     const node = composeNode(pattern.node, id, null, own);
     if (!node) throw new ComposeError(`${id}: a pattern's root cannot be optional or a link`);
     wireOpeners(node, own.openers ?? []);
+    wireShownWhen(node, own.shownWhen ?? []);
     node.label = pattern.label;
     return node;
 }
@@ -886,3 +994,131 @@ export function composeSite(plan: SitePlan, context: ComposeContext): ComposedSi
         issues,
     };
 }
+
+// ── The site header on its own (CC1.1) ──────────────────────────────────────────────────────────
+
+/** The header pattern the Studio template stamps — and the builder palette's "Navigation bar". */
+export const SITE_HEADER_PATTERN = 'nav.inline-cta';
+
+/** A page of the studio as the builder lists it. */
+export interface SitePageRef {
+    readonly name: string;
+    readonly route: string;
+    readonly isHome?: boolean;
+}
+
+/** What the header is composed from when there is no Site Plan: the studio's name and its pages. */
+export interface NavHeaderInput {
+    readonly business: SiteBusiness;
+    /** Every page of the studio, in the order the navigation should list them. */
+    readonly pages: ReadonlyArray<SitePageRef>;
+}
+
+export interface NavHeaderOptions {
+    /** The header's id; its parts' ids derive from it (`<id>-0-1-…`), so a fresh id gives fresh parts. */
+    readonly id: string;
+    /** A phone-shape part's id (the builder passes its id generator). */
+    readonly newId?: (suffix: string) => string;
+}
+
+export interface ComposedNavHeader {
+    /** The header — a global BEFORE element — carrying the pattern's phone shape (the drawer). */
+    header: SerializedNode;
+    issues: ComposeIssue[];
+}
+
+const ROUTE_PARAM = ':';
+const HOME_PATH = '/';
+const KEY_UNSAFE = /[^a-z0-9]+/gi;
+
+/** The pages a navigation links to: every page but Home (the brand links there) and template pages
+ *  (a `/work/:slug` route has no single address), in the studio's order. */
+export function siteNavPages(pages: ReadonlyArray<SitePageRef>): SitePageRef[] {
+    return pages.filter(p => !!p.route && !p.isHome && p.route !== HOME_PATH && !p.route.includes(ROUTE_PARAM));
+}
+
+function navPagePlans(pages: ReadonlyArray<SitePageRef>): PagePlan[] {
+    const used = new Set<string>();
+    return pages.map((p, i) => {
+        let key = p.route.replace(KEY_UNSAFE, '-').replace(/^-+|-+$/g, '').toLowerCase() || `page-${i}`;
+        for (let n = 2; used.has(key); n++) key = `${key}-${n}`;
+        used.add(key);
+        return { key, name: p.name, route: p.route, inNav: true, isHome: p.isHome === true, sections: [] };
+    });
+}
+
+/**
+ * The Studio template's header, composed for a studio that has no Site Plan — the builder palette's
+ * "Navigation bar". THE SAME pattern and the same composer as `composeSite`: the brand (the business name),
+ * one plain Link per navigation page, the call to action (W1.1's one dangling-link rule when the studio has
+ * no /contact page: an email to the business, else removed), and the pattern's phone shape. Pure.
+ */
+export function composeNavHeader(input: NavHeaderInput, options: NavHeaderOptions): ComposedNavHeader {
+    if (!nonEmpty(options?.id)) throw new ComposeError('composeNavHeader needs the header id');
+    const pattern = patternById(SITE_HEADER_PATTERN) as SitePattern;
+    const all = navPagePlans(input.pages);
+    const navRoutes = new Set(siteNavPages(input.pages).map(p => p.route));
+    const pages = all.map(p => ({ ...p, inNav: navRoutes.has(p.route) }));
+    const plan = { business: input.business, pages, dataSources: [], contentTypes: [] } as unknown as SitePlan;
+    const email = nonEmpty(input.business.facts?.email) ? input.business.facts!.email!.trim() : null;
+    const issues: ComposeIssue[] = [];
+    const ctx: Ctx = {
+        owner: GlobalSlot.Header, page: null, section: null, plan, year: 0, email, navPage: null, nextAlias: null,
+        placeholders: [], issues, routes: new Set(pages.map(p => p.route)),
+    };
+    const root = composePattern(pattern, options.id, ctx);
+    root.isGlobal = true;
+    root.globalPosition = pattern.global;
+    const shape = pattern.phoneMenu as NavShape | undefined;
+    const header = shape ? planNavShape([root], shape, { newId: options.newId }, root.id).globals[0] : root;
+    return { header, issues };
+}
+
+// ── One pattern on its own (CC4b) ───────────────────────────────────────────────────────────────
+
+/** The pricing section (CC4b, board 10): plans with a Monthly / Yearly switch — the library and the palette, never a
+ *  Studio page (Q35). */
+export const PRICING_PATTERN = 'pricing.tiers';
+
+/** What a section is composed from when there is no Site Plan: the studio's name, its pages (the routes a link may
+ *  reach) and its facts. */
+export interface SectionInput {
+    readonly business?: SiteBusiness;
+    readonly pages?: ReadonlyArray<SitePageRef>;
+}
+
+export interface SectionOptions {
+    /** The section's id; its parts' ids derive from it (`<id>-0-1-…`), so a fresh id gives fresh parts. */
+    readonly id: string;
+}
+
+export interface ComposedSection {
+    section: SerializedNode;
+    placeholders: ComposedPlaceholder[];
+    issues: ComposeIssue[];
+}
+
+/**
+ * ONE library pattern composed on its own — the builder palette's ready-made sections (CC4b: "Pricing", the
+ * `pricing.tiers` pattern). THE SAME pattern and composer as `composeSite`: its words, its placeholders (a price shows
+ * its label, never a number) and the one dangling-link rule — except a button to a page the studio lacks keeps its
+ * words, unlinked, for the author to link. Pure.
+ */
+export function composeSection(patternId: string, input: SectionInput, options: SectionOptions): ComposedSection {
+    if (!nonEmpty(options?.id)) throw new ComposeError('composeSection needs the section id');
+    const pattern = patternById(patternId);
+    if (!pattern) throw new ComposeError(`no pattern "${patternId}" in the library`);
+    if (pattern.global) throw new ComposeError(`"${patternId}" is a header or footer — composeNavHeader / composeSite stamp those`);
+    const business: SiteBusiness = input.business ?? { name: '' } as SiteBusiness;
+    const pages = navPagePlans(input.pages ?? []);
+    const plan = { business, pages, dataSources: [], contentTypes: [] } as unknown as SitePlan;
+    const email = nonEmpty(business.facts?.email) ? business.facts!.email!.trim() : null;
+    const placeholders: ComposedPlaceholder[] = [];
+    const issues: ComposeIssue[] = [];
+    const ctx: Ctx = {
+        owner: options.id, page: null, section: null, plan, year: 0, email, navPage: null, nextAlias: null,
+        placeholders, issues, routes: new Set(pages.map(p => p.route)), keepButtons: true,
+    };
+    const section = composePattern(pattern, options.id, ctx);
+    return { section, placeholders, issues };
+}

package/src/generation-core/nav-shape.ts

@@ -67,6 +67,8 @@ export interface NavShapeOptions {
     barItems?: number;
     /** A new part's id (the builder passes its id generator). Default: `<nav id>-<suffix>`. */
     newId?: (suffix: string) => string;
+    /** The studio's pages, for a header that links to none (a hand-built one): its menu lists these. */
+    pages?: ReadonlyArray<NavPage>;
 }
 
 export interface NavShapeResult {
@@ -199,6 +201,21 @@ export function navPages(root: SerializedNode): NavPage[] {
     return source.filter(isPageLink).map(n => ({ label: textOf(n), route: String(prop(n, 'pageRoute')) }));
 }
 
+/** Where a phone menu's pages come from: the header's own page Links, else the studio's pages. */
+export enum NavPagesSource {
+    Header = 'header',
+    Site = 'site',
+    None = 'none',
+}
+
+/** The pages a phone menu lists: the header's (`navPages`), else `sitePages` — a hand-built header with no
+ *  page links still gets a working menu. */
+export function phoneMenuPages(root: SerializedNode, sitePages: ReadonlyArray<NavPage> = []): { pages: NavPage[]; source: NavPagesSource } {
+    const own = navPages(root);
+    if (own.length) return { pages: own, source: NavPagesSource.Header };
+    return sitePages.length ? { pages: [...sitePages], source: NavPagesSource.Site } : { pages: [], source: NavPagesSource.None };
+}
+
 /** A hand-built header: every page Link outside a drawer. */
 function collectHeaderLinks(root: SerializedNode): SerializedNode[] {
     const out: SerializedNode[] = [];
@@ -439,7 +456,7 @@ export function planNavShape(globals: ReadonlyArray<SerializedNode>, shape: NavS
     const kit = makeKit(out, root.id, options.newId);
 
     adoptRoles(root);
-    const pages = navPages(root);
+    const { pages } = phoneMenuPages(root, options.pages);
     const wantDrawer = shape !== NavShape.Bar;
     const wantBar = shape !== NavShape.Drawer;
     const wantMenuButton = shape === NavShape.Drawer;
@@ -538,7 +555,7 @@ export interface AddBarItemResult {
  * 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.
  */
-export function addBarItem(globals: ReadonlyArray<SerializedNode>, options: Pick<NavShapeOptions, 'newId'> = {}): AddBarItemResult {
+export function addBarItem(globals: ReadonlyArray<SerializedNode>, options: Pick<NavShapeOptions, 'newId' | 'pages'> = {}): AddBarItemResult {
     const out = clone(globals) as SerializedNode[];
     const root = findNavRoot(out);
     const b = find(out, NavRole.Bar);
@@ -546,10 +563,43 @@ export function addBarItem(globals: ReadonlyArray<SerializedNode>, options: Pick
     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))
+    const page = barPages(root, phoneMenuPages(root, options.pages).pages, 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 };
 }
+
+export interface BarItemsEditResult {
+    globals: SerializedNode[];
+    /** False when nothing changed: no bar, an unknown item, or the bar would drop below three items (Q2). */
+    changed: boolean;
+}
+
+function barOf(globals: ReadonlyArray<SerializedNode>): { out: SerializedNode[]; kids: SerializedNode[] | null } {
+    const out = clone(globals) as SerializedNode[];
+    const b = find(out, NavRole.Bar);
+    return { out, kids: b ? (b.children ?? (b.children = [])) : null };
+}
+
+/**
+ * The bar's Items list "Remove" (board 2): the item goes, More included — refused below three items (Q2:
+ * 3–5), so the bar never shrinks into something a thumb cannot use. Input not mutated.
+ */
+export function removeBarItem(globals: ReadonlyArray<SerializedNode>, itemId: string): BarItemsEditResult {
+    const { out, kids } = barOf(globals);
+    const i = kids ? kids.findIndex(c => c.id === itemId) : -1;
+    if (!kids || i < 0 || kids.length <= BAR_ITEMS_MIN) return { globals: out, changed: false };
+    kids.splice(i, 1);
+    return { globals: out, changed: true };
+}
+
+/** The bar's Items list drag-to-reorder (board 2): item `from` moves to `to`. Input not mutated. */
+export function moveBarItem(globals: ReadonlyArray<SerializedNode>, from: number, to: number): BarItemsEditResult {
+    const { out, kids } = barOf(globals);
+    if (!kids || from === to || from < 0 || to < 0 || from >= kids.length || to >= kids.length) return { globals: out, changed: false };
+    const [item] = kids.splice(from, 1);
+    kids.splice(to, 0, item);
+    return { globals: out, changed: true };
+}