@vectoriox/iox-builder 10.0.3 → 10.1.1

package/fesm2022/vectoriox-iox-builder.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Injectable, InjectionToken, Optional, Inject, inject, NgZone, EventEmitter, createComponent, Output, Input, Directive, Component, ChangeDetectionStrategy, ViewChild, effect, ContentChildren, NO_ERRORS_SCHEMA, NgModule } from '@angular/core';
+import { InjectionToken, Injectable, Optional, Inject, inject, NgZone, EventEmitter, createComponent, Output, Input, Directive, Component, ChangeDetectionStrategy, ViewChild, effect, ContentChildren, NO_ERRORS_SCHEMA, NgModule } from '@angular/core';
 import * as i2 from '@angular/common';
 import { DOCUMENT, CommonModule } from '@angular/common';
 import * as i17 from '@angular/forms';
@@ -17,12 +17,12 @@ import { TooltipModule } from 'primeng/tooltip';
 import * as i20 from 'primeng/dialog';
 import { DialogModule } from 'primeng/dialog';
 import * as i1$1 from '@vectoriox/iox-ui';
-import { resolveBoundValue, VALIDATION_STATES as VALIDATION_STATES$1, VALIDATION_STATE_CLASS as VALIDATION_STATE_CLASS$1, DEFAULT_WIDTH_BY_TYPE, TEXT_DIRECTION_KEY, TEXT_ALIGN_KEY, TextAlign, COLOR_SCHEME_TRAIT, COLOR_SCHEMES, ColorScheme, LinkType, MAX_LINES_KEY, A11yTrait, BREAKPOINTS, Breakpoint, withSchemeInk, stripSuppressedProps, DeclarationContext, buildPartSelector, planResponsiveRules, resolveStyleProps, targetedStateSelector, stateSelectorSuffix, compileTokenCssBlocks, catalogFontId, fontsForTokens, GOOGLE_FONTS_FILE_ORIGIN, googleFontHref, compileDeclarations, wrapInBreakpointQuery, BreakpointQueryKind, NEW_NODE_STYLE_DEFAULTS, defaultElementStyleFor, applyElementStyle, planDataSource, dataSourcePlanToRequest, normalizeCollectionResult, resolveRepeaterItems, getByPath, computeRelative, ContextStore, ENTRANCE_ACTION_TYPES, EXIT_ACTION_TYPES, ComponentInstanceRegistryService, isActionEnabled, isContextAction, contextActionEffect, resolveContextValue, effectiveActionType, INTERACTION_HIDDEN_ATTRIBUTE, motionAllowed, finalKeyframe, keyframeStyleEntries, buildInteractionKeyframes, declaredInputNames, emptyImagePlaceholder, syncNodeDesignClasses, nodeTraitValue, syncNodeA11yAttributes, nodeA11yAttributes, safeSetInput, colorSchemeOf, composeVirtualTraits, withDefaultHoverTransition, stateNamesIn, partClassName, switchElementStyle, releaseElementStyle, countOverrides, setOverride, breakpointDef, breakpointForWidth, FormRenderState, needsAccessibleName, resolveInputs, setInputOverride, barReserveClass, collectContextSlotKeys, withContextSlots, compilePageStyle, nodeUsesContext, IS_PREVIEW, buttonBlockHref, bootSlider, IoxPageModule, PALETTE_PRESETS, elementStyleById, PART_CLASS_NAMES } from '@vectoriox/iox-ui';
+import { nodeCssId, needsGroupName, resolveBoundValue, VALIDATION_STATES as VALIDATION_STATES$1, VALIDATION_STATE_CLASS as VALIDATION_STATE_CLASS$1, DEFAULT_WIDTH_BY_TYPE, TEXT_DIRECTION_KEY, TEXT_ALIGN_KEY, TextAlign, COLOR_SCHEME_TRAIT, COLOR_SCHEMES, ColorScheme, LinkType, MAX_LINES_KEY, A11yTrait, BREAKPOINTS, Breakpoint, withSchemeInk, stripSuppressedProps, DeclarationContext, buildPartSelector, planResponsiveRules, resolveStyleProps, targetedStateSelector, stateSelectorSuffix, compileTokenCssBlocks, catalogFontId, fontsForTokens, GOOGLE_FONTS_FILE_ORIGIN, googleFontHref, compileDeclarations, isLastEmittedStateKey, wrapInBreakpointQuery, BreakpointQueryKind, NEW_NODE_STYLE_DEFAULTS, defaultElementStyleFor, applyElementStyle, planDataSource, dataSourcePlanToRequest, normalizeCollectionResult, resolveRepeaterItems, getByPath, computeRelative, ContextStore, ENTRANCE_ACTION_TYPES, EXIT_ACTION_TYPES, ComponentInstanceRegistryService, isActionEnabled, isContextAction, contextActionEffect, resolveContextValue, effectiveActionType, INTERACTION_HIDDEN_ATTRIBUTE, motionAllowed, finalKeyframe, keyframeStyleEntries, buildInteractionKeyframes, declaredInputNames, emptyImagePlaceholder, syncNodeDesignClasses, nodeTraitValue, syncNodeA11yAttributes, nodeA11yAttributes, safeSetInput, colorSchemeOf, composeVirtualTraits, withDefaultHoverTransition, stateNamesIn, partClassName, switchElementStyle, releaseElementStyle, countOverrides, setOverride, breakpointDef, breakpointForWidth, FormRenderState, needsAccessibleName, resolveInputs, setInputOverride, barReserveClass, collectContextSlotKeys, withContextSlots, compilePageStyle, nodeUsesContext, IS_PREVIEW, buttonBlockHref, bootSlider, IoxPageModule, PALETTE_PRESETS, elementStyleById, PART_CLASS_NAMES } from '@vectoriox/iox-ui';
 export { ComponentInstanceRegistryService, VIRTUAL_TRAIT_KEYS, composeVirtualTraits } from '@vectoriox/iox-ui';
-import { isExclusiveItemPart, exclusiveRootOf, isTabsFromContent, TabsRole, tabTriggerOf, tabLabel, removeTabPair, tabPanelOf, tabsListOf, tabsPanelsOf, nextTabKey, StructureEdit, isAccordionPart, isDisclosurePart, isSliderPart, isTabsPart, structureRefusal, StructureRefusal, AccordionRole, CompositeBehaviourTrait, ACCORDION_DEFAULT_ONS, TabsBehaviourTrait, TABS_ACTIVATE_ONS, TABS_ORIENTATIONS, onCompositeItemState, isCompositeItemOn, runCompositeItemAction, shouldScrollToItem, rowIndexOf as rowIndexOf$1, slideIndexForRow, DisclosureRole, isExclusiveTrigger, compositeScopeId, compositeRowKeys, isExclusiveRoot, ExclusiveRuntime, tabsLabel, tabsBehaviour, compositeKindOfRole, AccordionRuntime, accordionBehaviour, isToggleKind, closestAccordionItem, isAnyCompositeRoot, isAccordionRoot, isExclusiveList, buildCardRecipe, buildBadge, buildChip, buildAccordionRecipe, buildDisclosureRecipe, buildTabsRecipe, buildLightboxRecipe, NO_ELEMENT_STYLE, CompositeKind, SliderRole, accordionItemLabel, isExclusivePanels, isLockedPart, accordionRootOf, isAccordionFromContent, accordionItemOf, addAccordionItem, addTabPair, isCompositeItem, accordionHeadingLevel, isCompositePanel, isCompositeTrigger, splitSliderChildren, hasSliderParts } from '@vectoriox/iox-ui/composite-core';
+import { StructureEdit, isAccordionPart, isDisclosurePart, isSliderPart, isTabsPart, isSegmentedPart, structureRefusal, StructureRefusal, SegmentedRole, SEGMENTED_MAX_OPTIONS, AccordionRole, SEGMENTED_MIN_OPTIONS, isExclusiveItemPart, TabsRole, ITEM_OPEN_STATE, readStyle, isSegmentedRoot, segmentedDefaultOn, segmentedOptions, isTabsRoot, isTabsFromContent, tabsTriggers, isAccordionRoot, isAccordionFromContent, accordionItems, initialAccordionOpen, accordionBehaviour, exclusiveItemLabel, exclusiveRootOf, tabTriggerOf, tabLabel, removeTabPair, tabPanelOf, tabsListOf, tabsPanelsOf, nextTabKey, CompositeBehaviourTrait, ACCORDION_DEFAULT_ONS, TabsBehaviourTrait, TABS_ACTIVATE_ONS, TABS_ORIENTATIONS, onCompositeItemState, isCompositeItemOn, runCompositeItemAction, shouldScrollToItem, rowIndexOf as rowIndexOf$1, slideIndexForRow, DisclosureRole, isExclusiveTrigger, compositeScopeId, compositeRowKeys, isExclusiveRoot, ExclusiveRuntime, exclusiveDefaultOf, exclusiveLabelOf, exclusiveBehaviourOf, exclusiveKindOf, compositeKindOfRole, AccordionRuntime, isToggleKind, closestAccordionItem, isAnyCompositeRoot, isExclusiveList, buildCardRecipe, buildBadge, buildChip, buildAccordionRecipe, buildDisclosureRecipe, buildTabsRecipe, buildSegmentedRecipe, buildLightboxRecipe, NO_ELEMENT_STYLE, CompositeKind, SliderRole, accordionItemLabel, segmentedOptionLabel, isExclusivePanels, isLockedPart, accordionRootOf, accordionItemOf, addAccordionItem, addTabPair, segmentedAddRefusal, addSegmentedOption, isCompositeItem, accordionHeadingLevel, isCompositePanel, isCompositeTrigger, splitSliderChildren, hasSliderParts } from '@vectoriox/iox-ui/composite-core';
+import { formContentInHost, isInteractiveHost, findFormContentInHosts } from '@vectoriox/iox-ui/forms-core';
 import { Subject, BehaviorSubject, of, forkJoin } from 'rxjs';
 import interact from 'interactjs';
-import { formContentInHost, isInteractiveHost, findFormContentInHosts } from '@vectoriox/iox-ui/forms-core';
 import { map, catchError } from 'rxjs/operators';
 import * as i1 from '@angular/common/http';
 import { itemActionOf, BEHAVIOUR_ACTION_TYPES, SERVER_ELEMENT_ACTION_TYPES, CONSENT_ACTION_TYPES, opensAtClickedItem } from '@vectoriox/iox-ui/actions-core';
@@ -33,230 +33,6 @@ import * as i18 from 'primeng/api';
 import { planVideo, VideoSource, VIDEO_PROVIDER_LABEL, VideoTrait, VideoMode } from '@vectoriox/iox-ui/media-core';
 import { ConsentCategory } from '@vectoriox/iox-ui/consent-core';
 
