@vectoriox/iox-builder 3.4.0 → 3.5.1

package/{types/vectoriox-iox-builder.d.ts → index.d.ts}

@@ -1,24 +1,24 @@
 import * as i0 from '@angular/core';
 import { ComponentRef, Type, ChangeDetectorRef, OnInit, AfterViewInit, OnChanges, OnDestroy, EventEmitter, ElementRef, ApplicationRef, SimpleChanges, ViewContainerRef, Injector, EnvironmentInjector, InjectionToken, TemplateRef, AfterContentInit, QueryList } from '@angular/core';
-import * as i27 from '@vectoriox/iox-ui';
+import * as i28 from '@vectoriox/iox-ui';
 import { RelativeSourceSpec, DataSourceEndpoints } from '@vectoriox/iox-ui';
 export { ComponentInstanceRegistryService, IoxContextSlot, SetContextParams, VIRTUAL_TRAIT_KEYS, composeVirtualTraits } from '@vectoriox/iox-ui';
 import * as rxjs from 'rxjs';
 import { Subject, Subscription, BehaviorSubject, Observable } from 'rxjs';
 import * as _vectoriox_iox_builder from '@vectoriox/iox-builder';
-import * as i22 from 'primeng/popover';
+import * as i23 from 'primeng/popover';
 import { Popover } from 'primeng/popover';
 import { HttpClient } from '@angular/common/http';
-import * as i19 from '@angular/cdk/drag-drop';
+import * as i20 from '@angular/cdk/drag-drop';
 import { CdkDragDrop } from '@angular/cdk/drag-drop';