-/**
- * node-path — pure ancestor-chain helpers for the builder's node tree.
- *
- * The builder needs a node's ancestor chain in several places: the breadcrumb bar,
- * "select parent", and the parent-scoped style traits (Child Layout). Each of those
- * used to re-walk the tree with its own private recursion. `nodeAncestorPath` is the
- * single walk they all derive from.
- *
- * Builder-only on purpose: the SSR engine never needs a breadcrumb, so this stays in
- * `iox-builder` rather than `@vectoriox/iox-ui` (which is the home for logic BOTH
- * renderers consume). Structural helpers the two renderers share live in
- * `@vectoriox/iox-ui` `style-compiler/tree-relations.ts`.
- */
-/**
- * The chain of nodes from a root down to (and including) `target`, matched by
- * REFERENCE identity. Returns `null` when `target` is not in the tree.
- *
- * Depth-first, pre-order; first match wins. Reference identity (not `id`) is the right
- * matcher here because the builder mutates nodes in place and repeater/slider clones
- * deliberately share a template's `styleId` — matching by id would return the template's
- * path for a clone.
- */
-function nodeAncestorPath(roots, target) {
-    if (!roots?.length || !target)
-        return null;
-    for (const node of roots) {
-        if (node === target)
-            return [node];
-        const childPath = nodeAncestorPath(node.children, target);
-        if (childPath)
-            return [node, ...childPath];
-    }
-    return null;
-}
-/**
- * The immediate parent of `target`, or `null` when it is a root node or not in the tree.
- * Derived from `nodeAncestorPath` so there is exactly one tree walk to keep correct.
- */
-function findParentOf(roots, target) {
-    const path = nodeAncestorPath(roots, target);
-    return path && path.length >= 2 ? path[path.length - 2] : null;
-}
-/**
- * The ancestor chain across BOTH builder trees — the page layout and the global
- * elements overlay, which are separate roots. Returns the first tree that contains
- * the node, or `null` when neither does.
- */
-function nodeAncestorPathInEither(layout, globalElements, target) {
-    return nodeAncestorPath(layout, target) ?? nodeAncestorPath(globalElements, target);
-}
-
-/**
- * A tab and its panel go TOGETHER on the canvas (CC4a — composite T18): deleting either deletes both ("Delete tab and
- * its panel"), duplicating either duplicates both under one fresh key. The pairing is composite-core's (`itemKey`);
- * this is the builder's tree surgery over it, shared by every path (toolbar, layer tree, the host's Cmd+D / Delete).
- */
-/** The Tabs a tab or a panel belongs to — a MANUAL one (From content, the rows are not nodes) — or null. */
-function tabsRootForPart(layout, globals, node) {
-    if (!isExclusiveItemPart(node))
-        return null;
-    const path = nodeAncestorPathInEither(layout, globals, node) ?? [];
-    const root = exclusiveRootOf(node, path.filter(n => n !== node));
-    return root && !isTabsFromContent(root) ? root : null;
-}
-/** The words the pair is named by in the confirm: its tab's. */
-function tabPairLabel(root, node) {
-    const tree = root;
-    const tab = node.role === TabsRole.Panel ? tabTriggerOf(tree, node) : node;
-    return tab ? tabLabel(tab) : '';
-}
-/** Delete a tab and its panel. True when the pair was removed. */
-function deleteTabPair(root, node) {
-    return removeTabPair(root, node);
-}
-/**
- * Duplicate a tab and its panel: copies (`clone` gives fresh ids) placed right after the originals, both under ONE new
- * key — so the copy's tab shows the copy's panel. Returns the new tab, or null when `node` is no tab or panel of `root`.
- */
-function duplicateTabPair(root, node, clone) {
-    const tree = root;
-    const tab = (node.role === TabsRole.Panel ? tabTriggerOf(tree, node) : node);
-    const panel = tab ? tabPanelOf(tree, tab) : undefined;
-    const list = tabsListOf(tree);
-    const panels = tabsPanelsOf(tree);
-    if (!tab || !panel || !list?.children || !panels?.children)
-        return null;
-    const key = nextTabKey(tree);
-    const tabCopy = clone(tab);
-    const panelCopy = clone(panel);
-    tabCopy.itemKey = panelCopy.itemKey = key;
-    list.children = insertAfter(list.children, tab, tabCopy);
-    panels.children = insertAfter(panels.children, panel, panelCopy);
-    return tabCopy;
-}
-function insertAfter(list, anchor, node) {
-    const out = [...list];
-    out.splice(out.indexOf(anchor) + 1, 0, node);
-    return out;
-}
-
-var PanelEventTypes;
-(function (PanelEventTypes) {
-    PanelEventTypes["ELEMENT_SELECT"] = "elementselect";
-    PanelEventTypes["ELEMENT_DESELECT"] = "elementdeselect";
-    PanelEventTypes["PANEL_SELECTED"] = "panelselect";
-    PanelEventTypes["PANEL_OPEN"] = "panelopen";
-    PanelEventTypes["PANEL_CLOSE"] = "panelclose";
-    PanelEventTypes["BINDING_CHANGED"] = "bindingchanged";
-    PanelEventTypes["NODE_RENDERED"] = "noderendered";
-    /** Open the Style panel in preset-edit mode for the given preset ID. */
-    PanelEventTypes["PRESET_EDIT"] = "presetedit";
-    /** Fired after a preset is created, updated, or deleted so panels refresh their list. */
-    PanelEventTypes["PRESETS_CHANGED"] = "presetschanged";
-    /** Fired when a linked symbol instance's styles change — propagates to all instances. */
-    PanelEventTypes["SYMBOLS_CHANGED"] = "symbolschanged";
-    /** Fired on every structural or style mutation — used by BuilderHistoryService to snapshot. */
-    PanelEventTypes["LAYOUT_CHANGED"] = "layoutchanged";
-    /** Open the Interactions panel in preset-edit mode for the given preset ID. */
-    PanelEventTypes["INTERACTION_PRESET_EDIT"] = "interactionpresetedit";
-    /** Fired after an interaction preset is created, updated, or deleted so panels refresh. */
-    PanelEventTypes["INTERACTION_PRESETS_CHANGED"] = "interactionpresetschanged";
-    /** Open the Interactions panel and EXPAND a specific interaction for editing (data = interaction
-     *  id). Emitted when the overlay interaction badge is clicked so that badge → "edit THIS
-     *  interaction", without firing the element's (live) animation. */
-    PanelEventTypes["INTERACTION_EDIT"] = "interactionedit";
-    /** A node's `interactions` were added/removed/edited. Carries `{ node }`.
-     *  Repeater/Slider listen so their PREVIEW CLONES are re-cloned with the new interactions —
-     *  clones are attached by ELEMENT at render time, so without this a new interaction only starts
-     *  working after a save + reload. */
-    PanelEventTypes["INTERACTION_CHANGED"] = "interactionchanged";
-    /** CLICK-TO-INSERT (B2): a components-panel entry was clicked. Carries the same payload a drag
-     *  would (`string` component type, or a block / symbol object). The builder resolves WHERE from
-     *  the current selection — see `resolveInsertTarget`. */
-    PanelEventTypes["INSERT_COMPONENT"] = "insertcomponent";
-    /** Insert prebuilt node(s) as GLOBAL elements (data = ComponentNode[]) — the consent preset's click and
-     *  the site header's click or drop (CC1.1). The HOST handles it (it owns the globals, their undo step and
-     *  the one-header rule); the builder only routes a dropped global payload here (`globalInsert$`). */
-    PanelEventTypes["INSERT_GLOBAL"] = "insertglobal";
-    /** A panel makes `data.node` a GLOBAL element at `data.position` (default before) — the same move as the
-     *  toolbar's Make Global (the Style panel's Global switch, Bindings ▸ Phone menu ▸ "Make it the site header"). */
-    PanelEventTypes["MAKE_GLOBAL"] = "make-global";
-    /** A panel returns the global `data.node` to the page — the toolbar's Remove Global. */
-    PanelEventTypes["REMOVE_GLOBAL"] = "remove-global";
-    /** A panel moved the global `data.node` to `data.position` (before / after the page content). */
-    PanelEventTypes["GLOBAL_POSITION"] = "update-global-position";
-    /** A click on a compound component's PART (Field label/control/help/…) — the style panel
-     *  activates that part (data = { part }). Doron 2026-10-10: "both shall be selectable". */
-    PanelEventTypes["PART_SELECT"] = "partselect";
-    /** A panel wants to select a NODE it already has a reference to (e.g. the Form's nested field
-     *  list). Carries `{ node }`. `OverlayService.setSelect()` alone only updates the overlay's own
-     *  visual state — `selectedItem`/`selectedPath` (breadcrumb) and every other panel's idea of
-     *  "what's selected" stay stale unless the SAME `_emitElementSelect` a real canvas click goes
-     *  through also runs. This event is that path for code outside `BuilderComponent` itself,
-     *  mirroring what `onTreeNodeSelect`/`onCrumbSelect` already do internally. */
-    PanelEventTypes["SELECT_NODE"] = "selectnode";
-    /** A panel rewrote a node's SUBTREE in place — its children (a Card's Parts), its layout styles (Card ▸
-     *  Layout), a part's element style or scheme. Carries `{ node }`. The builder re-renders the subtree,
-     *  re-registers every node's rules and design classes, refreshes a Repeater holding it, and records ONE
-     *  undo step (LAYOUT_CHANGED). */
-    PanelEventTypes["NODE_STRUCTURE_CHANGED"] = "nodestructurechanged";
-    /** A Repeater's rows changed on the canvas (fetched, re-fetched, its source cleared). Carries `{ nodeId,
-     *  count }`. Not a page edit — never an undo step: the layer tree redraws its "N more rows" line. */
-    PanelEventTypes["REPEATER_ROWS_CHANGED"] = "repeaterrowschanged";
-})(PanelEventTypes || (PanelEventTypes = {}));
-class PanelEventService {
-    constructor() {
-        this.panelEventSubject = new Subject();
-    }
-    subscribe(next) {
-        return this.panelEventSubject.asObservable().subscribe(next);
-    }
-    emit(type, data) {
-        this.panelEventSubject.next({ type, data });
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: PanelEventService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: PanelEventService }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: PanelEventService, decorators: [{
-            type: Injectable
-        }] });
-
-/**
- * Deep-clones a ComponentNode tree and overrides trait defaults
- * according to each node's bindings resolved against `item`.
- *
- * Each clone gets a new `id` (for Angular tracking / overlay registration)
- * but shares the original node's CSS class by setting `styleId = originalId`.
- * This means all repeated preview rows point to the same CSS rule block as the
- * template node — the style engine only needs one rule per logical slot.
- */
-function cloneNodesForItem(nodes, item) {
-    return nodes.map(node => {
-        // Capture the CSS-owning id before clone
-        const cssId = node.styleId ?? node.id;
-        const clone = JSON.parse(JSON.stringify(node));
-        clone.id = Math.random().toString(36).substr(2, 9);
-        // Point this clone and all its descendants at the original CSS rule.
-        clone.styleId = cssId;
-        // Mark as a preview clone: display-only, not selectable/editable on the canvas.
-        // (Distinct from styleId, which duplication/paste also uses.) The render directive
-        // skips overlay registration for nodes carrying this flag.
-        clone.__previewClone = true;
-        if (clone.bindings?.length && item) {
-            for (const binding of clone.bindings) {
-                // Path lookup AND pipes (UI "Filters"). Resolving the path alone left a `date` or
-                // `uppercase` filter unapplied on every preview row, so the canvas showed the raw
-                // value while the SSR engine showed the formatted one — see binding-filters-plan.md.
-                const value = resolveBoundValue(item, binding);
-                if (value !== undefined) {
-                    for (const trait of clone.traits || []) {
-                        if (trait.name === binding.prop) {
-                            trait.default = value;
-                        }
-                    }
-                }
-            }
-        }
-        if (clone.children?.length) {
-            clone.children = cloneNodesForItem(clone.children, item);
-        }
-        return clone;
-    });
-}
-
 /**
  * Canvas data preview used to come from host-provided content services (IOX_CONTENT_SERVICE /
  * IOX_SHOP_SERVICE), whose `getContent(contentType, orgId)` hit the ADMIN resources endpoint and
@@ -346,6 +122,14 @@ const BUILDER_CHROME_EN = Object.freeze({
     'builder.chrome.deletePairTitle': 'Delete tab and its panel?',
     'builder.chrome.deletePairBody': '“{tab}” and the panel it shows go together: deleting one deletes both. Undo brings them back.',
     'builder.chrome.deletePair': 'Delete tab and its panel',
+    'builder.chrome.kindSegmented': 'Segmented',
+    'builder.chrome.addOption': 'Add option',
+    'builder.chrome.refuseLockedSegmentedPartMove': 'This part belongs to its Segmented control — an option stays in it, and its badge in its option.',
+    'builder.chrome.refuseSegmentedAccepts': 'A Segmented control holds only its options. Put it beside the control instead.',
+    'builder.chrome.refuseSegmentedMinOptions': 'A Segmented control keeps at least two options. Delete the whole control instead.',
+    'builder.chrome.refuseSegmentedMaxOptions': 'A Segmented control holds four options at most — past four, use Tabs or a dropdown.',
+    'builder.chrome.auditShownBeforeControl': 'Shows “when an item is on” but comes before {control} in reading order — a screen reader reads it before the choice that changes it. Move it after the control.',
+    'builder.chrome.auditUnnamedGroup': 'A Segmented control with no accessible name — a screen reader says “radio group” and nothing more. Name it in Bindings ▸ Accessibility.',
     'builder.chrome.cancel': 'Cancel',
     'builder.chrome.fromContent': 'From {source} · {count} rows',
     'builder.chrome.emptySource': 'No rows in “{alias}”.',
@@ -380,194 +164,26 @@ const CANVAS_EMPTY_IMAGE_LABEL_EN = BUILDER_CHROME_EN[CANVAS_EMPTY_IMAGE_LABEL_K
  */
 const EDITOR_CHROME_ATTRIBUTE = 'data-iox-chrome';
 
-/** The content type a data source reads (`faqs`), or '' for a source that reads none (external, static). */
-function sourceContentType(ds) {
-    return ds?.request?.cms?.contentType || ds?.request?.shop?.contentType || '';
-}
+/** The node type that scopes a form. Kept here so the rule has one name, not a scattered literal. */
+const FORM_TYPE = 'Form';
 /**
- * What the builder's chrome calls the list a source reads — the CONTENT TYPE's label ("From FAQ", board 3), as the
- * host knows it (`IOX_CONTENT_TYPE_LABELS`), else the source's alias. ONE answer for the layer tree's
- * "From FAQ · 3 rows", the Repeater's empty-source hint and the Items section's source options.
+ * The form the current selection belongs to — the NEAREST Form ancestor, or the selection itself
+ * when a Form is selected.
+ *
+ * This is the selection-side expression of decision D1: a field belongs to its nearest ancestor
+ * form. Searching the path from the deepest node outward is what makes "nearest" true, and it is
+ * why a nested form (were one ever allowed) could not capture an outer form's toolbar.
+ *
+ * @param path Ancestor chain from the root down to the selected node, as `selectedPath` holds it.
  */
-function sourceTypeLabel(alias, ds, resolve) {
-    const type = sourceContentType(ds);
-    return (type && resolve(type)) || alias;
-}
-
-const freshId = () => Math.random().toString(36).substr(2, 9);
-/**
- * Assign fresh ids to a cloned ComponentNode subtree AND remap intra-subtree references to the
- * new ids. Used by every author-time clone path (duplicate, paste, block/external drop) so a copied
- * structure stays self-consistent.
- *
- * Absolute node-id references that break under duplication if left unmapped:
- *   - `stateTriggers[state]`   — the trigger-hover target (see style-engine.md → Targeted states)
- *   - interaction `action.target` / `reverseActions.target`
- * A reference pointing OUTSIDE the cloned subtree (id not in the map) is left untouched — the copy
- * intentionally still points at the external node.
- *
- * TRAIT values are NOT ids and are copied verbatim — with one exception. A trait that carries an
- * IDENTITY rather than a setting must be reissued, or the copy silently shares the original's
- * identity. `formId` is the first: two forms with the same id share one submissions stream, and the
- * server resolves a submission against whichever page it reaches first. See REGENERATED_TRAITS.
- *
- * `styleId` strategy:
- *   - `'clear'` (default) — drop styleId so the clone OWNS its own CSS rule (independent copy).
- *   - `'regenerate'`      — keep a styleId but give it a fresh value (legacy builder.component path).
- */
-/**
- * Trait names whose value is an IDENTITY, not a setting, and must therefore be reissued on every
- * clone. Add a name here the moment a trait starts identifying something rather than describing it.
- *
- * `formId` — a form's submissions stream. Duplicating a page, pasting a form or dropping a saved
- * block twice used to produce two forms claiming the same stream.
- */
-const REGENERATED_TRAITS = new Set(['formId']);
-/** Reissue identity-carrying traits on a node, preserving the original's prefix where it had one. */
-function reissueIdentityTraits(node) {
-    for (const trait of (node.traits ?? [])) {
-        if (!trait?.name || !REGENERATED_TRAITS.has(trait.name))
-            continue;
-        if (trait.default === undefined || trait.default === '')
-            continue;
-        // Keep the human-readable prefix a preset gave it (`contact-a1b2c3` → `contact-<new>`), so a
-        // duplicated contact form is still recognisably a contact form in the inbox.
-        const prefix = String(trait.default).split('-')[0];
-        trait.default = `${prefix}-${freshId()}`;
-    }
-}
-/**
- * A NEW node is born with its identity: an empty identity trait (a palette Form's `formId`) is issued,
- * one already set (a preset's `contact-…`) is kept. A Form inserted from the palette used to keep
- * `formId: ''` — its submissions posted to `forms//submit` and nothing was ever stored.
- */
-function issueIdentityTraits(root) {
-    for (const trait of (root.traits ?? [])) {
-        if (!trait?.name || !REGENERATED_TRAITS.has(trait.name))
-            continue;
-        if (trait.default === undefined || trait.default === '')
-            trait.default = `${IDENTITY_PREFIX[trait.name] ?? trait.name}-${freshId()}`;
-    }
-    for (const child of root.children ?? [])
-        if (child)
-            issueIdentityTraits(child);
-}
-/** The readable prefix a freshly issued identity carries (`form-a1b2c3`). */
-const IDENTITY_PREFIX = { formId: 'form' };
-function regenerateNodeIds(root, opts = {}) {
-    const idMap = new Map();
-    // A composite item's identity (CC2 `itemKey`) is reissued per copy, consistently inside it: a duplicated
-    // accordion item must not share its original's ARIA ids (composite plan §3).
-    const keyMap = new Map();
-    const assign = (node) => {
-        const oldId = node.id;
-        node.id = freshId();
-        reissueIdentityTraits(node);
-        if (node.itemKey) {
-            if (!keyMap.has(node.itemKey))
-                keyMap.set(node.itemKey, `k-${freshId()}`);
-            node.itemKey = keyMap.get(node.itemKey);
-        }
-        if (opts.styleId === 'regenerate') {
-            if (node.styleId)
-                node.styleId = freshId();
-        }
-        else {
-            node.styleId = undefined;
-        }
-        if (oldId)
-            idMap.set(oldId, node.id);
-        (node.children || []).forEach(assign);
-    };
-    assign(root);
-    remapNodeReferences(root, idMap);
-}
-/** Remap absolute node-id references inside a subtree to their new ids (per `idMap`). Ids not in
- *  the map (references to nodes outside the cloned subtree) are preserved. */
-function remapNodeReferences(node, idMap) {
-    const triggers = node.stateTriggers;
-    if (triggers) {
-        for (const state of Object.keys(triggers)) {
-            const mapped = idMap.get(triggers[state]);
-            if (mapped)
-                triggers[state] = mapped;
-        }
-    }
-    for (const interaction of node.interactions || []) {
-        const actions = [...(interaction.actions || []), ...(interaction.reverseActions || [])];
-        for (const action of actions) {
-            if (action?.target && action.target !== 'self') {
-                const mapped = idMap.get(action.target);
-                if (mapped)
-                    action.target = mapped;
-            }
-        }
-    }
-    (node.children || []).forEach(child => remapNodeReferences(child, idMap));
-}
-
-/**
- * The text on the drop indicator's chip — "into Card grid · position 2 of 3" (B2).
- *
- * The most common drag failure is landing a node one level off and not noticing; naming the PARENT
- * and the slot makes the target unambiguous before the pointer is released.
- *
- * @param containerName  The target container's label or type; blank / unknown → "the page".
- * @param index          Insert index within the container (0-based).
- * @param childCount     How many children it has now — the node being dropped makes `childCount + 1`.
- */
-function dropTargetLabel(containerName, index, childCount) {
-    const name = (containerName ?? '').trim() || 'the page';
-    const total = Math.max(0, childCount) + 1;
-    const position = Math.min(Math.max(index, 0), total - 1) + 1;
-    return `into ${name} · position ${position} of ${total}`;
-}
-
-/**
- * Per-frame exponential smoothing step — moves `current` a fraction of the way
- * toward `target`. Used to ease the drag ghost toward the pointer instead of
- * snapping to it 1:1 on every dragmove (see DragEngineService._ghostFollowStep).
- */
-function easeToward(current, target, smoothing) {
-    return current + (target - current) * smoothing;
-}
-
-/**
- * Decides which element a drag gesture should actually operate on.
- *
- * A drag must never silently descend into a nested child just because the pointer happened to
- * be over it while its ANCESTOR is the currently selected node, and the overlay's drag-handle
- * (which carries no node of its own — it lives outside the canvas DOM entirely) must always
- * redirect to whatever is currently selected. In both cases the redirect target is the
- * currently-selected element; otherwise the gesture proceeds on its natural origin unchanged.
- */
-function resolveDragTarget(el, selectedElement, isDragHandle) {
-    if (!selectedElement || el === selectedElement)
-        return el;
-    const isDescendantOfSelected = selectedElement.contains(el);
-    return (isDragHandle || isDescendantOfSelected) ? selectedElement : el;
-}
-
-/** The node type that scopes a form. Kept here so the rule has one name, not a scattered literal. */
-const FORM_TYPE = 'Form';
-/**
- * The form the current selection belongs to — the NEAREST Form ancestor, or the selection itself
- * when a Form is selected.
- *
- * This is the selection-side expression of decision D1: a field belongs to its nearest ancestor
- * form. Searching the path from the deepest node outward is what makes "nearest" true, and it is
- * why a nested form (were one ever allowed) could not capture an outer form's toolbar.
- *
- * @param path Ancestor chain from the root down to the selected node, as `selectedPath` holds it.
- */
-function nearestFormNode(path) {
-    if (!path?.length)
-        return null;
-    for (let i = path.length - 1; i >= 0; i--) {
-        if (path[i]?.type === FORM_TYPE)
-            return path[i];
-    }
-    return null;
+function nearestFormNode(path) {
+    if (!path?.length)
+        return null;
+    for (let i = path.length - 1; i >= 0; i--) {
+        if (path[i]?.type === FORM_TYPE)
+            return path[i];
+    }
+    return null;
 }
 
 /**
@@ -614,6 +230,14 @@ var InsertRefusal;
     /** A tab or a panel deleted ALONE: the pair goes together — the host offers "Delete tab and its panel". Never said
      *  as a refusal toast. */
     InsertRefusal["PairedPart"] = "pairedPart";
+    /** A Segmented control's option (or its badge) moved out of it (CC4b). */
+    InsertRefusal["LockedSegmentedPartMove"] = "lockedSegmentedPartMove";
+    /** Something other than an option dropped into a Segmented control (CC4b). */
+    InsertRefusal["SegmentedAccepts"] = "segmentedAccepts";
+    /** A Segmented control's last two options (Q40): it keeps at least two. */
+    InsertRefusal["SegmentedMinOptions"] = "segmentedMinOptions";
+    /** A fifth option (Q40): a Segmented control holds four at most. */
+    InsertRefusal["SegmentedMaxOptions"] = "segmentedMaxOptions";
 })(InsertRefusal || (InsertRefusal = {}));
 const FORM_STATE_BLOCK_TYPES = new Set(['FormSuccess', 'FormError']);
 /** The builder-chrome label that says each refusal on screen (English in `BUILDER_CHROME_EN`). */
@@ -635,6 +259,10 @@ const INSERT_REFUSAL_LABEL_KEYS = Object.freeze({
     [InsertRefusal.TabsAccepts]: 'builder.chrome.refuseTabsAccepts',
     [InsertRefusal.LastTab]: 'builder.chrome.refuseLastTab',
     [InsertRefusal.PairedPart]: 'builder.chrome.deletePairTitle',
+    [InsertRefusal.LockedSegmentedPartMove]: 'builder.chrome.refuseLockedSegmentedPartMove',
+    [InsertRefusal.SegmentedAccepts]: 'builder.chrome.refuseSegmentedAccepts',
+    [InsertRefusal.SegmentedMinOptions]: 'builder.chrome.refuseSegmentedMinOptions',
+    [InsertRefusal.SegmentedMaxOptions]: 'builder.chrome.refuseSegmentedMaxOptions',
 });
 /** The refusals that are not said as a toast: the host asks instead (a tab's pair). */
 const SILENT_REFUSALS = new Set([InsertRefusal.PairedPart]);
@@ -649,56 +277,894 @@ function lockedRefusal(node, edit) {
         return move ? InsertRefusal.LockedSliderPartMove : InsertRefusal.LockedSliderPause;
     if (isTabsPart(node))
         return move ? InsertRefusal.LockedTabsPartMove : InsertRefusal.LockedTabsPart;
+    if (isSegmentedPart(node))
+        return InsertRefusal.LockedSegmentedPartMove;
     return move ? InsertRefusal.LockedPartMove : InsertRefusal.LockedPart;
 }