-import * as i17 from '@angular/common';
-import * as i18 from '@angular/forms';
-import * as i20 from 'primeng/accordion';
-import * as i21 from 'primeng/button';
-import * as i23 from 'primeng/inputtext';
-import * as i24 from 'primeng/select';
-import * as i25 from 'primeng/tooltip';
-import * as i26 from 'primeng/dialog';
+import * as i18 from '@angular/common';
+import * as i19 from '@angular/forms';
+import * as i21 from 'primeng/accordion';
+import * as i22 from 'primeng/button';
+import * as i24 from 'primeng/inputtext';
+import * as i25 from 'primeng/select';
+import * as i26 from 'primeng/tooltip';
+import * as i27 from 'primeng/dialog';
 
 declare enum StyleCategory {
     Layout = "Layout",
@@ -1375,6 +1375,9 @@ declare class BuilderComponent implements OnInit, AfterViewInit, OnChanges, OnDe
     activeZoom: number;
     activeScreenWidth: number;
     selectedItem: ComponentNode | null;
+    /** Root → selected node. Drives the breadcrumb bar. Recomputed on every selection
+     *  change (never a getter — see `_emitElementSelect`). */
+    selectedPath: ComponentNode[];
     isDragging: boolean;
     scrollThumbTop: number;
     scrollThumbHeight: number;
@@ -1477,6 +1480,11 @@ declare class BuilderComponent implements OnInit, AfterViewInit, OnChanges, OnDe
     handleMouseEnter(event: any): void;
     handleMouseLeave(): void;
     handleCanvasClick(): void;
+    /** Breadcrumb crumb clicked — select that ancestor. Mirrors a layer-tree click. */
+    onCrumbSelect(node: ComponentNode): void;
+    /** Breadcrumb crumb hovered (or `null` on leave) — outline it on the canvas so the chain
+     *  is readable without clicking through it. */
+    onCrumbPeek(node: ComponentNode | null): void;
     onTreeNodeSelect(node: ComponentNode): void;
     onTreeNodeAction(event: {
         action: NodeAction;
@@ -1502,6 +1510,9 @@ declare class BuilderComponent implements OnInit, AfterViewInit, OnChanges, OnDe
         scrollPercentage?: number;
     }): void;
     private findNodeInTree;
+    /** Immediate parent of `target` within `children`, or null at a root. Derives from the
+     *  shared `nodeAncestorPath` walk in `utils/node-path.util.ts` — one tree recursion to
+     *  keep correct, not one per caller. */
     private findParentNode;
     /** Returns the closest ancestor (or self) of `target` that has a `symbolId`. */
     private findSymbolAncestorOf;
@@ -2280,9 +2291,55 @@ declare class LayerTreeComponent implements OnInit, OnDestroy {
     static ɵcmp: i0.ɵɵComponentDeclaration<LayerTreeComponent, "app-layer-tree", never, { "layout": { "alias": "layout"; "required": false; }; "globalElements": { "alias": "globalElements"; "required": false; }; }, { "nodeSelect": "nodeSelect"; "nodeAction": "nodeAction"; "nodeMove": "nodeMove"; }, never, never, false, never>;
 }
 
+/** One rendered crumb — precomputed so the template binds fields, never method calls. */
+interface Crumb {
+    node: ComponentNode;
+    label: string;
+    /** True for the last crumb (the selected node itself). */
+    isCurrent: boolean;
+}
+/** A state badge shown on the right of the bar for the selected node. */
+interface SelectionBadge {
+    icon: string;
+    label: string;
+    title: string;
+}
+/**
+ * The element path bar — the full ancestor chain of the selected node, clickable,
+ * plus a badge for each piece of node state that otherwise only surfaces by opening
+ * a different panel (bound / symbol / preset / interactions / global).
+ *
+ * Presentational: it holds no tree and does no lookups. The builder computes the path
+ * (see `utils/node-path.util.ts`) and passes it in.
+ *
+ * See iox-ai-guidance `architecture/builder/builder-usability-plan.md` (B1).
+ */
+declare class BreadcrumbBarComponent {
+    /** Root → selected node. Empty when nothing is selected. */
+    set path(value: ComponentNode[] | null | undefined);
+    /** Emitted when a crumb is clicked — the builder selects that node. */
+    nodeSelect: EventEmitter<ComponentNode>;
+    /** Emitted on crumb hover (and `null` on leave) — the builder outlines it on canvas. */
+    nodePeek: EventEmitter<ComponentNode | null>;
+    crumbs: Crumb[];
+    badges: SelectionBadge[];
+    trackCrumb(_index: number, crumb: Crumb): ComponentNode;
+    trackBadge(_index: number, badge: SelectionBadge): string;
+    onSelect(crumb: Crumb): void;
+    onPeek(crumb: Crumb): void;
+    onPeekEnd(): void;
+    /**
+     * Node state that today is only discoverable by visiting another panel. Built as a
+     * data table rather than a chain of ifs so a new badge is one row.
+     */
+    private buildBadges;
+    static ɵfac: i0.ɵɵFactoryDeclaration<BreadcrumbBarComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<BreadcrumbBarComponent, "app-breadcrumb-bar", never, { "path": { "alias": "path"; "required": false; }; }, { "nodeSelect": "nodeSelect"; "nodePeek": "nodePeek"; }, never, never, false, never>;
+}
+
 declare class IoxBuilderModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<IoxBuilderModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<IoxBuilderModule, [typeof BuilderComponent, typeof RenderDirective, typeof IoxDraggableDirective, typeof IoxDropzoneDirective, typeof OverlayComponent, typeof ToolbarComponent, typeof SectionComponent, typeof BuilderContainerComponent, typeof BuilderLinkedContainerComponent, typeof BuilderRepeaterComponent, typeof BuilderButtonBlockComponent, typeof SliderContainerComponent, typeof SliderSlideComponent, typeof PanelComponent, typeof PanelChildComponent, typeof LayerTreeComponent], [typeof i17.CommonModule, typeof i18.FormsModule, typeof i19.DragDropModule, typeof i20.AccordionModule, typeof i21.ButtonModule, typeof i22.PopoverModule, typeof i23.InputTextModule, typeof i24.SelectModule, typeof i25.TooltipModule, typeof i26.DialogModule, typeof i27.IoxPageModule], [typeof i17.CommonModule, typeof i18.FormsModule, typeof i19.DragDropModule, typeof i20.AccordionModule, typeof i21.ButtonModule, typeof i22.PopoverModule, typeof i23.InputTextModule, typeof i24.SelectModule, typeof i25.TooltipModule, typeof i26.DialogModule, typeof i27.IoxPageModule, typeof BuilderComponent, typeof RenderDirective, typeof IoxDraggableDirective, typeof IoxDropzoneDirective, typeof OverlayComponent, typeof ToolbarComponent, typeof SectionComponent, typeof BuilderContainerComponent, typeof BuilderLinkedContainerComponent, typeof BuilderRepeaterComponent, typeof BuilderButtonBlockComponent, typeof SliderContainerComponent, typeof SliderSlideComponent, typeof PanelComponent, typeof PanelChildComponent, typeof LayerTreeComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<IoxBuilderModule, [typeof BuilderComponent, typeof RenderDirective, typeof IoxDraggableDirective, typeof IoxDropzoneDirective, typeof OverlayComponent, typeof ToolbarComponent, typeof SectionComponent, typeof BuilderContainerComponent, typeof BuilderLinkedContainerComponent, typeof BuilderRepeaterComponent, typeof BuilderButtonBlockComponent, typeof SliderContainerComponent, typeof SliderSlideComponent, typeof PanelComponent, typeof PanelChildComponent, typeof LayerTreeComponent, typeof BreadcrumbBarComponent], [typeof i18.CommonModule, typeof i19.FormsModule, typeof i20.DragDropModule, typeof i21.AccordionModule, typeof i22.ButtonModule, typeof i23.PopoverModule, typeof i24.InputTextModule, typeof i25.SelectModule, typeof i26.TooltipModule, typeof i27.DialogModule, typeof i28.IoxPageModule], [typeof i18.CommonModule, typeof i19.FormsModule, typeof i20.DragDropModule, typeof i21.AccordionModule, typeof i22.ButtonModule, typeof i23.PopoverModule, typeof i24.InputTextModule, typeof i25.SelectModule, typeof i26.TooltipModule, typeof i27.DialogModule, typeof i28.IoxPageModule, typeof BuilderComponent, typeof RenderDirective, typeof IoxDraggableDirective, typeof IoxDropzoneDirective, typeof OverlayComponent, typeof ToolbarComponent, typeof SectionComponent, typeof BuilderContainerComponent, typeof BuilderLinkedContainerComponent, typeof BuilderRepeaterComponent, typeof BuilderButtonBlockComponent, typeof SliderContainerComponent, typeof SliderSlideComponent, typeof PanelComponent, typeof PanelChildComponent, typeof LayerTreeComponent, typeof BreadcrumbBarComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<IoxBuilderModule>;
 }
 
@@ -2360,6 +2417,45 @@ interface IoxFontManager {
     }[];
 }
 
+/**
+ * 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`.
+ */
+/** Minimal shape these helpers need — any node with optional children. */
+interface TreePathNode {
+    children?: TreePathNode[] | null;
+}
+/**
+ * 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.
+ */
+declare function nodeAncestorPath<T extends TreePathNode>(roots: readonly T[] | null | undefined, target: T | null | undefined): T[] | 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.
+ */
+declare function findParentOf<T extends TreePathNode>(roots: readonly T[] | null | undefined, target: T | null | undefined): T | 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.
+ */
+declare function nodeAncestorPathInEither<T extends TreePathNode>(layout: readonly T[] | null | undefined, globalElements: readonly T[] | null | undefined, target: T | null | undefined): T[] | null;
+
 declare class BuilderButtonComponentConfig extends ComponentConfig {
     constructor();
 }
@@ -2448,5 +2544,5 @@ declare class TextBlockComponentConfig extends ComponentConfig {
     constructor();
 }
 
-export { ACTION_TYPE_OPTIONS, BackgroundGroupStyleConfig, BorderGroupStyleConfig, BuilderButtonBlockComponent, BuilderButtonComponentConfig, BuilderClipboardService, BuilderComponent, BuilderContainerComponent, BuilderContainerComponentConfig, BuilderDataSourceService, BuilderDividerComponentConfig, BuilderHeadingComponentConfig, BuilderHistoryService, BuilderIconComponentConfig, BuilderImageComponentConfig, BuilderLinkComponentConfig, BuilderLinkedContainerComponent, BuilderLinkedContainerConfig, BuilderListComponentConfig, BuilderListItemComponentConfig, BuilderMode, BuilderRepeaterComponent, BuilderSpacerComponentConfig, ButtonBlockComponentConfig, CardComponentConfig, ChildLayoutGroupStyleConfig, ComponentConfig, ComponentRegistryService, DEVICE_OPTIONS, DRAG_HANDLE_ATTR, DataSourceRegistryService, DataSourceType, DeviceMode, DimensionsGroupStyleConfig, DragEngineService, EASING_OPTIONS, EffectsGroupStyleConfig, GalleryConfig, GroupStyleConfig, INTERACTION_STATES, INVERSE_ACTION, IOX_DATA_SOURCE_ENDPOINTS, IOX_FONT_MANAGER, InteractionEngineService, InteractionPresetRegistryService, IoxBuilderModule, IoxDraggableDirective, IoxDropzoneDirective, LayerTreeComponent, LayoutGroupStyleConfig, ListGroupStyleConfig, NodeAction, OverlayComponent, OverlayService, PanelChildComponent, PanelComponent, PanelEventService, PanelEventTypes, PanelTypes, PositionGroupStyleConfig, PresetRegistryService, RELATIONAL_STATES, RELATIONAL_STATE_BASE, ROUTE_ANIMATION_OPTIONS, RenderDirective, RepeaterComponentConfig, SCREEN_WIDTH_OPTIONS, STRUCTURAL_STATES, SUPPORTED_STATES, SectionComponent, SectionComponentConfig, SizeGroupStyleConfig, SliderContainerComponent, SliderContainerConfig, SliderSlideComponent, SliderSlideConfig, SpacingGroupStyleConfig, StyleCategory, StyleRegistryService, TraitConfig as StyleTraitConfig, SymbolRegistryService, TARGETED_STATES, TARGETED_STATE_BASE, TRIGGER_OPTIONS, TextBlockComponentConfig, ToolbarAction, ToolbarComponent, TraitConfig, TraitInputType, TypographyGroupStyleConfig, UNITS_ALL, UNITS_DEG, UNITS_FIXED, UNITS_NO_VW, ViewportService, ZOOM_OPTIONS, arrayItemSchemaFields, arraySchemaFields, buildFullStyleTraits, buildPresetStyleTraits, defaultPageSettings, findNodeLocation, flattenSchemaFields, generateNodeId, resolveTraitControllerType, resolveTraitOptions, wrapNode };
-export type { BuilderClipboard, ComponentEventDef, ComponentMethodDef, ComponentNode, ComponentTrait, DeviceOption, DragPayload, DsFilterByQueryParam, DsFilterByRouteParam, ElementState, HistoryEntry, InteractionAction, InteractionActionType, InteractionPreset, InteractionTrigger, IoxBinding, IoxDataSource, IoxDropEvent, IoxFontManager, IoxInteraction, IoxSymbol, NodeRef, OverlayBoxModel, OverlayBoxSpacing, OverlayEntry, PageRouteAnimationSettings, PageScrollSettings, PageSettings, PageStyleSettings, PanelEvent, QuadSizeSegment, RouteAnimationPreset, ScreenWidthOption, StylePreset, StyleTrait, StyleTraitGroup, TraitOptionMap, TraitSelectOption, TraitShowCondition, ViewportState, ZoomOption };
+export { ACTION_TYPE_OPTIONS, BackgroundGroupStyleConfig, BorderGroupStyleConfig, BreadcrumbBarComponent, BuilderButtonBlockComponent, BuilderButtonComponentConfig, BuilderClipboardService, BuilderComponent, BuilderContainerComponent, BuilderContainerComponentConfig, BuilderDataSourceService, BuilderDividerComponentConfig, BuilderHeadingComponentConfig, BuilderHistoryService, BuilderIconComponentConfig, BuilderImageComponentConfig, BuilderLinkComponentConfig, BuilderLinkedContainerComponent, BuilderLinkedContainerConfig, BuilderListComponentConfig, BuilderListItemComponentConfig, BuilderMode, BuilderRepeaterComponent, BuilderSpacerComponentConfig, ButtonBlockComponentConfig, CardComponentConfig, ChildLayoutGroupStyleConfig, ComponentConfig, ComponentRegistryService, DEVICE_OPTIONS, DRAG_HANDLE_ATTR, DataSourceRegistryService, DataSourceType, DeviceMode, DimensionsGroupStyleConfig, DragEngineService, EASING_OPTIONS, EffectsGroupStyleConfig, GalleryConfig, GroupStyleConfig, INTERACTION_STATES, INVERSE_ACTION, IOX_DATA_SOURCE_ENDPOINTS, IOX_FONT_MANAGER, InteractionEngineService, InteractionPresetRegistryService, IoxBuilderModule, IoxDraggableDirective, IoxDropzoneDirective, LayerTreeComponent, LayoutGroupStyleConfig, ListGroupStyleConfig, NodeAction, OverlayComponent, OverlayService, PanelChildComponent, PanelComponent, PanelEventService, PanelEventTypes, PanelTypes, PositionGroupStyleConfig, PresetRegistryService, RELATIONAL_STATES, RELATIONAL_STATE_BASE, ROUTE_ANIMATION_OPTIONS, RenderDirective, RepeaterComponentConfig, SCREEN_WIDTH_OPTIONS, STRUCTURAL_STATES, SUPPORTED_STATES, SectionComponent, SectionComponentConfig, SizeGroupStyleConfig, SliderContainerComponent, SliderContainerConfig, SliderSlideComponent, SliderSlideConfig, SpacingGroupStyleConfig, StyleCategory, StyleRegistryService, TraitConfig as StyleTraitConfig, SymbolRegistryService, TARGETED_STATES, TARGETED_STATE_BASE, TRIGGER_OPTIONS, TextBlockComponentConfig, ToolbarAction, ToolbarComponent, TraitConfig, TraitInputType, TypographyGroupStyleConfig, UNITS_ALL, UNITS_DEG, UNITS_FIXED, UNITS_NO_VW, ViewportService, ZOOM_OPTIONS, arrayItemSchemaFields, arraySchemaFields, buildFullStyleTraits, buildPresetStyleTraits, defaultPageSettings, findNodeLocation, findParentOf, flattenSchemaFields, generateNodeId, nodeAncestorPath, nodeAncestorPathInEither, resolveTraitControllerType, resolveTraitOptions, wrapNode };
+export type { BuilderClipboard, ComponentEventDef, ComponentMethodDef, ComponentNode, ComponentTrait, Crumb, DeviceOption, DragPayload, DsFilterByQueryParam, DsFilterByRouteParam, ElementState, HistoryEntry, InteractionAction, InteractionActionType, InteractionPreset, InteractionTrigger, IoxBinding, IoxDataSource, IoxDropEvent, IoxFontManager, IoxInteraction, IoxSymbol, NodeRef, OverlayBoxModel, OverlayBoxSpacing, OverlayEntry, PageRouteAnimationSettings, PageScrollSettings, PageSettings, PageStyleSettings, PanelEvent, QuadSizeSegment, RouteAnimationPreset, ScreenWidthOption, SelectionBadge, StylePreset, StyleTrait, StyleTraitGroup, TraitOptionMap, TraitSelectOption, TraitShowCondition, TreePathNode, ViewportState, ZoomOption };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vectoriox/iox-builder",
-  "version": "3.4.0",
+  "version": "3.5.1",
   "peerDependencies": {
     "@angular/common": ">=20.0.0",
     "@angular/core": ">=20.0.0",
@@ -18,15 +18,14 @@
   },
   "sideEffects": false,
   "module": "fesm2022/vectoriox-iox-builder.mjs",
-  "typings": "types/vectoriox-iox-builder.d.ts",
+  "typings": "index.d.ts",
   "exports": {
     "./package.json": {
       "default": "./package.json"
     },
     ".": {
-      "types": "./types/vectoriox-iox-builder.d.ts",
+      "types": "./index.d.ts",
       "default": "./fesm2022/vectoriox-iox-builder.mjs"
     }
-  },
-  "type": "module"
+  }
 }