-/** The refusal in the host's language (the library's English when no host resolver is provided). */
-function insertRefusalLabel(reason, labels = defaultBuilderLabels) {
-    const key = INSERT_REFUSAL_LABEL_KEYS[reason];
-    return labels(key, BUILDER_CHROME_EN[key]);
+/** The refusal in the host's language (the library's English when no host resolver is provided). */
+function insertRefusalLabel(reason, labels = defaultBuilderLabels) {
+    const key = INSERT_REFUSAL_LABEL_KEYS[reason];
+    return labels(key, BUILDER_CHROME_EN[key]);
+}
+function containsType(node, type) {
+    if (node.type === type)
+        return true;
+    return (node.children ?? []).some(child => containsType(child, type));
+}
+/**
+ * Why `node` may not be inserted under `ancestors` (outermost first, the new parent last; empty = the page),
+ * or null when it may. `node` is the whole subtree being placed — a Container holding a Form is refused
+ * inside a Form just as a bare Form is, and a link that holds a form is refused wherever it goes. Reordering a node inside its CURRENT parent is not an insert and
+ * never asks.
+ */
+function insertRefusal(node, ancestors) {
+    if (!node)
+        return null;
+    if (node.type && FORM_STATE_BLOCK_TYPES.has(node.type))
+        return InsertRefusal.StateBlockAlone;
+    if (ancestors.some(a => a?.type === FORM_TYPE) && containsType(node, FORM_TYPE))
+        return InsertRefusal.NestedForm;
+    if (formContentInHost(node, ancestors.some(isInteractiveHost)))
+        return InsertRefusal.FormInInteractive;
+    const parent = ancestors[ancestors.length - 1];
+    const structural = structureRefusal(node, StructureEdit.Move, ancestors);
+    if (structural === StructureRefusal.NotAccepted)
+        return isSegmentedPart(parent) ? InsertRefusal.SegmentedAccepts : InsertRefusal.TabsAccepts;
+    if (structural)
+        return lockedRefusal(node, StructureEdit.Move);
+    // Q40: a fifth option (a paste, a duplicate, a drop from another control) is refused.
+    if (node.role === SegmentedRole.Option && parent?.role === SegmentedRole.Segmented
+        && (parent.children ?? []).filter(c => c?.role === SegmentedRole.Option).length >= SEGMENTED_MAX_OPTIONS)
+        return InsertRefusal.SegmentedMaxOptions;
+    return null;
+}
+/** Why `node` may not be REMOVED from where it is (deleted, cut, made global), or null when it may: a
+ *  composite's locked part stays — its Parts switch or deleting the whole composite are the ways out — an
+ *  accordion keeps its last item, Tabs their last tab, and a tab or a panel never leaves without its pair (the host
+ *  offers to delete both). `siblings` = the list `node` sits in (where the caller has it). */
+function removalRefusal(node, siblings) {
+    if (structureRefusal(node, StructureEdit.Delete))
+        return lockedRefusal(node, StructureEdit.Delete);
+    if (node?.role === AccordionRole.Item && siblings && siblings.filter(s => s?.role === AccordionRole.Item).length <= 1)
+        return InsertRefusal.LastItem;
+    // A Segmented control's option goes alone (it has no panel) — and the last two stay (Q40).
+    if (node?.role === SegmentedRole.Option) {
+        return siblings && siblings.filter(s => s?.role === SegmentedRole.Option).length <= SEGMENTED_MIN_OPTIONS ? InsertRefusal.SegmentedMinOptions : null;
+    }
+    if (isExclusiveItemPart(node)) {
+        const role = node.role === TabsRole.Trigger ? TabsRole.Trigger : TabsRole.Panel;
+        if (siblings && siblings.filter(s => s?.role === role).length <= 1)
+            return InsertRefusal.LastTab;
+        return InsertRefusal.PairedPart;
+    }
+    return null;
+}
+
+/**
+ * Nodes styled "WHEN AN ITEM IS ON" from outside it (composite T20; CC4b's price "when Yearly is on") — what the builder
+ * says about them: hidden at rest in the layer tree (the eye-slash, board 10), the reading-order audit finding (Q34) and
+ * the Style panel's "never shown" warning (Q38). Pure: every caller passes the trees.
+ */
+const HIDDEN = 'none';
+const DISPLAY = 'display';
+const tree = (n) => n;
+const cssId = (n) => nodeCssId(n) ?? n.id ?? '';
+const stateOf = (n, state) => n.stateStyles?.[state];
+/** The item a node's `trigger-on` state SHOWS it by — its state changes `display` — as that item's css id, else null. */
+function displayTriggerOf(node) {
+    const trigger = node.stateTriggers?.[ITEM_OPEN_STATE];
+    const display = stateOf(node, ITEM_OPEN_STATE)?.[DISPLAY];
+    return trigger && display !== undefined && display !== '' ? trigger : null;
+}
+/** True when the node is hidden at its base (its own `display: none`). */
+function hiddenAtBase(node) {
+    return String(readStyle(tree(node), DISPLAY) ?? '') === HIDDEN;
+}
+/** The css ids of every Manual composite item ON at rest — a Segmented control's default option, a Tabs' first tab, an
+ *  accordion's items open by default. From-content rows are not nodes and are left out. */
+function itemsOnAtRest(roots) {
+    const on = new Set();
+    const visit = (n) => {
+        if (isSegmentedRoot(n)) {
+            const key = segmentedDefaultOn(tree(n));
+            const option = segmentedOptions(tree(n)).find((o, i) => (o.itemKey || `item-${i}`) === key);
+            if (option)
+                on.add(cssId(option));
+        }
+        else if (isTabsRoot(n) && !isTabsFromContent(tree(n))) {
+            const [first] = tabsTriggers(tree(n));
+            if (first)
+                on.add(cssId(first));
+        }
+        else if (isAccordionRoot(n) && !isAccordionFromContent(tree(n))) {
+            const items = accordionItems(tree(n));
+            const open = initialAccordionOpen(items.map((it, i) => it.itemKey || `item-${i}`), accordionBehaviour(tree(n)).defaultOn);
+            items.forEach((it, i) => { if (open.has(it.itemKey || `item-${i}`))
+                on.add(cssId(it)); });
+        }
+        (n.children ?? []).forEach(visit);
+    };
+    roots.forEach(visit);
+    return on;
+}
+/** Hidden at rest because it shows only "when an item is on" and that item is not on at rest (board 10's eye-slash on
+ *  Price · Yearly; Price · Monthly is on screen at rest, Monthly being the default). */
+function hiddenUntilItemOn(node, onAtRest) {
+    const trigger = displayTriggerOf(node);
+    if (!trigger || !hiddenAtBase(node))
+        return false;
+    return String(stateOf(node, ITEM_OPEN_STATE)?.[DISPLAY]) !== HIDDEN && !onAtRest.has(trigger);
+}
+/**
+ * Q38: a node whose base is `display: none` and that NOTHING shows — no state, no breakpoint layer, no interaction that
+ * targets it. Deleting the "when Yearly is on" state of a price makes the price disappear for good; the Style panel
+ * says so. `targeted` = the ids interactions target anywhere on the page.
+ */
+function neverShown(node, targeted = new Set()) {
+    if (!hiddenAtBase(node))
+        return false;
+    if (node.id && targeted.has(node.id))
+        return false;
+    const shows = (map) => !!map && map[DISPLAY] !== undefined && map[DISPLAY] !== '' && map[DISPLAY] !== HIDDEN;
+    for (const state of Object.values((node.stateStyles ?? {})))
+        if (shows(state))
+            return false;
+    for (const layer of Object.values(node.responsive ?? {})) {
+        if (shows(layer?.styleProps))
+            return false;
+        for (const state of Object.values((layer?.stateStyles ?? {})))
+            if (shows(state))
+                return false;
+    }
+    return true;
+}
+/** Every node id an interaction on the page targets (its actions' and reverse actions' `target`). */
+function interactionTargets(roots) {
+    const out = new Set();
+    const visit = (n) => {
+        for (const ix of (n.interactions ?? [])) {
+            for (const a of [...(ix.actions ?? []), ...(ix.reverseActions ?? [])])
+                if (a.target)
+                    out.add(a.target);
+        }
+        (n.children ?? []).forEach(visit);
+    };
+    roots.forEach(visit);
+    return out;
+}
+/**
+ * Q34 (no live region): a screen reader hears the new price because the control comes BEFORE it in reading order — so
+ * a node shown "when X is on" that sits before X (outside X) is read before the choice that changes it. One finding per
+ * such node. Reading order = document order across `roots` (the page's globals before / after it as given).
+ */
+function shownBeforeControl(roots) {
+    const order = new Map();
+    const byCss = new Map();
+    const nodes = [];
+    const visit = (n) => {
+        order.set(cssId(n), nodes.length);
+        if (!byCss.has(cssId(n)))
+            byCss.set(cssId(n), n);
+        nodes.push(n);
+        (n.children ?? []).forEach(visit);
+    };
+    roots.forEach(visit);
+    const out = [];
+    for (const node of nodes) {
+        const trigger = displayTriggerOf(node);
+        const control = trigger ? byCss.get(trigger) : undefined;
+        if (!control || contains(control, node) || contains(node, control))
+            continue;
+        if ((order.get(cssId(node)) ?? 0) < (order.get(trigger) ?? 0))
+            out.push({ node, control });
+    }
+    return out;
+}
+function contains(outer, inner) {
+    return (outer.children ?? []).some(c => c === inner || contains(c, inner));
+}
+
+/**
+ * STRUCTURE OPS (A4) — the one-click layout changes people actually make at a narrow width, as pure
+ * "what to write" functions. Each returns a flat style map the caller stores in the node's
+ * `responsive[bp]` layer (or in the base styles at Base) through the shared `setOverride`.
+ *
+ * All of it is ordinary CSS the SSR engine already renders — there is no second tree and no
+ * per-width HTML. See responsive-breakpoints-plan.md (D5).
+ */
+/** CSS lengths that are a FIXED pixel size — the ones that stop a layout fitting a phone. */
+const PX_LENGTH = /^-?\d+(\.\d+)?px$/i;
+/**
+ * Hide / show at a width. Hiding is `display: none` INSIDE that breakpoint's rules — the node stays
+ * in the DOM and in the SSR output (one HTML document serves every width), so hidden content still
+ * ships bytes and is still indexed. Showing again clears the override rather than guessing a value.
+ *
+ * @returns the props to write, or `null` meaning "clear the display override at this breakpoint".
+ */
+function visibilityProps(hidden) {
+    return hidden ? { display: 'none' } : null;
+}
+/** True when this node is hidden by the resolved styles at some width. */
+function isHiddenAt(resolvedStyleProps) {
+    return String(resolvedStyleProps?.['display'] ?? '') === 'none';
+}
+/**
+ * Stack a container's children in one column — the most common mobile edit, and four separate
+ * controls today (display, direction, wrap, columns). A grid becomes a single-column grid; anything
+ * else becomes a column flex box.
+ */
+function stackChildrenProps(resolvedStyleProps) {
+    const display = String(resolvedStyleProps?.['display'] ?? '');
+    if (display === 'grid' || display === 'inline-grid') {
+        return { gridTemplateColumns: 'repeat(1, minmax(0, 1fr))' };
+    }
+    return { display: 'flex', flexDirection: 'column', flexWrap: 'nowrap' };
+}
+/**
+ * Collapse a grid to `count` columns (a flex row is stacked instead — it has no column track).
+ * `count` is clamped to at least 1.
+ */
+function collapseColumnsProps(resolvedStyleProps, count) {
+    const columns = Math.max(1, Math.floor(count));
+    const display = String(resolvedStyleProps?.['display'] ?? '');
+    if (display === 'grid' || display === 'inline-grid') {
+        return { gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))` };
+    }
+    return columns === 1 ? stackChildrenProps(resolvedStyleProps) : { flexWrap: 'wrap' };
+}
+/** How many equal columns a `repeat(N, …)` track list describes, or null when it isn't one. */
+function columnCountOf(resolvedStyleProps) {
+    const match = /^repeat\(\s*(\d+)\s*,/.exec(String(resolvedStyleProps?.['gridTemplateColumns'] ?? ''));
+    return match ? Number(match[1]) : null;
+}
+/**
+ * Make fixed pixel sizes fluid: `width: 520px` → `width: 100%` with the original kept as
+ * `max-width`, so the element still never exceeds its designed size on a wide screen. `minWidth` in
+ * px is dropped to 0 — it is what actually forces horizontal scrolling on a phone.
+ *
+ * @returns the props to write; EMPTY when there is nothing fixed to fluidise.
+ */
+function fluidiseProps(resolvedStyleProps) {
+    const out = {};
+    const width = String(resolvedStyleProps?.['width'] ?? '');
+    const minWidth = String(resolvedStyleProps?.['minWidth'] ?? '');
+    if (PX_LENGTH.test(width)) {
+        out['width'] = '100%';
+        const maxWidth = String(resolvedStyleProps?.['maxWidth'] ?? '');
+        if (!maxWidth || maxWidth === 'none')
+            out['maxWidth'] = width;
+    }
+    if (PX_LENGTH.test(minWidth) && parseFloat(minWidth) > 0)
+        out['minWidth'] = '0px';
+    return out;
+}
+/** True when `fluidiseProps` would change anything — drives the button's disabled state. */
+function canFluidise(resolvedStyleProps) {
+    return Object.keys(fluidiseProps(resolvedStyleProps)).length > 0;
+}
+/**
+ * Reorder children AT ONE WIDTH using CSS `order`, leaving the tree — and so the DOM and
+ * screen-reader order — untouched. Returns one value per child BY CHILD INDEX: the `order` it must
+ * take, or `null` for "no override needed".
+ *
+ * Either every child gets an explicit `order` or none does: CSS defaults `order` to 0, so a partial
+ * set would mix overridden children with unordered ones and read as an arbitrary interleave.
+ *
+ * @param count  How many children there are.
+ * @param from   Index of the child being moved.
+ * @param to     Index it should occupy.
+ */
+function reorderProps(count, from, to) {
+    const none = Array.from({ length: Math.max(0, count) }, () => null);
+    if (from < 0 || from >= count || to < 0 || to >= count || from === to)
+        return none;
+    // Visual order after the move, as a list of CHILD indices.
+    const sequence = Array.from({ length: count }, (_, i) => i);
+    sequence.splice(to, 0, ...sequence.splice(from, 1));
+    const orderByChild = none.slice();
+    sequence.forEach((childIndex, position) => { orderByChild[childIndex] = position; });
+    return orderByChild;
+}
+
+/**
+ * RESPONSIVE AUDIT (A5) — find what is broken at a width, from the node tree plus ONE measurement
+ * pass. A builder that lets you author five widths must also tell you which of them are broken.
+ *
+ * Pure: the caller measures (one `getBoundingClientRect` per node, off the animation path) and
+ * passes the numbers in. Every finding that can be repaired carries the exact props to write, so a
+ * fix is one `setOverride` per key — one undo step, and it shows as an ordinary override.
+ */
+var AuditCode;
+(function (AuditCode) {
+    AuditCode["Overflow"] = "overflow";
+    AuditCode["FixedWidth"] = "fixed-width";
+    AuditCode["TapTarget"] = "tap-target";
+    AuditCode["TinyText"] = "tiny-text";
+    AuditCode["UnboundedImage"] = "unbounded-image";
+    /** A slider showing more slides than the width can carry — each one unreadably narrow. */
+    AuditCode["SlidesOverflow"] = "slides-overflow";
+    /** An out-of-flow node whose box lands outside the frame, so it is unreachable at this width. */
+    AuditCode["OffscreenAbsolute"] = "offscreen-absolute";
+    /** Form content inside a link or a button — a STRUCTURE finding, true at every width (form-nesting-audit.util). */
+    AuditCode["FormInLink"] = "form-in-link";
+    /** An icon-only button or link with no Accessible name — announced as an unnamed control (CC1 N6). */
+    AuditCode["UnnamedControl"] = "unnamed-control";
+    /** A composite whose items come from content, and its source returned no rows (CC2, board 9): the
+     *  canvas shows the placeholder, the live site renders nothing. */
+    AuditCode["EmptySource"] = "empty-source";
+    /** CC4b (Q34): a node shown "when X is on" placed BEFORE its control X in reading order — a STRUCTURE finding. */
+    AuditCode["ShownBeforeControl"] = "shown-before-control";
+    /** CC4b: a Segmented control's radio group with no accessible name — a STRUCTURE finding. */
+    AuditCode["UnnamedGroup"] = "unnamed-group";
+})(AuditCode || (AuditCode = {}));
+/** A fix that changes the tree, not a style or a trait — applied as one page-history step. */
+var StructureFix;
+(function (StructureFix) {
+    /** Move the form out of the link or button holding it, to right after it. */
+    StructureFix["MoveFormOut"] = "move-form-out";
+})(StructureFix || (StructureFix = {}));
+var AuditSeverity;
+(function (AuditSeverity) {
+    AuditSeverity["Error"] = "error";
+    AuditSeverity["Warning"] = "warning";
+    AuditSeverity["Info"] = "info";
+})(AuditSeverity || (AuditSeverity = {}));
+/** WCAG 2.5.8 minimum target size. */
+const MIN_TAP_PX = 44;
+/** Below this, iOS Safari zooms the page when an adjacent input is focused. */
+const MIN_TEXT_PX = 12;
+/** Types a visitor taps. */
+const TAPPABLE = new Set(['Button', 'ButtonBlock', 'Link', 'LinkedContainer']);
+/** Narrower than this, a slide shows too little of its content to be worth showing at all. */
+const MIN_SLIDE_PX = 200;
+/** Out-of-flow positioning that can put a node outside the frame. */
+const OUT_OF_FLOW = new Set(['absolute', 'fixed']);
+const nameOf = (node) => node.label || node.type;
+const pxOf = (value) => {
+    const match = /^(-?\d+(?:\.\d+)?)px$/i.exec(String(value ?? ''));
+    return match ? Number(match[1]) : null;
+};
+/**
+ * Audit nodes laid out at `viewportWidth`. Returns findings ordered by severity (errors first),
+ * then by the order the nodes were given — so the worst thing is at the top of the list.
+ */
+function auditNodes(nodes, viewportWidth) {
+    const findings = [];
+    for (const node of nodes) {
+        const name = nameOf(node);
+        const styles = node.styleProps ?? {};
+        if (String(styles['display'] ?? '') === 'none')
+            continue; // hidden here — nothing to report
+        // 1. Wider than the viewport: the page scrolls sideways.
+        if (node.width > viewportWidth + 0.5) {
+            findings.push({
+                nodeId: node.id, nodeName: name, code: AuditCode.Overflow, severity: AuditSeverity.Error,
+                message: `${name} is ${Math.round(node.width)}px wide in a ${viewportWidth}px viewport — the page scrolls sideways.`,
+                fix: canFluidise(styles) ? fluidiseProps(styles) : { maxWidth: '100%' },
+            });
+        }
+        else if (canFluidise(styles)) {
+            // 2. A fixed px size that still fits, but will not on a narrower phone.
+            const width = pxOf(styles['width']);
+            findings.push({
+                nodeId: node.id, nodeName: name, code: AuditCode.FixedWidth, severity: AuditSeverity.Warning,
+                message: width !== null
+                    ? `${name} has a fixed width of ${width}px — it cannot shrink on a narrower screen.`
+                    : `${name} has a fixed minimum width — it forces sideways scrolling below that size.`,
+                fix: fluidiseProps(styles),
+            });
+        }
+        // 3. Tap targets below the WCAG minimum.
+        if (TAPPABLE.has(node.type) && node.width > 0 && node.height > 0
+            && (node.width < MIN_TAP_PX || node.height < MIN_TAP_PX)) {
+            findings.push({
+                nodeId: node.id, nodeName: name, code: AuditCode.TapTarget, severity: AuditSeverity.Warning,
+                message: `${name} is ${Math.round(node.width)}×${Math.round(node.height)}px — below the ${MIN_TAP_PX}px minimum tap target.`,
+                fix: { minHeight: `${MIN_TAP_PX}px`, minWidth: `${MIN_TAP_PX}px` },
+            });
+        }
+        // 4. Text too small to read (and small enough to trigger iOS zoom).
+        const fontSize = pxOf(styles['fontSize']);
+        if (fontSize !== null && fontSize < MIN_TEXT_PX) {
+            findings.push({
+                nodeId: node.id, nodeName: name, code: AuditCode.TinyText, severity: AuditSeverity.Warning,
+                message: `${name} renders at ${fontSize}px — under the ${MIN_TEXT_PX}px readable minimum.`,
+                fix: { fontSize: `${MIN_TEXT_PX}px` },
+            });
+        }
+        // 5. An image with a fixed height and no ratio crops unpredictably as the width changes.
+        if (node.type === 'Image' && pxOf(styles['height']) !== null
+            && !String(styles['aspectRatio'] ?? '').trim().replace(/^auto$/, '')) {
+            findings.push({
+                nodeId: node.id, nodeName: name, code: AuditCode.UnboundedImage, severity: AuditSeverity.Info,
+                message: `${name} has a fixed height and no aspect ratio — it crops unpredictably as the width changes.`,
+                fix: { height: 'auto', aspectRatio: '16 / 9' },
+            });
+        }
+        // 6. A slider showing more slides than this width can carry. NOT a CSS problem: slide count
+        //    is a component trait, so the fix is a per-breakpoint TRAIT override (P3-G1), not a style.
+        if (node.type === 'SliderContainer' && node.width > 0) {
+            const perView = Number(node.inputs?.['slidesPerView']);
+            if (Number.isFinite(perView) && perView > 1) {
+                const slideWidth = node.width / perView;
+                if (slideWidth < MIN_SLIDE_PX) {
+                    const fits = Math.max(1, Math.floor(node.width / MIN_SLIDE_PX));
+                    findings.push({
+                        nodeId: node.id, nodeName: name, code: AuditCode.SlidesOverflow, severity: AuditSeverity.Warning,
+                        message: `${name} shows ${perView} slides across ${Math.round(node.width)}px — ${Math.round(slideWidth)}px each. Show ${fits} at this width.`,
+                        inputFix: { slidesPerView: fits },
+                    });
+                }
+            }
+        }
+        // 7. An icon-only control with no name (WCAG 4.1.2): a screen reader says "button" and nothing
+        //    else. No auto-fix — only the author knows what it does; the finding selects it.
+        if (node.unnamedControl) {
+            findings.push({
+                nodeId: node.id, nodeName: name, code: AuditCode.UnnamedControl, severity: AuditSeverity.Error,
+                message: `${name} shows only an icon and has no accessible name — screen readers announce it as an unnamed control. Name it in Bindings ▸ Accessibility.`,
+            });
+        }
+        // 7b. A composite from content whose source has no rows (CC2 R3): the visitor sees nothing there.
+        if (node.emptySource) {
+            findings.push({
+                nodeId: node.id, nodeName: name, code: AuditCode.EmptySource, severity: AuditSeverity.Warning,
+                message: `${name} in ${node.emptySource.section}: its source ${node.emptySource.alias} has no rows.`,
+            });
+        }
+        // 8. An out-of-flow node that has left the frame. Measured, not inferred: a negative offset
+        //    is legitimate design until it actually puts the content beyond the edge.
+        if (OUT_OF_FLOW.has(String(styles['position'] ?? '')) && node.left !== undefined && node.width > 0) {
+            const right = node.left + node.width;
+            const offLeft = right <= 0.5;
+            const offRight = node.left >= viewportWidth - 0.5;
+            if (offLeft || offRight) {
+                findings.push({
+                    nodeId: node.id, nodeName: name, code: AuditCode.OffscreenAbsolute, severity: AuditSeverity.Error,
+                    message: `${name} is positioned ${offLeft ? 'left of' : 'beyond'} the ${viewportWidth}px viewport — it cannot be seen or tapped at this width.`,
+                    // No blind auto-fix: the author's intent (a decorative overflow vs a mistake)
+                    // is not knowable from geometry. Selecting the node is the useful action.
+                });
+            }
+        }
+    }
+    const rank = { [AuditSeverity.Error]: 0, [AuditSeverity.Warning]: 1, [AuditSeverity.Info]: 2 };
+    return findings
+        .map((finding, index) => ({ finding, index }))
+        .sort((a, b) => rank[a.finding.severity] - rank[b.finding.severity] || a.index - b.index)
+        .map(entry => entry.finding);
+}
+/** Counts per severity — the per-breakpoint summary strip. */
+function summarise(findings) {
+    const out = { [AuditSeverity.Error]: 0, [AuditSeverity.Warning]: 0, [AuditSeverity.Info]: 0 };
+    for (const finding of findings)
+        out[finding.severity]++;
+    return out;
+}
+
+const SHOWN_BEFORE_KEY = 'builder.chrome.auditShownBeforeControl';
+const UNNAMED_GROUP_KEY = 'builder.chrome.auditUnnamedGroup';
+const CONTROL_PLACEHOLDER = '{control}';
+/**
+ * The composites' STRUCTURE findings (CC4b, board 10) — true at every width, so the audit lists them beside the form
+ * nesting ones:
+ * - Q34: a node shown "when X is on" that sits BEFORE its control X in reading order — a screen reader reads it before
+ *   the choice that changes it (there is no live region, on purpose);
+ * - a Segmented control's radio group with no accessible name.
+ * No auto-fix: selecting the finding selects the node.
+ */
+function compositeStructureFindings(page, globals, labels = defaultBuilderLabels) {
+    const say = (key) => labels(key, BUILDER_CHROME_EN[key]);
+    const findings = [];
+    for (const { node, control } of shownBeforeControl([...page, ...globals])) {
+        if (!node.id)
+            continue;
+        findings.push({
+            nodeId: node.id, nodeName: node.label || node.type, code: AuditCode.ShownBeforeControl, severity: AuditSeverity.Warning,
+            message: say(SHOWN_BEFORE_KEY).replace(CONTROL_PLACEHOLDER, exclusiveItemLabel(control) || control.label || control.type),
+        });
+    }
+    const visit = (n) => {
+        if (n.id && needsGroupName(n)) {
+            findings.push({ nodeId: n.id, nodeName: n.label || n.type, code: AuditCode.UnnamedGroup, severity: AuditSeverity.Error, message: say(UNNAMED_GROUP_KEY) });
+        }
+        (n.children ?? []).forEach(visit);
+    };
+    [...page, ...globals].forEach(visit);
+    return findings;
+}
+
+/**
+ * node-path — pure ancestor-chain helpers for the builder's node tree.
+ *
+ * The builder needs a node's ancestor chain in several places: the breadcrumb bar,
+ * "select parent", and the parent-scoped style traits (Child Layout). Each of those
+ * used to re-walk the tree with its own private recursion. `nodeAncestorPath` is the
+ * single walk they all derive from.
+ *
+ * Builder-only on purpose: the SSR engine never needs a breadcrumb, so this stays in
+ * `iox-builder` rather than `@vectoriox/iox-ui` (which is the home for logic BOTH
+ * renderers consume). Structural helpers the two renderers share live in
+ * `@vectoriox/iox-ui` `style-compiler/tree-relations.ts`.
+ */
+/**
+ * The chain of nodes from a root down to (and including) `target`, matched by
+ * REFERENCE identity. Returns `null` when `target` is not in the tree.
+ *
+ * Depth-first, pre-order; first match wins. Reference identity (not `id`) is the right
+ * matcher here because the builder mutates nodes in place and repeater/slider clones
+ * deliberately share a template's `styleId` — matching by id would return the template's
+ * path for a clone.
+ */
+function nodeAncestorPath(roots, target) {
+    if (!roots?.length || !target)
+        return null;
+    for (const node of roots) {
+        if (node === target)
+            return [node];
+        const childPath = nodeAncestorPath(node.children, target);
+        if (childPath)
+            return [node, ...childPath];
+    }
+    return null;
+}
+/**
+ * The immediate parent of `target`, or `null` when it is a root node or not in the tree.
+ * Derived from `nodeAncestorPath` so there is exactly one tree walk to keep correct.
+ */
+function findParentOf(roots, target) {
+    const path = nodeAncestorPath(roots, target);
+    return path && path.length >= 2 ? path[path.length - 2] : null;
+}
+/**
+ * The ancestor chain across BOTH builder trees — the page layout and the global
+ * elements overlay, which are separate roots. Returns the first tree that contains
+ * the node, or `null` when neither does.
+ */
+function nodeAncestorPathInEither(layout, globalElements, target) {
+    return nodeAncestorPath(layout, target) ?? nodeAncestorPath(globalElements, target);
+}
+
+/**
+ * A tab and its panel go TOGETHER on the canvas (CC4a — composite T18): deleting either deletes both ("Delete tab and
+ * its panel"), duplicating either duplicates both under one fresh key. The pairing is composite-core's (`itemKey`);
+ * this is the builder's tree surgery over it, shared by every path (toolbar, layer tree, the host's Cmd+D / Delete).
+ */
+/** The Tabs a tab or a panel belongs to — a MANUAL one (From content, the rows are not nodes) — or null (a Segmented
+ *  control's option has no pair: it is duplicated and deleted alone, CC4b). */
+function tabsRootForPart(layout, globals, node) {
+    if (!isExclusiveItemPart(node) || !isTabsPart(node))
+        return null;
+    const path = nodeAncestorPathInEither(layout, globals, node) ?? [];
+    const root = exclusiveRootOf(node, path.filter(n => n !== node));
+    return root && !isTabsFromContent(root) ? root : null;
+}
+/** The words the pair is named by in the confirm: its tab's. */
+function tabPairLabel(root, node) {
+    const tree = root;
+    const tab = node.role === TabsRole.Panel ? tabTriggerOf(tree, node) : node;
+    return tab ? tabLabel(tab) : '';
+}
+/** Delete a tab and its panel. True when the pair was removed. */
+function deleteTabPair(root, node) {
+    return removeTabPair(root, node);
+}
+/**
+ * Duplicate a tab and its panel: copies (`clone` gives fresh ids) placed right after the originals, both under ONE new
+ * key — so the copy's tab shows the copy's panel. Returns the new tab, or null when `node` is no tab or panel of `root`.
+ */
+function duplicateTabPair(root, node, clone) {
+    const tree = root;
+    const tab = (node.role === TabsRole.Panel ? tabTriggerOf(tree, node) : node);
+    const panel = tab ? tabPanelOf(tree, tab) : undefined;
+    const list = tabsListOf(tree);
+    const panels = tabsPanelsOf(tree);
+    if (!tab || !panel || !list?.children || !panels?.children)
+        return null;
+    const key = nextTabKey(tree);
+    const tabCopy = clone(tab);
+    const panelCopy = clone(panel);
+    tabCopy.itemKey = panelCopy.itemKey = key;
+    list.children = insertAfter(list.children, tab, tabCopy);
+    panels.children = insertAfter(panels.children, panel, panelCopy);
+    return tabCopy;
+}
+function insertAfter(list, anchor, node) {
+    const out = [...list];
+    out.splice(out.indexOf(anchor) + 1, 0, node);
+    return out;
+}
+
+var PanelEventTypes;
+(function (PanelEventTypes) {
+    PanelEventTypes["ELEMENT_SELECT"] = "elementselect";
+    PanelEventTypes["ELEMENT_DESELECT"] = "elementdeselect";
+    PanelEventTypes["PANEL_SELECTED"] = "panelselect";
+    PanelEventTypes["PANEL_OPEN"] = "panelopen";
+    PanelEventTypes["PANEL_CLOSE"] = "panelclose";
+    PanelEventTypes["BINDING_CHANGED"] = "bindingchanged";
+    PanelEventTypes["NODE_RENDERED"] = "noderendered";
+    /** Open the Style panel in preset-edit mode for the given preset ID. */
+    PanelEventTypes["PRESET_EDIT"] = "presetedit";
+    /** Fired after a preset is created, updated, or deleted so panels refresh their list. */
+    PanelEventTypes["PRESETS_CHANGED"] = "presetschanged";
+    /** Fired when a linked symbol instance's styles change — propagates to all instances. */
+    PanelEventTypes["SYMBOLS_CHANGED"] = "symbolschanged";
+    /** Fired on every structural or style mutation — used by BuilderHistoryService to snapshot. */
+    PanelEventTypes["LAYOUT_CHANGED"] = "layoutchanged";
+    /** Open the Interactions panel in preset-edit mode for the given preset ID. */
+    PanelEventTypes["INTERACTION_PRESET_EDIT"] = "interactionpresetedit";
+    /** Fired after an interaction preset is created, updated, or deleted so panels refresh. */
+    PanelEventTypes["INTERACTION_PRESETS_CHANGED"] = "interactionpresetschanged";
+    /** Open the Interactions panel and EXPAND a specific interaction for editing (data = interaction
+     *  id). Emitted when the overlay interaction badge is clicked so that badge → "edit THIS
+     *  interaction", without firing the element's (live) animation. */
+    PanelEventTypes["INTERACTION_EDIT"] = "interactionedit";
+    /** A node's `interactions` were added/removed/edited. Carries `{ node }`.
+     *  Repeater/Slider listen so their PREVIEW CLONES are re-cloned with the new interactions —
+     *  clones are attached by ELEMENT at render time, so without this a new interaction only starts
+     *  working after a save + reload. */
+    PanelEventTypes["INTERACTION_CHANGED"] = "interactionchanged";
+    /** CLICK-TO-INSERT (B2): a components-panel entry was clicked. Carries the same payload a drag
+     *  would (`string` component type, or a block / symbol object). The builder resolves WHERE from
+     *  the current selection — see `resolveInsertTarget`. */
+    PanelEventTypes["INSERT_COMPONENT"] = "insertcomponent";
+    /** Insert prebuilt node(s) as GLOBAL elements (data = ComponentNode[]) — the consent preset's click and
+     *  the site header's click or drop (CC1.1). The HOST handles it (it owns the globals, their undo step and
+     *  the one-header rule); the builder only routes a dropped global payload here (`globalInsert$`). */
+    PanelEventTypes["INSERT_GLOBAL"] = "insertglobal";
+    /** A panel makes `data.node` a GLOBAL element at `data.position` (default before) — the same move as the
+     *  toolbar's Make Global (the Style panel's Global switch, Bindings ▸ Phone menu ▸ "Make it the site header"). */
+    PanelEventTypes["MAKE_GLOBAL"] = "make-global";
+    /** A panel returns the global `data.node` to the page — the toolbar's Remove Global. */
+    PanelEventTypes["REMOVE_GLOBAL"] = "remove-global";
+    /** A panel moved the global `data.node` to `data.position` (before / after the page content). */
+    PanelEventTypes["GLOBAL_POSITION"] = "update-global-position";
+    /** A click on a compound component's PART (Field label/control/help/…) — the style panel
+     *  activates that part (data = { part }). Doron 2026-10-10: "both shall be selectable". */
+    PanelEventTypes["PART_SELECT"] = "partselect";
+    /** A panel wants to select a NODE it already has a reference to (e.g. the Form's nested field
+     *  list). Carries `{ node }`. `OverlayService.setSelect()` alone only updates the overlay's own
+     *  visual state — `selectedItem`/`selectedPath` (breadcrumb) and every other panel's idea of
+     *  "what's selected" stay stale unless the SAME `_emitElementSelect` a real canvas click goes
+     *  through also runs. This event is that path for code outside `BuilderComponent` itself,
+     *  mirroring what `onTreeNodeSelect`/`onCrumbSelect` already do internally. */
+    PanelEventTypes["SELECT_NODE"] = "selectnode";
+    /** A panel rewrote a node's SUBTREE in place — its children (a Card's Parts), its layout styles (Card ▸
+     *  Layout), a part's element style or scheme. Carries `{ node }`. The builder re-renders the subtree,
+     *  re-registers every node's rules and design classes, refreshes a Repeater holding it, and records ONE
+     *  undo step (LAYOUT_CHANGED). */
+    PanelEventTypes["NODE_STRUCTURE_CHANGED"] = "nodestructurechanged";
+    /** A Repeater's rows changed on the canvas (fetched, re-fetched, its source cleared). Carries `{ nodeId,
+     *  count }`. Not a page edit — never an undo step: the layer tree redraws its "N more rows" line. */
+    PanelEventTypes["REPEATER_ROWS_CHANGED"] = "repeaterrowschanged";
+})(PanelEventTypes || (PanelEventTypes = {}));
+class PanelEventService {
+    constructor() {
+        this.panelEventSubject = new Subject();
+    }
+    subscribe(next) {
+        return this.panelEventSubject.asObservable().subscribe(next);
+    }
+    emit(type, data) {
+        this.panelEventSubject.next({ type, data });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: PanelEventService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: PanelEventService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: PanelEventService, decorators: [{
+            type: Injectable
+        }] });
+
+/**
+ * Deep-clones a ComponentNode tree and overrides trait defaults
+ * according to each node's bindings resolved against `item`.
+ *
+ * Each clone gets a new `id` (for Angular tracking / overlay registration)
+ * but shares the original node's CSS class by setting `styleId = originalId`.
+ * This means all repeated preview rows point to the same CSS rule block as the
+ * template node — the style engine only needs one rule per logical slot.
+ */
+function cloneNodesForItem(nodes, item) {
+    return nodes.map(node => {
+        // Capture the CSS-owning id before clone
+        const cssId = node.styleId ?? node.id;
+        const clone = JSON.parse(JSON.stringify(node));
+        clone.id = Math.random().toString(36).substr(2, 9);
+        // Point this clone and all its descendants at the original CSS rule.
+        clone.styleId = cssId;
+        // Mark as a preview clone: display-only, not selectable/editable on the canvas.
+        // (Distinct from styleId, which duplication/paste also uses.) The render directive
+        // skips overlay registration for nodes carrying this flag.
+        clone.__previewClone = true;
+        if (clone.bindings?.length && item) {
+            for (const binding of clone.bindings) {
+                // Path lookup AND pipes (UI "Filters"). Resolving the path alone left a `date` or
+                // `uppercase` filter unapplied on every preview row, so the canvas showed the raw
+                // value while the SSR engine showed the formatted one — see binding-filters-plan.md.
+                const value = resolveBoundValue(item, binding);
+                if (value !== undefined) {
+                    for (const trait of clone.traits || []) {
+                        if (trait.name === binding.prop) {
+                            trait.default = value;
+                        }
+                    }
+                }
+            }
+        }
+        if (clone.children?.length) {
+            clone.children = cloneNodesForItem(clone.children, item);
+        }
+        return clone;
+    });
+}
+
+/** The content type a data source reads (`faqs`), or '' for a source that reads none (external, static). */
+function sourceContentType(ds) {
+    return ds?.request?.cms?.contentType || ds?.request?.shop?.contentType || '';
+}
+/**
+ * What the builder's chrome calls the list a source reads — the CONTENT TYPE's label ("From FAQ", board 3), as the
+ * host knows it (`IOX_CONTENT_TYPE_LABELS`), else the source's alias. ONE answer for the layer tree's
+ * "From FAQ · 3 rows", the Repeater's empty-source hint and the Items section's source options.
+ */
+function sourceTypeLabel(alias, ds, resolve) {
+    const type = sourceContentType(ds);
+    return (type && resolve(type)) || alias;
+}
+
+const freshId = () => Math.random().toString(36).substr(2, 9);
+/**
+ * Assign fresh ids to a cloned ComponentNode subtree AND remap intra-subtree references to the
+ * new ids. Used by every author-time clone path (duplicate, paste, block/external drop) so a copied
+ * structure stays self-consistent.
+ *
+ * Absolute node-id references that break under duplication if left unmapped:
+ *   - `stateTriggers[state]`   — the trigger-hover target (see style-engine.md → Targeted states)
+ *   - interaction `action.target` / `reverseActions.target`
+ * A reference pointing OUTSIDE the cloned subtree (id not in the map) is left untouched — the copy
+ * intentionally still points at the external node.
+ *
+ * TRAIT values are NOT ids and are copied verbatim — with one exception. A trait that carries an
+ * IDENTITY rather than a setting must be reissued, or the copy silently shares the original's
+ * identity. `formId` is the first: two forms with the same id share one submissions stream, and the
+ * server resolves a submission against whichever page it reaches first. See REGENERATED_TRAITS.
+ *
+ * `styleId` strategy:
+ *   - `'clear'` (default) — drop styleId so the clone OWNS its own CSS rule (independent copy).
+ *   - `'regenerate'`      — keep a styleId but give it a fresh value (legacy builder.component path).
+ */
+/**
+ * Trait names whose value is an IDENTITY, not a setting, and must therefore be reissued on every
+ * clone. Add a name here the moment a trait starts identifying something rather than describing it.
+ *
+ * `formId` — a form's submissions stream. Duplicating a page, pasting a form or dropping a saved
+ * block twice used to produce two forms claiming the same stream.
+ */
+const REGENERATED_TRAITS = new Set(['formId']);
+/** Reissue identity-carrying traits on a node, preserving the original's prefix where it had one. */
+function reissueIdentityTraits(node) {
+    for (const trait of (node.traits ?? [])) {
+        if (!trait?.name || !REGENERATED_TRAITS.has(trait.name))
+            continue;
+        if (trait.default === undefined || trait.default === '')
+            continue;
+        // Keep the human-readable prefix a preset gave it (`contact-a1b2c3` → `contact-<new>`), so a
+        // duplicated contact form is still recognisably a contact form in the inbox.
+        const prefix = String(trait.default).split('-')[0];
+        trait.default = `${prefix}-${freshId()}`;
+    }
+}
+/**
+ * A NEW node is born with its identity: an empty identity trait (a palette Form's `formId`) is issued,
+ * one already set (a preset's `contact-…`) is kept. A Form inserted from the palette used to keep
+ * `formId: ''` — its submissions posted to `forms//submit` and nothing was ever stored.
+ */
+function issueIdentityTraits(root) {
+    for (const trait of (root.traits ?? [])) {
+        if (!trait?.name || !REGENERATED_TRAITS.has(trait.name))
+            continue;
+        if (trait.default === undefined || trait.default === '')
+            trait.default = `${IDENTITY_PREFIX[trait.name] ?? trait.name}-${freshId()}`;
+    }
+    for (const child of root.children ?? [])
+        if (child)
+            issueIdentityTraits(child);
+}
+/** The readable prefix a freshly issued identity carries (`form-a1b2c3`). */
+const IDENTITY_PREFIX = { formId: 'form' };
+function regenerateNodeIds(root, opts = {}) {
+    const idMap = new Map();
+    // A composite item's identity (CC2 `itemKey`) is reissued per copy, consistently inside it: a duplicated
+    // accordion item must not share its original's ARIA ids (composite plan §3).
+    const keyMap = new Map();
+    const assign = (node) => {
+        const oldId = node.id;
+        node.id = freshId();
+        reissueIdentityTraits(node);
+        if (node.itemKey) {
+            if (!keyMap.has(node.itemKey))
+                keyMap.set(node.itemKey, `k-${freshId()}`);
+            node.itemKey = keyMap.get(node.itemKey);
+        }
+        if (opts.styleId === 'regenerate') {
+            if (node.styleId)
+                node.styleId = freshId();
+        }
+        else {
+            node.styleId = undefined;
+        }
+        if (oldId)
+            idMap.set(oldId, node.id);
+        (node.children || []).forEach(assign);
+    };
+    assign(root);
+    remapNodeReferences(root, idMap);
+}
+/** Remap absolute node-id references inside a subtree to their new ids (per `idMap`). Ids not in
+ *  the map (references to nodes outside the cloned subtree) are preserved. */
+function remapNodeReferences(node, idMap) {
+    const triggers = node.stateTriggers;
+    if (triggers) {
+        for (const state of Object.keys(triggers)) {
+            const mapped = idMap.get(triggers[state]);
+            if (mapped)
+                triggers[state] = mapped;
+        }
+    }
+    for (const interaction of node.interactions || []) {
+        const actions = [...(interaction.actions || []), ...(interaction.reverseActions || [])];
+        for (const action of actions) {
+            if (action?.target && action.target !== 'self') {
+                const mapped = idMap.get(action.target);
+                if (mapped)
+                    action.target = mapped;
+            }
+        }
+    }
+    (node.children || []).forEach(child => remapNodeReferences(child, idMap));
 }
-function containsType(node, type) {
-    if (node.type === type)
-        return true;
-    return (node.children ?? []).some(child => containsType(child, type));
+
+/**
+ * The text on the drop indicator's chip — "into Card grid · position 2 of 3" (B2).
+ *
+ * The most common drag failure is landing a node one level off and not noticing; naming the PARENT
+ * and the slot makes the target unambiguous before the pointer is released.
+ *
+ * @param containerName  The target container's label or type; blank / unknown → "the page".
+ * @param index          Insert index within the container (0-based).
+ * @param childCount     How many children it has now — the node being dropped makes `childCount + 1`.
+ */
+function dropTargetLabel(containerName, index, childCount) {
+    const name = (containerName ?? '').trim() || 'the page';
+    const total = Math.max(0, childCount) + 1;
+    const position = Math.min(Math.max(index, 0), total - 1) + 1;
+    return `into ${name} · position ${position} of ${total}`;
 }
+
 /**
- * Why `node` may not be inserted under `ancestors` (outermost first, the new parent last; empty = the page),
- * or null when it may. `node` is the whole subtree being placed — a Container holding a Form is refused
- * inside a Form just as a bare Form is, and a link that holds a form is refused wherever it goes. Reordering a node inside its CURRENT parent is not an insert and
- * never asks.
+ * Per-frame exponential smoothing step — moves `current` a fraction of the way
+ * toward `target`. Used to ease the drag ghost toward the pointer instead of
+ * snapping to it 1:1 on every dragmove (see DragEngineService._ghostFollowStep).
  */
-function insertRefusal(node, ancestors) {
-    if (!node)
-        return null;
-    if (node.type && FORM_STATE_BLOCK_TYPES.has(node.type))
-        return InsertRefusal.StateBlockAlone;
-    if (ancestors.some(a => a?.type === FORM_TYPE) && containsType(node, FORM_TYPE))
-        return InsertRefusal.NestedForm;
-    if (formContentInHost(node, ancestors.some(isInteractiveHost)))
-        return InsertRefusal.FormInInteractive;
-    const structural = structureRefusal(node, StructureEdit.Move, ancestors);
-    if (structural === StructureRefusal.NotAccepted)
-        return InsertRefusal.TabsAccepts;
-    if (structural)
-        return lockedRefusal(node, StructureEdit.Move);
-    return null;
+function easeToward(current, target, smoothing) {
+    return current + (target - current) * smoothing;
 }
-/** Why `node` may not be REMOVED from where it is (deleted, cut, made global), or null when it may: a
- *  composite's locked part stays — its Parts switch or deleting the whole composite are the ways out — an
- *  accordion keeps its last item, Tabs their last tab, and a tab or a panel never leaves without its pair (the host
- *  offers to delete both). `siblings` = the list `node` sits in (where the caller has it). */
-function removalRefusal(node, siblings) {
-    if (structureRefusal(node, StructureEdit.Delete))
-        return lockedRefusal(node, StructureEdit.Delete);
-    if (node?.role === AccordionRole.Item && siblings && siblings.filter(s => s?.role === AccordionRole.Item).length <= 1)
-        return InsertRefusal.LastItem;
-    if (isExclusiveItemPart(node)) {
-        const role = node.role === TabsRole.Trigger ? TabsRole.Trigger : TabsRole.Panel;
-        if (siblings && siblings.filter(s => s?.role === role).length <= 1)
-            return InsertRefusal.LastTab;
-        return InsertRefusal.PairedPart;
-    }
-    return null;
+
+/**
+ * Decides which element a drag gesture should actually operate on.
+ *
+ * A drag must never silently descend into a nested child just because the pointer happened to
+ * be over it while its ANCESTOR is the currently selected node, and the overlay's drag-handle
+ * (which carries no node of its own — it lives outside the canvas DOM entirely) must always
+ * redirect to whatever is currently selected. In both cases the redirect target is the
+ * currently-selected element; otherwise the gesture proceeds on its natural origin unchanged.
+ */
+function resolveDragTarget(el, selectedElement, isDragHandle) {
+    if (!selectedElement || el === selectedElement)
+        return el;
+    const isDescendantOfSelected = selectedElement.contains(el);
+    return (isDragHandle || isDescendantOfSelected) ? selectedElement : el;
 }
 
 /**
@@ -1281,6 +1747,9 @@ class TypographyGroupStyleConfig extends GroupStyleConfig {
             ], TextAlign.Start),
             new TraitConfig('fontStyle', '', TraitInputType.SelectButton, { items: [{ value: 'italic', icon: 'ph-thin ph-text-italic', label: 'Italic' }], allowEmpty: true, noneValue: 'normal' }, 'normal', true),
             new TraitConfig('textDecoration', '', TraitInputType.SelectButton, { items: [{ value: 'underline', icon: 'ph-thin ph-text-underline', label: 'Underline' }], allowEmpty: true, noneValue: 'none' }, 'none', true),
+            // CC4b: tabular figures (the Price style's) — every digit one width, so a price that changes never shifts.
+            // `normal` is the CSS initial and a compiler no-op, so it never leaks onto nodes.
+            new TraitConfig('fontVariantNumeric', '', TraitInputType.SelectButton, { items: [{ value: 'tabular-nums', icon: 'ph-thin ph-text-columns', label: 'Tabular figures' }], allowEmpty: true, noneValue: 'normal' }, 'normal', true),
             new TraitConfig('_sep_stroke', 'Stroke', TraitInputType.SectionLabel),
             new TraitConfig('WebkitTextStrokeWidth', 'Width', TraitInputType.Scrub, { min: 0, max: 10, step: 0.5, units: ['px'] }, '0px', true),
             new TraitConfig('WebkitTextStrokeColor', 'Color', TraitInputType.Color, { allowGradient: false, allowTransparent: true, formats: ['hex', 'rgb', 'hsl'] }, 'transparent', true),
@@ -2020,8 +2489,14 @@ class StyleRegistryService {
             this._flushPending = false;
             if (!this.styleEl)
                 return;
-            // The token base first, so variables are available to all subsequent rules.
-            const rest = Array.from(this.rules.values());
+            // The token base first, so variables are available to all subsequent rules. A node's FOCUS rule comes after
+            // its other state rules (CC4b): `on` and `focus` tie on specificity, so a focused option that is on keeps its
+            // focus ring — the order the engine emits too (shared `isLastEmittedStateKey`).
+            const entries = Array.from(this.rules.entries());
+            const rest = [
+                ...entries.filter(([key]) => !isLastEmittedStateKey(key)).map(([, css]) => css),
+                ...entries.filter(([key]) => isLastEmittedStateKey(key)).map(([, css]) => css),
+            ];
             // Breakpoint rules LAST, widest → narrowest, each as a canvas container query.
             const breakpoints = BREAKPOINTS
                 .map(({ id }) => this.responsiveRules.get(id))
@@ -4359,7 +4834,7 @@ var CanvasShowState;
  */
 class CanvasDesignStateService {
     constructor() {
-        this._state$ = new BehaviorSubject({ revealed: new Set(), selectedTriggers: new Set(), pinned: new Set(), shown: new Map(), items: new Map() });
+        this._state$ = new BehaviorSubject({ revealed: new Set(), selectedTriggers: new Set(), pinned: new Set(), triggeredBySelection: new Set(), shown: new Map(), items: new Map() });
         this.state$ = this._state$.asObservable();
         this._pagePath$ = new BehaviorSubject(null);
         /** The app path of the page on the canvas (`/work`), or null when unknown. */
@@ -4384,11 +4859,12 @@ class CanvasDesignStateService {
         const ids = (reveal) => path.filter(n => selectionRevealOf(n) === reveal).map(n => n.id).filter((id) => !!id);
         const revealed = new Set(ids(SelectionReveal.WhileSelected));
         const selectedTriggers = new Set(path.filter(n => isExclusiveTrigger(n)).map(n => n.id).filter((id) => !!id));
-        const { revealed: was, pinned: held, selectedTriggers: wasTriggers } = this._state$.value;
+        const triggeredBySelection = new Set(path.map(displayTriggerOf).filter((id) => !!id));
+        const { revealed: was, pinned: held, selectedTriggers: wasTriggers, triggeredBySelection: wasTriggered } = this._state$.value;
         const pinned = new Set([...held, ...ids(SelectionReveal.UntilClosed)]);
-        if (sameSet(revealed, was) && sameSet(pinned, held) && sameSet(selectedTriggers, wasTriggers))
+        if (sameSet(revealed, was) && sameSet(pinned, held) && sameSet(selectedTriggers, wasTriggers) && sameSet(triggeredBySelection, wasTriggered))
             return;
-        this._state$.next({ ...this._state$.value, revealed, pinned, selectedTriggers });
+        this._state$.next({ ...this._state$.value, revealed, pinned, selectedTriggers, triggeredBySelection });
     }
     /** Closed on the canvas (its X, its backdrop, the eye): no longer pinned or switched open. */
     dismiss(nodeId) {
@@ -4438,13 +4914,17 @@ class CanvasDesignStateService {
         const { revealed, pinned, shown } = this._state$.value;
         return revealed.has(nodeId) || pinned.has(nodeId) || shown.get(nodeId) === CanvasShowState.Open;
     }
+    /** True when the canvas shows an item because the selection is styled "when it is on" (the switcher's hint). */
+    isTriggeredBySelection(triggerId) {
+        return !!triggerId && this._state$.value.triggeredBySelection.has(triggerId);
+    }
     /** True when the part is shown only because the selection is inside it (the switcher's hint line). */
     isRevealedBySelection(nodeId) {
         return !!nodeId && this._state$.value.revealed.has(nodeId);
     }
     /** A new page on the canvas: nothing is revealed or switched open. */
     reset() {
-        this._state$.next({ revealed: new Set(), selectedTriggers: new Set(), pinned: new Set(), shown: new Map(), items: new Map() });
+        this._state$.next({ revealed: new Set(), selectedTriggers: new Set(), pinned: new Set(), triggeredBySelection: new Set(), shown: new Map(), items: new Map() });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: CanvasDesignStateService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: CanvasDesignStateService }); }
@@ -4497,10 +4977,13 @@ class CompositeCanvasService {
         const cssId = node.styleId ?? node.id;
         const rootId = () => compositeScopeId(cssId, compositeRowKeys(element));
         if (isExclusiveRoot(node)) {
+            const tree = node;
             const runtime = this.zone.runOutsideAngular(() => new ExclusiveRuntime(element, {
+                kind: exclusiveKindOf(node) ?? undefined,
                 rootId,
-                behaviour: tabsBehaviour(node),
-                label: () => tabsLabel(node),
+                behaviour: exclusiveBehaviourOf(tree),
+                label: () => exclusiveLabelOf(tree),
+                defaultKey: () => exclusiveDefaultOf(tree),
                 observe: true,
                 forced: () => this.forcedTab(node, element),
                 // The switcher follows the TEMPLATE's clicks; a preview row's copy switches on its own.
@@ -4542,13 +5025,21 @@ class CompositeCanvasService {
         const entry = node.id ? this.attached.get(node.id) : undefined;
         entry?.runtime.setBehaviour(accordionBehaviour(node));
         const tabs = node.id ? this.exclusive.get(node.id) : undefined;
-        tabs?.runtime.setBehaviour(tabsBehaviour(node));
+        tabs?.runtime.setBehaviour(exclusiveBehaviourOf(node));
+    }
+    /** A Segmented control's On by default changed (CC4b): the canvas shows the new default, like a click on it. */
+    showDefault(node) {
+        const runtime = node.id ? this.exclusive.get(node.id)?.runtime : undefined;
+        const key = exclusiveDefaultOf(node);
+        if (runtime && key)
+            runtime.activate(key);
     }
     /** The runtime of an attached Accordion / Disclosure root (the e2e harness and the panels read its state). */
     runtimeOf(nodeId) {
         return (nodeId && this.attached.get(nodeId)?.runtime) || null;
     }
-    /** The runtime of an attached Tabs root (CC4a — "Showing on canvas" reads its tabs and the one on). */
+    /** The runtime of an attached exclusive root — a Tabs (CC4a) or a Segmented control (CC4b): "Showing on canvas" reads
+     *  its items and the one on. */
     tabsRuntimeOf(nodeId) {
         return (nodeId && this.exclusive.get(nodeId)?.runtime) || null;
     }
@@ -4605,13 +5096,14 @@ class CompositeCanvasService {
         }
         return forced;
     }
-    /** The tab forced on: the one whose panel the selection sits in (the template's, in a preview row's copy). */
+    /** The item forced on: the tab whose panel the selection sits in (the template's, in a preview row's copy) — or
+     *  the item the selection is styled "when it is on" by (CC4b: a price shown when Yearly is on turns Yearly on). */
     forcedTab(node, root) {
         const state = this.designState;
         const runtime = node.id ? this.exclusive.get(node.id)?.runtime : undefined;
         if (!state || !runtime)
             return null;
-        for (const id of state.snapshot.revealed) {
+        for (const id of [...state.snapshot.revealed, ...state.snapshot.triggeredBySelection]) {
             const key = runtime.keyAt(root.querySelector(`.iox-node-${CSS.escape(id)}`));
             if (key)
                 return key;
@@ -5711,10 +6203,12 @@ var CompositePresetId;
     CompositePresetId["Accordion"] = "accordion";
     CompositePresetId["Disclosure"] = "disclosure";
     CompositePresetId["Tabs"] = "tabs";
+    CompositePresetId["Segmented"] = "segmented";
     CompositePresetId["Lightbox"] = "lightbox";
 })(CompositePresetId || (CompositePresetId = {}));
 /** Where a composite sits in the Components panel (composite plan §6d): content blocks, or the interactive
- *  composites (the Accordion — CC2, the Disclosure — CC2.1, Tabs — CC4a; the floating family later). */
+ *  composites (the Accordion — CC2, the Disclosure — CC2.1, Tabs — CC4a, the Segmented control — CC4b; the floating
+ *  family later). */
 var CompositePaletteGroup;
 (function (CompositePaletteGroup) {
     CompositePaletteGroup["ContentBlocks"] = "content-blocks";
@@ -5751,6 +6245,11 @@ const COMPOSITE_PRESETS = Object.freeze([
         description: 'Tabs that switch what shows below them — three tabs, the first on. Every tab and panel is its own element.',
         build: create => buildTabsRecipe(create),
     },
+    {
+        id: CompositePresetId.Segmented, group: CompositePaletteGroup.Interactive, name: 'Segmented', icon: 'ph-thin ph-pill',
+        description: 'One of a few, always one on — Monthly · Yearly. Style anything "when Yearly is on" to swap what shows.',
+        build: create => buildSegmentedRecipe(create),
+    },
     {
         id: CompositePresetId.Lightbox, group: CompositePaletteGroup.Interactive, name: 'Lightbox', icon: 'ph-thin ph-frame-corners',
         description: 'A full-screen dialog with a slider — bind its slider to your gallery\'s source, and each thumbnail opens it at its own image.',
@@ -5894,339 +6393,65 @@ function overlayGlobals(globals) {
         else if (globalCanvasLayer(node) === GlobalCanvasLayer.Overlay)
             pinnedAfter.push(node);
     }
-    return { before, pinnedAfter };
-}
-
-/** Counts for ONE node (the selection). Breakpoints with nothing overridden are omitted. */
-function nodeBreakpointCounts(node) {
-    const counts = {};
-    if (!node?.responsive)
-        return counts;
-    for (const { id } of BREAKPOINTS) {
-        if (id === Breakpoint.Base)
-            continue;
-        const n = countOverrides(node.responsive, id);
-        if (n)
-            counts[id] = n;
-    }
-    return counts;
-}
-/** Counts summed over whole trees (the page, when nothing is selected). */
-function treeBreakpointCounts(...roots) {
-    const counts = {};
-    const visit = (nodes) => {
-        for (const node of nodes ?? []) {
-            for (const [bp, n] of Object.entries(nodeBreakpointCounts(node))) {
-                counts[bp] = (counts[bp] ?? 0) + n;
-            }
-            visit(node.children);
-        }
-    };
-    roots.forEach(visit);
-    return counts;
-}
-
-/**
- * Resolve where "click to insert" puts a new element, from the current selection — the rule the
- * components panel and the canvas "+" share (builder-usability-plan.md, B2):
- *
- *   nothing selected        → appended to the page root
- *   a CONTAINER selected    → appended INSIDE it (its last child)
- *   a LEAF selected         → inserted AFTER it, as its next sibling
- *
- * `isContainer` decides what can hold children — the builder passes "has a registered drop zone",
- * the same test a drag uses, so a click can never insert somewhere a drop couldn't.
- * A selection not found in `roots` (stale) falls back to appending to the root.
- */
-function resolveInsertTarget(roots, selected, isContainer) {
-    const append = (children, parent) => ({ children, index: children.length, parent });
-    if (!selected)
-        return append(roots, null);
-    const path = nodeAncestorPath(roots, selected);
-    if (!path)
-        return append(roots, null);
-    if (isContainer(selected)) {
-        if (!selected.children)
-            selected.children = [];
-        return append(selected.children, selected);
-    }
-    const parent = path.length >= 2 ? path[path.length - 2] : null;
-    const siblings = parent ? (parent.children ?? (parent.children = [])) : roots;
-    return { children: siblings, index: siblings.indexOf(selected) + 1, parent };
-}
-
-/**
- * STRUCTURE OPS (A4) — the one-click layout changes people actually make at a narrow width, as pure
- * "what to write" functions. Each returns a flat style map the caller stores in the node's
- * `responsive[bp]` layer (or in the base styles at Base) through the shared `setOverride`.
- *
- * All of it is ordinary CSS the SSR engine already renders — there is no second tree and no
- * per-width HTML. See responsive-breakpoints-plan.md (D5).
- */
-/** CSS lengths that are a FIXED pixel size — the ones that stop a layout fitting a phone. */
-const PX_LENGTH = /^-?\d+(\.\d+)?px$/i;
-/**
- * Hide / show at a width. Hiding is `display: none` INSIDE that breakpoint's rules — the node stays
- * in the DOM and in the SSR output (one HTML document serves every width), so hidden content still
- * ships bytes and is still indexed. Showing again clears the override rather than guessing a value.
- *
- * @returns the props to write, or `null` meaning "clear the display override at this breakpoint".
- */
-function visibilityProps(hidden) {
-    return hidden ? { display: 'none' } : null;
-}
-/** True when this node is hidden by the resolved styles at some width. */
-function isHiddenAt(resolvedStyleProps) {
-    return String(resolvedStyleProps?.['display'] ?? '') === 'none';
-}
-/**
- * Stack a container's children in one column — the most common mobile edit, and four separate
- * controls today (display, direction, wrap, columns). A grid becomes a single-column grid; anything
- * else becomes a column flex box.
- */
-function stackChildrenProps(resolvedStyleProps) {
-    const display = String(resolvedStyleProps?.['display'] ?? '');
-    if (display === 'grid' || display === 'inline-grid') {
-        return { gridTemplateColumns: 'repeat(1, minmax(0, 1fr))' };
-    }
-    return { display: 'flex', flexDirection: 'column', flexWrap: 'nowrap' };
-}
-/**
- * Collapse a grid to `count` columns (a flex row is stacked instead — it has no column track).
- * `count` is clamped to at least 1.
- */
-function collapseColumnsProps(resolvedStyleProps, count) {
-    const columns = Math.max(1, Math.floor(count));
-    const display = String(resolvedStyleProps?.['display'] ?? '');
-    if (display === 'grid' || display === 'inline-grid') {
-        return { gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))` };
-    }
-    return columns === 1 ? stackChildrenProps(resolvedStyleProps) : { flexWrap: 'wrap' };
-}
-/** How many equal columns a `repeat(N, …)` track list describes, or null when it isn't one. */
-function columnCountOf(resolvedStyleProps) {
-    const match = /^repeat\(\s*(\d+)\s*,/.exec(String(resolvedStyleProps?.['gridTemplateColumns'] ?? ''));
-    return match ? Number(match[1]) : null;
-}
-/**
- * Make fixed pixel sizes fluid: `width: 520px` → `width: 100%` with the original kept as
- * `max-width`, so the element still never exceeds its designed size on a wide screen. `minWidth` in
- * px is dropped to 0 — it is what actually forces horizontal scrolling on a phone.
- *
- * @returns the props to write; EMPTY when there is nothing fixed to fluidise.
- */
-function fluidiseProps(resolvedStyleProps) {
-    const out = {};
-    const width = String(resolvedStyleProps?.['width'] ?? '');
-    const minWidth = String(resolvedStyleProps?.['minWidth'] ?? '');
-    if (PX_LENGTH.test(width)) {
-        out['width'] = '100%';
-        const maxWidth = String(resolvedStyleProps?.['maxWidth'] ?? '');
-        if (!maxWidth || maxWidth === 'none')
-            out['maxWidth'] = width;
-    }
-    if (PX_LENGTH.test(minWidth) && parseFloat(minWidth) > 0)
-        out['minWidth'] = '0px';
-    return out;
+    return { before, pinnedAfter };
 }
-/** True when `fluidiseProps` would change anything — drives the button's disabled state. */
-function canFluidise(resolvedStyleProps) {
-    return Object.keys(fluidiseProps(resolvedStyleProps)).length > 0;
+
+/** Counts for ONE node (the selection). Breakpoints with nothing overridden are omitted. */
+function nodeBreakpointCounts(node) {
+    const counts = {};
+    if (!node?.responsive)
+        return counts;
+    for (const { id } of BREAKPOINTS) {
+        if (id === Breakpoint.Base)
+            continue;
+        const n = countOverrides(node.responsive, id);
+        if (n)
+            counts[id] = n;
+    }
+    return counts;
 }
-/**
- * Reorder children AT ONE WIDTH using CSS `order`, leaving the tree — and so the DOM and
- * screen-reader order — untouched. Returns one value per child BY CHILD INDEX: the `order` it must
- * take, or `null` for "no override needed".
- *
- * Either every child gets an explicit `order` or none does: CSS defaults `order` to 0, so a partial
- * set would mix overridden children with unordered ones and read as an arbitrary interleave.
- *
- * @param count  How many children there are.
- * @param from   Index of the child being moved.
- * @param to     Index it should occupy.
- */
-function reorderProps(count, from, to) {
-    const none = Array.from({ length: Math.max(0, count) }, () => null);
-    if (from < 0 || from >= count || to < 0 || to >= count || from === to)
-        return none;
-    // Visual order after the move, as a list of CHILD indices.
-    const sequence = Array.from({ length: count }, (_, i) => i);
-    sequence.splice(to, 0, ...sequence.splice(from, 1));
-    const orderByChild = none.slice();
-    sequence.forEach((childIndex, position) => { orderByChild[childIndex] = position; });
-    return orderByChild;
+/** Counts summed over whole trees (the page, when nothing is selected). */
+function treeBreakpointCounts(...roots) {
+    const counts = {};
+    const visit = (nodes) => {
+        for (const node of nodes ?? []) {
+            for (const [bp, n] of Object.entries(nodeBreakpointCounts(node))) {
+                counts[bp] = (counts[bp] ?? 0) + n;
+            }
+            visit(node.children);
+        }
+    };
+    roots.forEach(visit);
+    return counts;
 }
 
 /**
- * RESPONSIVE AUDIT (A5) — find what is broken at a width, from the node tree plus ONE measurement
- * pass. A builder that lets you author five widths must also tell you which of them are broken.
+ * Resolve where "click to insert" puts a new element, from the current selection — the rule the
+ * components panel and the canvas "+" share (builder-usability-plan.md, B2):
  *
- * Pure: the caller measures (one `getBoundingClientRect` per node, off the animation path) and
- * passes the numbers in. Every finding that can be repaired carries the exact props to write, so a
- * fix is one `setOverride` per key — one undo step, and it shows as an ordinary override.
- */
-var AuditCode;
-(function (AuditCode) {
-    AuditCode["Overflow"] = "overflow";
-    AuditCode["FixedWidth"] = "fixed-width";
-    AuditCode["TapTarget"] = "tap-target";
-    AuditCode["TinyText"] = "tiny-text";
-    AuditCode["UnboundedImage"] = "unbounded-image";
-    /** A slider showing more slides than the width can carry — each one unreadably narrow. */
-    AuditCode["SlidesOverflow"] = "slides-overflow";
-    /** An out-of-flow node whose box lands outside the frame, so it is unreachable at this width. */
-    AuditCode["OffscreenAbsolute"] = "offscreen-absolute";
-    /** Form content inside a link or a button — a STRUCTURE finding, true at every width (form-nesting-audit.util). */
-    AuditCode["FormInLink"] = "form-in-link";
-    /** An icon-only button or link with no Accessible name — announced as an unnamed control (CC1 N6). */
-    AuditCode["UnnamedControl"] = "unnamed-control";
-    /** A composite whose items come from content, and its source returned no rows (CC2, board 9): the
-     *  canvas shows the placeholder, the live site renders nothing. */
-    AuditCode["EmptySource"] = "empty-source";
-})(AuditCode || (AuditCode = {}));
-/** A fix that changes the tree, not a style or a trait — applied as one page-history step. */
-var StructureFix;
-(function (StructureFix) {
-    /** Move the form out of the link or button holding it, to right after it. */
-    StructureFix["MoveFormOut"] = "move-form-out";
-})(StructureFix || (StructureFix = {}));
-var AuditSeverity;
-(function (AuditSeverity) {
-    AuditSeverity["Error"] = "error";
-    AuditSeverity["Warning"] = "warning";
-    AuditSeverity["Info"] = "info";
-})(AuditSeverity || (AuditSeverity = {}));
-/** WCAG 2.5.8 minimum target size. */
-const MIN_TAP_PX = 44;
-/** Below this, iOS Safari zooms the page when an adjacent input is focused. */
-const MIN_TEXT_PX = 12;
-/** Types a visitor taps. */
-const TAPPABLE = new Set(['Button', 'ButtonBlock', 'Link', 'LinkedContainer']);
-/** Narrower than this, a slide shows too little of its content to be worth showing at all. */
-const MIN_SLIDE_PX = 200;
-/** Out-of-flow positioning that can put a node outside the frame. */
-const OUT_OF_FLOW = new Set(['absolute', 'fixed']);
-const nameOf = (node) => node.label || node.type;
-const pxOf = (value) => {
-    const match = /^(-?\d+(?:\.\d+)?)px$/i.exec(String(value ?? ''));
-    return match ? Number(match[1]) : null;
-};
-/**
- * Audit nodes laid out at `viewportWidth`. Returns findings ordered by severity (errors first),
- * then by the order the nodes were given — so the worst thing is at the top of the list.
+ *   nothing selected        → appended to the page root
+ *   a CONTAINER selected    → appended INSIDE it (its last child)
+ *   a LEAF selected         → inserted AFTER it, as its next sibling
+ *
+ * `isContainer` decides what can hold children — the builder passes "has a registered drop zone",
+ * the same test a drag uses, so a click can never insert somewhere a drop couldn't.
+ * A selection not found in `roots` (stale) falls back to appending to the root.
  */
-function auditNodes(nodes, viewportWidth) {
-    const findings = [];
-    for (const node of nodes) {
-        const name = nameOf(node);
-        const styles = node.styleProps ?? {};
-        if (String(styles['display'] ?? '') === 'none')
-            continue; // hidden here — nothing to report
-        // 1. Wider than the viewport: the page scrolls sideways.
-        if (node.width > viewportWidth + 0.5) {
-            findings.push({
-                nodeId: node.id, nodeName: name, code: AuditCode.Overflow, severity: AuditSeverity.Error,
-                message: `${name} is ${Math.round(node.width)}px wide in a ${viewportWidth}px viewport — the page scrolls sideways.`,
-                fix: canFluidise(styles) ? fluidiseProps(styles) : { maxWidth: '100%' },
-            });
-        }
-        else if (canFluidise(styles)) {
-            // 2. A fixed px size that still fits, but will not on a narrower phone.
-            const width = pxOf(styles['width']);
-            findings.push({
-                nodeId: node.id, nodeName: name, code: AuditCode.FixedWidth, severity: AuditSeverity.Warning,
-                message: width !== null
-                    ? `${name} has a fixed width of ${width}px — it cannot shrink on a narrower screen.`
-                    : `${name} has a fixed minimum width — it forces sideways scrolling below that size.`,
-                fix: fluidiseProps(styles),
-            });
-        }
-        // 3. Tap targets below the WCAG minimum.
-        if (TAPPABLE.has(node.type) && node.width > 0 && node.height > 0
-            && (node.width < MIN_TAP_PX || node.height < MIN_TAP_PX)) {
-            findings.push({
-                nodeId: node.id, nodeName: name, code: AuditCode.TapTarget, severity: AuditSeverity.Warning,
-                message: `${name} is ${Math.round(node.width)}×${Math.round(node.height)}px — below the ${MIN_TAP_PX}px minimum tap target.`,
-                fix: { minHeight: `${MIN_TAP_PX}px`, minWidth: `${MIN_TAP_PX}px` },
-            });
-        }
-        // 4. Text too small to read (and small enough to trigger iOS zoom).
-        const fontSize = pxOf(styles['fontSize']);
-        if (fontSize !== null && fontSize < MIN_TEXT_PX) {
-            findings.push({
-                nodeId: node.id, nodeName: name, code: AuditCode.TinyText, severity: AuditSeverity.Warning,
-                message: `${name} renders at ${fontSize}px — under the ${MIN_TEXT_PX}px readable minimum.`,
-                fix: { fontSize: `${MIN_TEXT_PX}px` },
-            });
-        }
-        // 5. An image with a fixed height and no ratio crops unpredictably as the width changes.
-        if (node.type === 'Image' && pxOf(styles['height']) !== null
-            && !String(styles['aspectRatio'] ?? '').trim().replace(/^auto$/, '')) {
-            findings.push({
-                nodeId: node.id, nodeName: name, code: AuditCode.UnboundedImage, severity: AuditSeverity.Info,
-                message: `${name} has a fixed height and no aspect ratio — it crops unpredictably as the width changes.`,
-                fix: { height: 'auto', aspectRatio: '16 / 9' },
-            });
-        }
-        // 6. A slider showing more slides than this width can carry. NOT a CSS problem: slide count
-        //    is a component trait, so the fix is a per-breakpoint TRAIT override (P3-G1), not a style.
-        if (node.type === 'SliderContainer' && node.width > 0) {
-            const perView = Number(node.inputs?.['slidesPerView']);
-            if (Number.isFinite(perView) && perView > 1) {
-                const slideWidth = node.width / perView;
-                if (slideWidth < MIN_SLIDE_PX) {
-                    const fits = Math.max(1, Math.floor(node.width / MIN_SLIDE_PX));
-                    findings.push({
-                        nodeId: node.id, nodeName: name, code: AuditCode.SlidesOverflow, severity: AuditSeverity.Warning,
-                        message: `${name} shows ${perView} slides across ${Math.round(node.width)}px — ${Math.round(slideWidth)}px each. Show ${fits} at this width.`,
-                        inputFix: { slidesPerView: fits },
-                    });
-                }
-            }
-        }
-        // 7. An icon-only control with no name (WCAG 4.1.2): a screen reader says "button" and nothing
-        //    else. No auto-fix — only the author knows what it does; the finding selects it.
-        if (node.unnamedControl) {
-            findings.push({
-                nodeId: node.id, nodeName: name, code: AuditCode.UnnamedControl, severity: AuditSeverity.Error,
-                message: `${name} shows only an icon and has no accessible name — screen readers announce it as an unnamed control. Name it in Bindings ▸ Accessibility.`,
-            });
-        }
-        // 7b. A composite from content whose source has no rows (CC2 R3): the visitor sees nothing there.
-        if (node.emptySource) {
-            findings.push({
-                nodeId: node.id, nodeName: name, code: AuditCode.EmptySource, severity: AuditSeverity.Warning,
-                message: `${name} in ${node.emptySource.section}: its source ${node.emptySource.alias} has no rows.`,
-            });
-        }
-        // 8. An out-of-flow node that has left the frame. Measured, not inferred: a negative offset
-        //    is legitimate design until it actually puts the content beyond the edge.
-        if (OUT_OF_FLOW.has(String(styles['position'] ?? '')) && node.left !== undefined && node.width > 0) {
-            const right = node.left + node.width;
-            const offLeft = right <= 0.5;
-            const offRight = node.left >= viewportWidth - 0.5;
-            if (offLeft || offRight) {
-                findings.push({
-                    nodeId: node.id, nodeName: name, code: AuditCode.OffscreenAbsolute, severity: AuditSeverity.Error,
-                    message: `${name} is positioned ${offLeft ? 'left of' : 'beyond'} the ${viewportWidth}px viewport — it cannot be seen or tapped at this width.`,
-                    // No blind auto-fix: the author's intent (a decorative overflow vs a mistake)
-                    // is not knowable from geometry. Selecting the node is the useful action.
-                });
-            }
-        }
+function resolveInsertTarget(roots, selected, isContainer) {
+    const append = (children, parent) => ({ children, index: children.length, parent });
+    if (!selected)
+        return append(roots, null);
+    const path = nodeAncestorPath(roots, selected);
+    if (!path)
+        return append(roots, null);
+    if (isContainer(selected)) {
+        if (!selected.children)
+            selected.children = [];
+        return append(selected.children, selected);
     }
-    const rank = { [AuditSeverity.Error]: 0, [AuditSeverity.Warning]: 1, [AuditSeverity.Info]: 2 };
-    return findings
-        .map((finding, index) => ({ finding, index }))
-        .sort((a, b) => rank[a.finding.severity] - rank[b.finding.severity] || a.index - b.index)
-        .map(entry => entry.finding);
-}
-/** Counts per severity — the per-breakpoint summary strip. */
-function summarise(findings) {
-    const out = { [AuditSeverity.Error]: 0, [AuditSeverity.Warning]: 0, [AuditSeverity.Info]: 0 };
-    for (const finding of findings)
-        out[finding.severity]++;
-    return out;
+    const parent = path.length >= 2 ? path[path.length - 2] : null;
+    const siblings = parent ? (parent.children ?? (parent.children = [])) : roots;
+    return { children: siblings, index: siblings.indexOf(selected) + 1, parent };
 }
 
 const FINDING_KEY = 'builder.chrome.auditFormInLink';
@@ -7158,10 +7383,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImpo
  * An accordion's and a disclosure's parts are named by the part alone (`trigger`, "Accordion · trigger", board 3);
  * a card keeps its full role (`card.title`, "Card · card.title", board 8).
  */
-const SHORT_ROLE_KINDS = new Set([CompositeKind.Accordion, CompositeKind.Disclosure, CompositeKind.Tabs]);
+const SHORT_ROLE_KINDS = new Set([CompositeKind.Accordion, CompositeKind.Disclosure, CompositeKind.Tabs, CompositeKind.Segmented]);
 /** A composite kind's glyph (Phosphor, weight-less): the badge, the root's crumb and its tree row carry it
  *  (board 3: "the composite root carrying its kind icon"). A card keeps the generic stack glyph. */
-const KIND_GLYPHS = { [CompositeKind.Accordion]: 'ph-rows', [CompositeKind.Disclosure]: 'ph-caret-circle-down', [CompositeKind.Tabs]: 'ph-tabs', slider: 'ph-slideshow' };
+const KIND_GLYPHS = {
+    [CompositeKind.Accordion]: 'ph-rows', [CompositeKind.Disclosure]: 'ph-caret-circle-down', [CompositeKind.Tabs]: 'ph-tabs', [CompositeKind.Segmented]: 'ph-pill',
+    slider: 'ph-slideshow',
+};
 const DEFAULT_KIND_GLYPH = 'ph-stack';
 /** The tree icon of an accordion's structural parts (board 3): rows on the root, a stack on an item and a
  *  panel, a cursor on the header, a sparkle on the icon. Other parts keep their type's icon. */
@@ -7183,6 +7411,10 @@ const PART_ICONS = {
     [TabsRole.Trigger]: 'ph-thin ph-cursor',
     [TabsRole.Panels]: 'ph-thin ph-stack',
     [TabsRole.Panel]: 'ph-thin ph-stack',
+    // CC4b — the Segmented control (board 10): its pill glyph on the root, a cursor on an option, a seal on its badge.
+    [SegmentedRole.Segmented]: 'ph-thin ph-pill',
+    [SegmentedRole.Option]: 'ph-thin ph-cursor',
+    [SegmentedRole.Badge]: 'ph-thin ph-seal',
     // CC3 — a Slider's controls (board 6): a cursor on the buttons, six dots on the pagination.
     [SliderRole.Pause]: 'ph-thin ph-cursor',
     [SliderRole.Prev]: 'ph-thin ph-cursor',
@@ -7218,6 +7450,8 @@ function compositePartSub(node, ancestors = []) {
         return accordionItemLabel(node) || null;
     if (node.role === TabsRole.Trigger)
         return tabLabel(node) || null;
+    if (node.role === SegmentedRole.Option)
+        return segmentedOptionLabel(node) || null;
     if (node.role === TabsRole.Panel) {
         const root = exclusiveRootOf(node, ancestors);
         const tab = root ? tabTriggerOf(root, node) : undefined;
@@ -7281,7 +7515,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImpo
 const FROM_ROW_KEY = 'builder.chrome.fromRow';
 const ADD_ITEM_KEY = 'builder.chrome.addItem';
 /** The kind label a composite part's selection badge shows (Card v2: "Card · card.title"). */
-const COMPOSITE_KIND_KEYS = { card: 'builder.chrome.kindCard', accordion: 'builder.chrome.kindAccordion', disclosure: 'builder.chrome.kindDisclosure', tabs: 'builder.chrome.kindTabs', slider: 'builder.chrome.kindSlider', nav: 'builder.chrome.kindNav' };
+const COMPOSITE_KIND_KEYS = { card: 'builder.chrome.kindCard', accordion: 'builder.chrome.kindAccordion', disclosure: 'builder.chrome.kindDisclosure', tabs: 'builder.chrome.kindTabs', segmented: 'builder.chrome.kindSegmented', slider: 'builder.chrome.kindSlider', nav: 'builder.chrome.kindNav' };
 const VIDEO_TYPE = 'Video';
 const VIDEO_KIND_KEY = 'builder.chrome.kindVideo';
 const VIDEO_POSTER_ONLY_KEY = 'builder.chrome.videoPosterOnly';
@@ -7290,9 +7524,12 @@ const VIDEO_FILE_KEY = 'builder.chrome.videoFile';
 const ADD_ITEM_ROLES = new Set([
     AccordionRole.Accordion, AccordionRole.Item, AccordionRole.Trigger, AccordionRole.Panel,
     TabsRole.Tabs, TabsRole.List, TabsRole.Trigger, TabsRole.Panels, TabsRole.Panel,
+    SegmentedRole.Segmented, SegmentedRole.Option,
 ]);
 /** Tabs say "Add tab" (board 3) — the button adds a tab AND its panel. */
 const ADD_TAB_KEY = 'builder.chrome.addTab';
+/** A Segmented control says "Add option" (board 10). */
+const ADD_OPTION_KEY = 'builder.chrome.addOption';
 class OverlayComponent {
     constructor(elRef, instanceRegistry, overlayService, viewportService, presetRegistry, symbolRegistry, interactionPresetRegistry, interactionEngine, clipboard, styleRegistry, panelEventService, cdr, dragEngine, labels) {
         this.elRef = elRef;
@@ -7543,7 +7780,8 @@ class OverlayComponent {
         return ADD_ITEM_ROLES.has(this.selectEntry?.node?.role ?? '');
     }
     get addItemLabel() {
-        const key = isTabsPart(this.selectEntry?.node) ? ADD_TAB_KEY : ADD_ITEM_KEY;
+        const node = this.selectEntry?.node;
+        const key = isTabsPart(node) ? ADD_TAB_KEY : isSegmentedPart(node) ? ADD_OPTION_KEY : ADD_ITEM_KEY;
         return this.builderLabels(key, BUILDER_CHROME_EN[key]);
     }
     onAddItem(event) {
@@ -8150,7 +8388,7 @@ function walk(nodes, depth, out, ctx, inTemplate, templateOf, ancestors) {
             node,
             icon: bound ? BOUND_ICON : (compositePartIcon(node.role) || ctx.iconOf(node.type) || DEFAULT_ICON),
             label,
-            hiddenAtRest: isHiddenAtRest(node),
+            hiddenAtRest: isHiddenAtRest(node) || (!!ctx.onAtRest && hiddenUntilItemOn(node, ctx.onAtRest)),
             depth,
             expanded,
             hasChildren,
@@ -8393,6 +8631,7 @@ class LayerTreeComponent {
                     .replace('{source}', sourceTypeLabel(rows.alias, this.dataSources?.findByAlias(rows.alias), this.typeLabels))
                     .replace('{count}', String(rows.count))
                 : null,
+            onAtRest: itemsOnAtRest([...(this.layout ?? []), ...(this.globalElements ?? [])]),
         };
         this.flatTree = flattenLayerTree(this.layout, ctx);
         this.flatGlobalTree = flattenLayerTree(this.globalElements, ctx);
@@ -8706,7 +8945,10 @@ class BuilderComponent {
         return out;
     }
     refreshStructureFindings() {
-        this.structureFindings = formNestingFindings(this.layout, this.globalElements, this.labels);
+        this.structureFindings = [
+            ...formNestingFindings(this.layout, this.globalElements, this.labels),
+            ...compositeStructureFindings(this.layout, this.globalElements, this.labels),
+        ];
     }
     /** A structure fix moves nodes on the page: ONE layout change, so ONE undo step. */
     applyStructureFix(finding) {
@@ -9696,6 +9938,9 @@ class BuilderComponent {
         else if (action === NodeAction.Duplicate) {
             if (this.duplicateTabPairOf(node))
                 return;
+            // The same acceptance rule as the toolbar's Duplicate (a fifth Segmented option is refused, CC4b).
+            if (this.dragEngine.refuseInsert(node, this.siblingAncestors(node)))
+                return;
             const clone = this.deepCloneWithNewIds(node);
             result.parent.splice(result.index + 1, 0, clone);
             this.cdr.detectChanges();
@@ -9956,6 +10201,8 @@ class BuilderComponent {
         const root = exclusiveRootOf(node, path);
         if (!root)
             return false;
+        if (isSegmentedRoot(root))
+            return this.addSegmentedOptionTo(root, path);
         if (isTabsFromContent(root))
             return true;
         const anchor = path.find(n => isExclusiveItemPart(n)) ?? null;
@@ -9967,6 +10214,23 @@ class BuilderComponent {
         this.panelEventService.emit(PanelEventTypes.SELECT_NODE, { node: pair.tab });
         return true;
     }
+    /** Toolbar ▸ Add option on a Segmented part (CC4b): a fresh option after the selection's own option (or at the end
+     *  for the root) — ONE undo step, then it is selected. A fifth is refused, said in a toast (Q40). */
+    addSegmentedOptionTo(root, path) {
+        const tree = root;
+        if (segmentedAddRefusal(tree)) {
+            this.dragEngine.insertRefused$.next({ reason: InsertRefusal.SegmentedMaxOptions, message: insertRefusalLabel(InsertRefusal.SegmentedMaxOptions, this.labels) });
+            return true;
+        }
+        const anchor = path.find(n => n.role === SegmentedRole.Option) ?? null;
+        const factory = builderCompositeFactory(t => this.registry.createConfig(t), t => this.registry.baselineStyleProps(t));
+        const option = addSegmentedOption(tree, factory, anchor);
+        if (!option)
+            return true;
+        this.panelEventService.emit(PanelEventTypes.NODE_STRUCTURE_CHANGED, { node: root });
+        this.panelEventService.emit(PanelEventTypes.SELECT_NODE, { node: option });
+        return true;
+    }
     /** Duplicate on a tab or a panel (toolbar, layer tree): the PAIR is duplicated under one new key. True when handled. */
     duplicateTabPairOf(node) {
         const root = tabsRootForPart(this.layout, this.globalElements, node);
@@ -13847,5 +14111,5 @@ class BuilderSpacerComponentConfig extends ComponentConfig {
  * Generated bundle index. Do not edit.
  */
 
-export { ACTION_TYPE_OPTIONS, AuditCode, AuditPanelComponent, AuditSeverity, BODY_CRUMB_LABEL, BOUND_ICON, BREAKPOINT_PRESENTATION, BUILDER_CANVAS_CONTAINER, BUILDER_CHROME_EN, BUILDER_FONT_LINK_ATTR, BUILDER_TOKEN_SCOPE_CLASS, BackgroundGroupStyleConfig, BorderGroupStyleConfig, BreadcrumbBarComponent, BuilderButtonBlockComponent, BuilderButtonComponentConfig, BuilderClipboardService, BuilderComponent, BuilderContainerComponent, BuilderContainerComponentConfig, BuilderDataSourceService, BuilderDialogComponent, BuilderDividerComponentConfig, BuilderHeadingComponentConfig, BuilderHistoryService, BuilderIconComponentConfig, BuilderImageComponentConfig, BuilderLinkComponentConfig, BuilderLinkedContainerComponent, BuilderLinkedContainerConfig, BuilderListComponentConfig, BuilderListItemComponentConfig, BuilderMode, BuilderRepeaterComponent, BuilderSpacerComponentConfig, ButtonBlockComponentConfig, CANVAS_EMPTY_IMAGE_LABEL_EN, CANVAS_EMPTY_IMAGE_LABEL_KEY, CANVAS_ROOT_RESET_CSS, COMPOSITE_PRESETS, CanvasDesignStateService, CanvasShowState, CardComponentConfig, ChildLayoutGroupStyleConfig, ComponentConfig, ComponentRegistryService, CompositeCanvasService, CompositePaletteGroup, CompositePresetId, DEFAULT_ESSENTIAL_TRAITS, DESCRIPTOR_MAX_LENGTH, DRAG_HANDLE_ATTR, DROP_REFUSED_CLASS, DataSourceRegistryService, DataSourceType, DialogComponentConfig, DimensionsGroupStyleConfig, DragEngineService, EASING_OPTIONS$1 as EASING_OPTIONS, EDITOR_CHROME_ATTRIBUTE, ESSENTIAL_TRAITS_BY_TYPE, EffectsGroupStyleConfig, FIELD_KIND_PRESETS, FIELD_PARTS, FORM_STATE_BLOCK_TYPES, FORM_TYPE, FieldComponentConfig, FieldGroupComponentConfig, FormComponentConfig, FormErrorComponentConfig, FormStateService, FormSuccessComponentConfig, GLOBALS_AFTER_CLASS, GalleryConfig, GlobalCanvasLayer, GroupStyleConfig, HIDDEN_AT_REST_LABEL_KEY, HIDDEN_AT_REST_ROLES, HIDDEN_AT_REST_TYPES, INSERT_REFUSAL_LABEL_KEYS, INTERACTION_STATES, INVERSE_ACTION, IOX_BUILDER_CANVAS, IOX_BUILDER_LABELS, IOX_CONTENT_TYPE_LABELS, IOX_DATA_SOURCE_ENDPOINTS, InsertRefusal, InteractionEngineService, InteractionPresetRegistryService, IoxBuilderModule, IoxDraggableDirective, IoxDropzoneDirective, LAYOUT_PRESETS, LayerTreeComponent, LayoutGroupStyleConfig, ListGroupStyleConfig, NodeAction, OverlayComponent, OverlayService, PALETTE_PRESET_DEFS, PanelChildComponent, PanelComponent, PanelEventService, PanelEventTypes, PanelTypes, PositionGroupStyleConfig, PresetRegistryService, RELATIONAL_STATES, RELATIONAL_STATE_BASE, REPEATER_SOURCE_PROP, REPEATER_TYPE, REVEALED_WHILE_SELECTED_ROLES, ROOT_ESCAPE_PX, ROUTE_ANIMATION_OPTIONS, RenderDirective, RepeaterComponentConfig, RootZone, SCREEN_WIDTH_OPTIONS, SILENT_REFUSALS, STRUCTURAL_STATES, SUPPORTED_STATES, SectionComponent, SectionComponentConfig, SelectionReveal, SizeGroupStyleConfig, SliderContainerComponent, SliderContainerConfig, SliderSlideComponent, SliderSlideConfig, SpacingGroupStyleConfig, StructureFix, StyleCategory, StyleRegistryService, TraitConfig as StyleTraitConfig, SubmitButtonComponentConfig, SymbolRegistryService, TARGETED_STATES, TARGETED_STATE_BASE, TOGGLE_PART_ROLES, TRIGGER_OPTIONS, TextBlockComponentConfig, ToolbarAction, ToolbarComponent, TraitConfig, TraitInputType, TypographyGroupStyleConfig, UNITS_ALL, UNITS_DEG, UNITS_FIXED, UNITS_NO_VW, VALIDATION_STATES, VALIDATION_STATE_CLASS, VideoConfig, ViewportService, ZOOM_OPTIONS, arrayItemSchemaFields, arraySchemaFields, auditNodes, bindingLabel, bindingLabels, buildCompositePreset, buildConsentPreset, buildElementStyleSpecimen, buildFieldKindPreset, buildFlavorSpecimen, buildFormPreset, buildFullStyleTraits, buildLayoutPreset, buildPalettePreset, buildPresetStyleTraits, builderCompositeFactory, canFluidise, canvasEmptyImageLabel, canvasHostDisplay, collapseColumnsProps, columnCountOf, defaultBuilderLabels, defaultPageSettings, deleteTabPair, dropChildren, dropTargetLabel, duplicateTabPair, escapesRoot, essentialTraitsFor, findNodeLocation, findParentOf, flattenLayerTree, flattenSchemaFields, fluidiseProps, generateNodeId, globalCanvasLayer, insertRefusal, insertRefusalLabel, isHiddenAt, isHiddenAtRest, isPinnedGlobal, isSpecimen, markSpecimen, matchesControlSearch, nearestFormNode, nodeAncestorPath, nodeAncestorPathInEither, nodeDescriptor, nodeStyleMap, overlayGlobals, pathToNode, refreshSubtree, regenerateNodeIds, removalRefusal, reorderProps, repeaterSourceAlias, repeaterSubLabel, resolveInsertTarget, resolveTraitControllerType, resolveTraitOptions, retypeNode, rootEscapeBand, rootZone, selectionRevealOf, setStyleTrait, setTrait, shortDescriptor, sourceContentType, sourceTypeLabel, stackChildrenProps, summarise, syncEmptyImagePlaceholder, syncNodeDesign, syncNodeInputs, tabPairLabel, tabsRootForPart, textNode, upsertNodeStyles, visibilityProps, walkNodes, wrapNode };
+export { ACTION_TYPE_OPTIONS, AuditCode, AuditPanelComponent, AuditSeverity, BODY_CRUMB_LABEL, BOUND_ICON, BREAKPOINT_PRESENTATION, BUILDER_CANVAS_CONTAINER, BUILDER_CHROME_EN, BUILDER_FONT_LINK_ATTR, BUILDER_TOKEN_SCOPE_CLASS, BackgroundGroupStyleConfig, BorderGroupStyleConfig, BreadcrumbBarComponent, BuilderButtonBlockComponent, BuilderButtonComponentConfig, BuilderClipboardService, BuilderComponent, BuilderContainerComponent, BuilderContainerComponentConfig, BuilderDataSourceService, BuilderDialogComponent, BuilderDividerComponentConfig, BuilderHeadingComponentConfig, BuilderHistoryService, BuilderIconComponentConfig, BuilderImageComponentConfig, BuilderLinkComponentConfig, BuilderLinkedContainerComponent, BuilderLinkedContainerConfig, BuilderListComponentConfig, BuilderListItemComponentConfig, BuilderMode, BuilderRepeaterComponent, BuilderSpacerComponentConfig, ButtonBlockComponentConfig, CANVAS_EMPTY_IMAGE_LABEL_EN, CANVAS_EMPTY_IMAGE_LABEL_KEY, CANVAS_ROOT_RESET_CSS, COMPOSITE_PRESETS, CanvasDesignStateService, CanvasShowState, CardComponentConfig, ChildLayoutGroupStyleConfig, ComponentConfig, ComponentRegistryService, CompositeCanvasService, CompositePaletteGroup, CompositePresetId, DEFAULT_ESSENTIAL_TRAITS, DESCRIPTOR_MAX_LENGTH, DRAG_HANDLE_ATTR, DROP_REFUSED_CLASS, DataSourceRegistryService, DataSourceType, DialogComponentConfig, DimensionsGroupStyleConfig, DragEngineService, EASING_OPTIONS$1 as EASING_OPTIONS, EDITOR_CHROME_ATTRIBUTE, ESSENTIAL_TRAITS_BY_TYPE, EffectsGroupStyleConfig, FIELD_KIND_PRESETS, FIELD_PARTS, FORM_STATE_BLOCK_TYPES, FORM_TYPE, FieldComponentConfig, FieldGroupComponentConfig, FormComponentConfig, FormErrorComponentConfig, FormStateService, FormSuccessComponentConfig, GLOBALS_AFTER_CLASS, GalleryConfig, GlobalCanvasLayer, GroupStyleConfig, HIDDEN_AT_REST_LABEL_KEY, HIDDEN_AT_REST_ROLES, HIDDEN_AT_REST_TYPES, INSERT_REFUSAL_LABEL_KEYS, INTERACTION_STATES, INVERSE_ACTION, IOX_BUILDER_CANVAS, IOX_BUILDER_LABELS, IOX_CONTENT_TYPE_LABELS, IOX_DATA_SOURCE_ENDPOINTS, InsertRefusal, InteractionEngineService, InteractionPresetRegistryService, IoxBuilderModule, IoxDraggableDirective, IoxDropzoneDirective, LAYOUT_PRESETS, LayerTreeComponent, LayoutGroupStyleConfig, ListGroupStyleConfig, NodeAction, OverlayComponent, OverlayService, PALETTE_PRESET_DEFS, PanelChildComponent, PanelComponent, PanelEventService, PanelEventTypes, PanelTypes, PositionGroupStyleConfig, PresetRegistryService, RELATIONAL_STATES, RELATIONAL_STATE_BASE, REPEATER_SOURCE_PROP, REPEATER_TYPE, REVEALED_WHILE_SELECTED_ROLES, ROOT_ESCAPE_PX, ROUTE_ANIMATION_OPTIONS, RenderDirective, RepeaterComponentConfig, RootZone, SCREEN_WIDTH_OPTIONS, SILENT_REFUSALS, STRUCTURAL_STATES, SUPPORTED_STATES, SectionComponent, SectionComponentConfig, SelectionReveal, SizeGroupStyleConfig, SliderContainerComponent, SliderContainerConfig, SliderSlideComponent, SliderSlideConfig, SpacingGroupStyleConfig, StructureFix, StyleCategory, StyleRegistryService, TraitConfig as StyleTraitConfig, SubmitButtonComponentConfig, SymbolRegistryService, TARGETED_STATES, TARGETED_STATE_BASE, TOGGLE_PART_ROLES, TRIGGER_OPTIONS, TextBlockComponentConfig, ToolbarAction, ToolbarComponent, TraitConfig, TraitInputType, TypographyGroupStyleConfig, UNITS_ALL, UNITS_DEG, UNITS_FIXED, UNITS_NO_VW, VALIDATION_STATES, VALIDATION_STATE_CLASS, VideoConfig, ViewportService, ZOOM_OPTIONS, arrayItemSchemaFields, arraySchemaFields, auditNodes, bindingLabel, bindingLabels, buildCompositePreset, buildConsentPreset, buildElementStyleSpecimen, buildFieldKindPreset, buildFlavorSpecimen, buildFormPreset, buildFullStyleTraits, buildLayoutPreset, buildPalettePreset, buildPresetStyleTraits, builderCompositeFactory, canFluidise, canvasEmptyImageLabel, canvasHostDisplay, collapseColumnsProps, columnCountOf, compositeStructureFindings, defaultBuilderLabels, defaultPageSettings, deleteTabPair, displayTriggerOf, dropChildren, dropTargetLabel, duplicateTabPair, escapesRoot, essentialTraitsFor, findNodeLocation, findParentOf, flattenLayerTree, flattenSchemaFields, fluidiseProps, generateNodeId, globalCanvasLayer, hiddenAtBase, hiddenUntilItemOn, insertRefusal, insertRefusalLabel, interactionTargets, isHiddenAt, isHiddenAtRest, isPinnedGlobal, isSpecimen, itemsOnAtRest, markSpecimen, matchesControlSearch, nearestFormNode, neverShown, nodeAncestorPath, nodeAncestorPathInEither, nodeDescriptor, nodeStyleMap, overlayGlobals, pathToNode, refreshSubtree, regenerateNodeIds, removalRefusal, reorderProps, repeaterSourceAlias, repeaterSubLabel, resolveInsertTarget, resolveTraitControllerType, resolveTraitOptions, retypeNode, rootEscapeBand, rootZone, selectionRevealOf, setStyleTrait, setTrait, shortDescriptor, shownBeforeControl, sourceContentType, sourceTypeLabel, stackChildrenProps, summarise, syncEmptyImagePlaceholder, syncNodeDesign, syncNodeInputs, tabPairLabel, tabsRootForPart, textNode, upsertNodeStyles, visibilityProps, walkNodes, wrapNode };
 //# sourceMappingURL=vectoriox-iox-builder.mjs.map