@almadar/ui 5.111.0 → 5.113.0

package/dist/components/avl/lib/avl-behavior-compose-converter.d.ts

@@ -1,55 +0,0 @@
-/**
- * AVL Behavior Compose Converter
- *
- * Converts BehaviorCanvasEntry[] to React Flow nodes and edges
- * for the behavior-level composition canvas.
- *
- * Parallel to avl-preview-converter.ts which works at the orbital level.
- * This works one level higher: each node is a behavior (not an orbital).
- */
-import type { Node, Edge } from '@xyflow/react';
-import type { BehaviorCanvasEntry, BehaviorComposeNodeData, BehaviorWireEdgeData } from '../types/avl-behavior-compose-types';
-/**
- * Build a React Flow graph for behavior-level composition.
- * Each behavior entry becomes one BehaviorComposeNode.
- */
-export declare function behaviorsToComposeGraph(entries: BehaviorCanvasEntry[], wires: BehaviorWireEdgeData[], layoutHint?: 'pipeline' | 'grid'): {
-    nodes: Node<BehaviorComposeNodeData>[];
-    edges: Edge<BehaviorWireEdgeData>[];
-};
-/** Registry record shape (matches behaviors-registry.json entries). */
-export interface BehaviorRegistryRecord {
-    name: string;
-    level: 'atom' | 'molecule' | 'organism';
-    family: string;
-    layer: string;
-    description: string;
-    complexity: {
-        states: number;
-        events: number;
-        transitions: number;
-    };
-    defaultEntity: {
-        name: string;
-        persistence?: string;
-        fields: Array<{
-            name: string;
-            type: string;
-            required?: boolean;
-        }>;
-    };
-    connectableEvents: string[];
-    eventPayloads: {
-        [k: string]: Array<{
-            name: string;
-            type: string;
-            required?: boolean;
-        }>;
-    };
-    composableWith: string[];
-}
-/**
- * Convert a registry entry to a BehaviorCanvasEntry.
- * Maps connectableEvents + eventPayloads into typed ConnectableEvent[].
- */
-export declare function registryEntryToCanvasEntry(entry: BehaviorRegistryRecord, orbitalNames: string[]): BehaviorCanvasEntry;

package/dist/components/avl/lib/avl-elk-layout.d.ts

@@ -1,55 +0,0 @@
-/**
- * AVL ELK Layout
- *
- * Shared ELK-based layout engine for state machines. Extracted from
- * AvlTraitScene so both the V2 scene renderer and the V3 BehaviorView
- * can share the same layout computation.
- */
-import { type StateRole } from '../types/avl-atom-types';
-import type { TraitLevelData } from './avl-schema-parser';
-export interface LayoutNode {
-    id: string;
-    x: number;
-    y: number;
-    width: number;
-    height: number;
-    isInitial?: boolean;
-    isTerminal?: boolean;
-    role: StateRole;
-    transitionCount: number;
-}
-export interface LayoutEdge {
-    id: string;
-    from: string;
-    to: string;
-    event: string;
-    effects: Array<{
-        type: string;
-    }>;
-    guard: boolean;
-    guardExpr?: string;
-    index: number;
-    labelX: number;
-    labelY: number;
-    labelW: number;
-    labelH: number;
-    points: Array<{
-        x: number;
-        y: number;
-    }>;
-    isSelf: boolean;
-    isBackward: boolean;
-}
-export interface ElkLayout {
-    nodes: LayoutNode[];
-    edges: LayoutEdge[];
-    width: number;
-    height: number;
-}
-export declare function stateWidth(transitionCount: number): number;
-export declare const STATE_H = 40;
-export declare function computeTraitLayout(data: TraitLevelData): Promise<ElkLayout>;
-export declare function edgePath(points: Array<{
-    x: number;
-    y: number;
-}>): string;

package/dist/components/avl/lib/avl-flow-converter.d.ts

@@ -1,17 +0,0 @@
-/**
- * AVL Flow Converter
- *
- * Converts an OrbitalSchema into React Flow nodes and edges
- * for the unified AVL canvas. Reuses the existing AVL schema parser.
- */
-import type { Node, Edge } from '@xyflow/react';
-import type { OrbitalSchema } from '@almadar/core';
-import type { AvlNodeData, AvlEdgeData } from '../types/avl-canvas-types';
-/**
- * Transform an OrbitalSchema into React Flow nodes and edges.
- * Pre-parses all orbital and trait details for responsive zoom.
- */
-export declare function schemaToFlowGraph(schema: OrbitalSchema): {
-    nodes: Node<AvlNodeData>[];
-    edges: Edge<AvlEdgeData>[];
-};

package/dist/components/avl/lib/avl-layout.d.ts

@@ -1,32 +0,0 @@
-/**
- * AVL layout utilities for positioning atoms in composed diagrams.
- */
-/** Distribute N points evenly around a ring.
- *  Handles edge cases: 1 state (centered), 2 states (horizontal). */
-export declare function ringPositions(cx: number, cy: number, r: number, count: number, startAngle?: number): Array<{
-    x: number;
-    y: number;
-    angle: number;
-}>;
-/** Create an SVG arc path between two angles on a circle. */
-export declare function arcPath(cx: number, cy: number, r: number, startAngle: number, endAngle: number): string;
-/** Distribute N points radially from a center. */
-export declare function radialPositions(cx: number, cy: number, innerR: number, outerR: number, count: number, startAngle?: number): Array<{
-    x1: number;
-    y1: number;
-    x2: number;
-    y2: number;
-    angle: number;
-}>;
-/** Simple grid layout: position items in columns and rows. */
-export declare function gridPositions(startX: number, startY: number, cols: number, cellWidth: number, cellHeight: number, count: number): Array<{
-    x: number;
-    y: number;
-    col: number;
-    row: number;
-}>;
-/** Compute a quadratic bezier control point offset perpendicular to the line. */
-export declare function curveControlPoint(x1: number, y1: number, x2: number, y2: number, offset: number): {
-    cpx: number;
-    cpy: number;
-};

package/dist/components/avl/lib/avl-preview-converter.d.ts

@@ -1,71 +0,0 @@
-/**
- * AVL Preview Converter
- *
- * Extracts render-ui pattern configs from OrbitalSchema transitions
- * and builds React Flow graphs for the two FlowCanvas levels:
- *   - Overview: one node per orbital (INIT transition UI)
- *   - Expanded: one node per UI state within an orbital
- *
- * Key feature: detects interactive elements (buttons, links) inside
- * patterns that fire events. These become per-element source handles
- * so edges connect from the specific trigger element to the target screen.
- *
- * Uses @almadar/core types for schema-level constructs.
- */
-import type { Node, Edge } from '@xyflow/react';
-import type { OrbitalSchema, EntityData } from '@almadar/core';
-import type { PreviewNodeData, EventEdgeData, ScreenSize } from '../types/avl-preview-types';
-/**
- * Build a React Flow graph for the overview level.
- * Each orbital gets one node showing its INIT transition's UI.
- */
-export declare function schemaToOverviewGraph(schema: OrbitalSchema, mockData?: EntityData, behaviorMeta?: Record<string, {
-    layer: string;
-}>, layoutHint?: 'pipeline' | 'grid', orbitalStatus?: Record<string, PreviewNodeData['status']>, screenSize?: ScreenSize): {
-    nodes: Node<PreviewNodeData>[];
-    edges: Edge<EventEdgeData>[];
-};
-/**
- * Build a React Flow graph for the L2 (expanded) level.
- *
- * Organism-authored traits (no `sourceBehavior` metadata) emit one
- * transition card per render-ui-bearing transition (the historical
- * behavior). Imported traits (cloned by the inline phase from `uses[]`)
- * collapse into one grouped card per `sourceBehavior.alias`, so the user
- * sees `Stats`, `Graphs`, `Layout`, etc. as single cards rather than 9
- * anonymous `INIT` peers (STUDIO-1). Drill into a grouped card to reach
- * L3 (`orbitalAliasToExpandedGraph`).
- */
-export declare function orbitalToExpandedGraph(schema: OrbitalSchema, orbitalName: string, mockData?: EntityData, screenSize?: ScreenSize): {
-    nodes: Node<PreviewNodeData>[];
-    edges: Edge<EventEdgeData>[];
-};
-/**
- * Build a React Flow graph for the L3 (`behavior-expanded`) level: drill
- * into one imported-behavior alias on an orbital and show ITS render-ui
- * transitions as individual cards. Same converter logic as
- * `orbitalToExpandedGraph` but scoped to traits where
- * `sourceBehavior.alias === alias`. STUDIO-1.
- */
-export declare function orbitalAliasToExpandedGraph(schema: OrbitalSchema, orbitalName: string, alias: string, mockData?: EntityData, screenSize?: ScreenSize): {
-    nodes: Node<PreviewNodeData>[];
-    edges: Edge<EventEdgeData>[];
-};
-/**
- * Build a React Flow graph for the `trait-expanded` level: one node per
- * trait of `orbitalName`, with intra-orbital `emits → listens` edges
- * between trait cards (an emit on trait A connects to a listen for the
- * same event on trait B in the same orbital).
- *
- * Used by the cosmic tab at L3 (after the user drills into an orbital
- * from the L1 grid). The canvas tab does not call this today; the new
- * level is opt-in via `initialLevel="trait-expanded"`.
- *
- * Layout: grid (`ceil(sqrt(N))` cols). Nodes are `type: 'traitCard'`
- * with `data.kind === 'trait-card'` so `FlowCanvas`'s NODE_TYPES routes
- * them to `TraitCardNode`.
- */
-export declare function orbitalToTraitGraph(schema: OrbitalSchema, orbitalName: string, _mockData?: EntityData): {
-    nodes: Node<PreviewNodeData>[];
-    edges: Edge<EventEdgeData>[];
-};

package/dist/components/avl/lib/avl-schema-parser.d.ts

@@ -1,128 +0,0 @@
-/**
- * AVL Schema Parser
- *
- * Pure functions that transform an OrbitalSchema into structured data
- * for each zoom level of the Cosmic Zoom visualization.
- *
- * Imports all types from @almadar/core.
- *
- * @packageDocumentation
- */
-import type { OrbitalSchema, JsonValue, JsonObject } from '@almadar/core';
-interface SerializedEffect extends JsonObject {
-    type: string;
-    args: JsonValue[];
-}
-export interface ApplicationOrbitalData {
-    name: string;
-    entityName: string;
-    fieldCount: number;
-    persistence: string;
-    traitNames: string[];
-    pageNames: string[];
-    position: {
-        x: number;
-        y: number;
-    };
-}
-export interface CrossLink {
-    emitterOrbital: string;
-    listenerOrbital: string;
-    eventName: string;
-    emitterTrait: string;
-    listenerTrait: string;
-}
-export interface ApplicationLevelData {
-    orbitals: ApplicationOrbitalData[];
-    crossLinks: CrossLink[];
-}
-export interface FieldInfo extends JsonObject {
-    name: string;
-    type: string;
-    required: boolean;
-    hasDefault: boolean;
-}
-export interface OrbitalTraitInfo extends JsonObject {
-    name: string;
-    stateCount: number;
-    eventCount: number;
-    transitionCount: number;
-    emits: string[];
-    listens: string[];
-}
-export interface OrbitalPageInfo extends JsonObject {
-    name: string;
-    route: string;
-}
-export interface ExternalLink extends JsonObject {
-    targetOrbital: string;
-    eventName: string;
-    direction: string;
-    traitName: string;
-}
-export interface OrbitalLevelData {
-    name: string;
-    entity: {
-        name: string;
-        fields: FieldInfo[];
-        persistence: string;
-    };
-    traits: OrbitalTraitInfo[];
-    pages: OrbitalPageInfo[];
-    externalLinks: ExternalLink[];
-}
-export interface TraitStateInfo extends JsonObject {
-    name: string;
-    isInitial: boolean | null;
-    isTerminal: boolean | null;
-}
-export interface TraitTransitionInfo extends JsonObject {
-    from: string;
-    to: string;
-    event: string;
-    guard: JsonValue | null;
-    effects: SerializedEffect[];
-    index: number;
-}
-export interface TraitLevelData extends JsonObject {
-    name: string;
-    linkedEntity: string;
-    states: TraitStateInfo[];
-    transitions: TraitTransitionInfo[];
-    emittedEvents: string[];
-    listenedEvents: string[];
-}
-export interface ExprTreeNode {
-    label: string;
-    type: 'operator' | 'literal' | 'binding';
-    children?: ExprTreeNode[];
-}
-export interface SlotTarget {
-    name: string;
-    pattern: string;
-}
-export interface TransitionLevelData {
-    from: string;
-    to: string;
-    event: string;
-    guard: ExprTreeNode | null;
-    effects: ExprTreeNode[];
-    slotTargets: SlotTarget[];
-}
-/**
- * Parse the application-level view: all orbitals with cross-orbital links.
- */
-export declare function parseApplicationLevel(schema: OrbitalSchema): ApplicationLevelData;
-/**
- * Parse a single orbital's detail view.
- */
-export declare function parseOrbitalLevel(schema: OrbitalSchema, orbitalName: string): OrbitalLevelData | null;
-/**
- * Parse a trait's state machine for the detail view.
- */
-export declare function parseTraitLevel(schema: OrbitalSchema, orbitalName: string, traitName: string): TraitLevelData | null;
-/**
- * Parse a single transition for the detail view.
- */
-export declare function parseTransitionLevel(schema: OrbitalSchema, orbitalName: string, traitName: string, transitionIndex: number): TransitionLevelData | null;
-export {};

package/dist/components/avl/lib/avl-story-schemas.d.ts

@@ -1,34 +0,0 @@
-/**
- * Shared test schemas for AVL V3 Storybook stories.
- *
- * Uses real behavior functions from @almadar/std to generate
- * OrbitalSchemas with actual state machines, fields, and pages.
- */
-import type { OrbitalSchema } from '@almadar/core';
-/**
- * Clinic schema: 2 orbitals with real state machines.
- * - PatientOrbital (std-wizard): multi-step form with 5 fields
- * - QueueEntryOrbital (std-browse): data grid with 4 fields
- */
-export declare const CLINIC_SCHEMA: OrbitalSchema;
-/**
- * Task manager schema: 3 orbitals for a richer multi-module story.
- * - TaskOrbital (std-browse): task list
- * - FocusTimer (std-list): focus session list
- * - ArchiveOrbital (std-confirmation): archive confirmation
- */
-export declare const TASK_SCHEMA: OrbitalSchema;
-/** Pre-computed React Flow graph for the clinic schema. */
-export declare const CLINIC_GRAPH: {
-    nodes: import("@xyflow/react").Node<import("../molecules").AvlNodeData>[];
-    edges: import("@xyflow/react").Edge<import("../molecules").AvlEdgeData>[];
-};
-/** Pre-computed React Flow graph for the task schema. */
-export declare const TASK_GRAPH: {
-    nodes: import("@xyflow/react").Node<import("../molecules").AvlNodeData>[];
-    edges: import("@xyflow/react").Edge<import("../molecules").AvlEdgeData>[];
-};
-/** First orbital's detail for ModuleCard/SystemNode stories. */
-export declare const CLINIC_FIRST_ORBITAL: import("./avl-schema-parser").OrbitalLevelData | null;
-/** First trait detail for BehaviorView/DetailView stories. */
-export declare function getClinicFirstTrait(): import("./avl-schema-parser").TraitLevelData | null;

package/dist/components/avl/lib/avl-zoom-band.d.ts

@@ -1,19 +0,0 @@
-/**
- * AVL Zoom Band
- *
- * Continuous semantic zoom for the unified AVL canvas.
- * React Flow nodes read the current zoom band from context
- * and switch their rendering accordingly.
- */
-import { type ZoomBand } from '../types/avl-canvas-types';
-/** Determine which zoom band the current viewport zoom falls into. */
-export declare function computeZoomBand(zoom: number): ZoomBand;
-/**
- * Compute progress (0..1) within a zoom band.
- * Useful for crossfade transitions between bands.
- */
-export declare function zoomProgress(zoom: number, band: ZoomBand): number;
-/** Context providing the current zoom band to all node components. */
-export declare const ZoomBandContext: import("react").Context<ZoomBand>;
-/** Hook to read the current zoom band. */
-export declare function useZoomBand(): ZoomBand;

package/dist/components/avl/lib/avl-zoom-state.d.ts

@@ -1,72 +0,0 @@
-/**
- * AVL Cosmic Zoom State Machine
- *
- * useReducer-based state machine managing which zoom level is displayed,
- * what is selected, and animation state.
- *
- * Shared by AvlOrbitalsCosmicZoom (2D) and Avl3DViewer (3D). The 3D
- * viewer drills through every level (`application → orbital → trait →
- * transition`); the 2D cosmic view skips the `'orbital'` level after
- * COSMIC-1 (no Orbital-View screen) by dispatching `JUMP_TO_TRAIT_CIRCUIT`
- * to land directly at `'trait'`.
- *
- * @packageDocumentation
- */
-export type ZoomLevel = 'application' | 'orbital' | 'trait' | 'transition';
-export interface ZoomState {
-    level: ZoomLevel;
-    selectedOrbital: string | null;
-    selectedTrait: string | null;
-    selectedTransition: number | null;
-    animating: boolean;
-    animationDirection: 'in' | 'out';
-    animationTarget: {
-        x: number;
-        y: number;
-        scale: number;
-    } | null;
-}
-export type ZoomAction = {
-    type: 'ZOOM_INTO_ORBITAL';
-    orbital: string;
-    targetPosition: {
-        x: number;
-        y: number;
-    };
-} | {
-    type: 'ZOOM_INTO_TRAIT';
-    trait: string;
-    targetPosition: {
-        x: number;
-        y: number;
-    };
-} | {
-    type: 'ZOOM_INTO_TRANSITION';
-    transitionIndex: number;
-    targetPosition: {
-        x: number;
-        y: number;
-    };
-} | {
-    type: 'ZOOM_OUT';
-} | {
-    type: 'ANIMATION_COMPLETE';
-} | {
-    type: 'RESET';
-} | {
-    type: 'SWITCH_TRAIT';
-    trait: string;
-} | {
-    type: 'JUMP_TO_TRAIT_CIRCUIT';
-    orbital: string;
-} | {
-    type: 'SELECT_TRAIT';
-    trait: string;
-};
-export declare const initialZoomState: ZoomState;
-export declare function zoomReducer(state: ZoomState, action: ZoomAction): ZoomState;
-export interface BreadcrumbSegment {
-    label: string;
-    level: ZoomLevel;
-}
-export declare function getBreadcrumbs(state: ZoomState): BreadcrumbSegment[];

package/dist/components/avl/lib/derive-edit-focus.d.ts

@@ -1,8 +0,0 @@
-import type { EditFocus } from '@almadar/core';
-/**
- * Build an `EditFocus` from a clicked element's `data-orb-*` address (stamped by
- * UISlotRenderer). The owning orbital is read from the DOM (`data-orb-orbital`,
- * walking up via `closest` when the clicked node itself doesn't carry it); since
- * `EditFocus.orbital` is required, returns `null` when it can't be resolved.
- */
-export declare function deriveEditFocusFromElement(el: HTMLElement): EditFocus | null;

package/dist/components/avl/lib/wire-validation.d.ts

@@ -1,30 +0,0 @@
-/**
- * Wire Validation
- *
- * Validates event wire compatibility between behaviors based on typed payloads.
- * Used by FlowCanvas when the user drags between event handles.
- */
-export interface PayloadField {
-    name: string;
-    type: string;
-    required?: boolean;
-}
-export interface WireValidationResult {
-    valid: boolean;
-    warnings: string[];
-}
-/**
- * Validate that a wire between two event handles is payload-compatible.
- *
- * Rules:
- * - If neither side declares a payload, the wire is valid (no data contract).
- * - If source has payload but target doesn't, valid with info (data is unused).
- * - If target expects required fields that source doesn't provide, warn.
- * - If both have fields with the same name but different types, warn.
- */
-export declare function validateWire(sourcePayload: PayloadField[] | undefined, targetPayload: PayloadField[] | undefined): WireValidationResult;
-/**
- * Format payload fields into a tooltip string.
- * Example: "{ data: object (req), query: string }"
- */
-export declare function formatPayloadTooltip(fields: PayloadField[]): string;

package/dist/components/avl/molecules/Avl3DCrossWire.d.ts

@@ -1,22 +0,0 @@
-/**
- * Avl3DCrossWire - Inter-orbital event connection tube.
- *
- * Renders a curved tube between two orbitals representing
- * a cross-orbital emit/listen event connection.
- *
- * @packageDocumentation
- */
-import React from 'react';
-export interface Avl3DCrossWireProps {
-    /** Start position [x, y, z] */
-    from: [number, number, number];
-    /** End position [x, y, z] */
-    to: [number, number, number];
-    /** Event name to display */
-    eventName: string;
-    /** Wire color override */
-    color?: string;
-    /** CSS class */
-    className?: string;
-}
-export declare const Avl3DCrossWire: React.FC<Avl3DCrossWireProps>;

package/dist/components/avl/molecules/Avl3DEntityCore.d.ts

@@ -1,26 +0,0 @@
-/**
- * Avl3DEntityCore - Glowing entity center for the orbital solar system view.
- *
- * Renders an icosahedron with gold emissive glow, surrounded by
- * field indicator particles and a point light.
- *
- * @packageDocumentation
- */
-import React from 'react';
-export interface Avl3DEntityCoreProps {
-    /** Entity name */
-    name: string;
-    /** Number of fields */
-    fieldCount: number;
-    /** Persistence type */
-    persistence: string;
-    /** 3D position [x, y, z] */
-    position: [number, number, number];
-    /** Field type strings for V5 shape encoding (optional, falls back to spheres) */
-    fields?: string[];
-    /** Color override */
-    color?: string;
-    /** CSS class for label */
-    className?: string;
-}
-export declare const Avl3DEntityCore: React.FC<Avl3DEntityCoreProps>;

package/dist/components/avl/molecules/Avl3DExprTree.d.ts

@@ -1,21 +0,0 @@
-/**
- * Avl3DExprTree - 3D s-expression tree for guard/effect visualization.
- *
- * Renders operators as rounded boxes, literals as small spheres,
- * bindings as wireframe spheres, connected by thin cylinders.
- *
- * @packageDocumentation
- */
-import React from 'react';
-import type { ExprTreeNode } from '../lib/avl-schema-parser';
-export interface Avl3DExprTreeProps {
-    /** The expression tree to render */
-    expression: ExprTreeNode;
-    /** Root position [x, y, z] */
-    position: [number, number, number];
-    /** Color override */
-    color?: string;
-    /** CSS class */
-    className?: string;
-}
-export declare const Avl3DExprTree: React.FC<Avl3DExprTreeProps>;

package/dist/components/avl/molecules/Avl3DOrbitalNode.d.ts

@@ -1,29 +0,0 @@
-/**
- * Avl3DOrbitalNode - Orbital node for the galaxy view.
- *
- * Shape: TORUS (ring) with entity nucleus floating inside.
- * The ring shape literally represents "orbital" and is visually
- * distinct from all other AVL primitives.
- *
- * @packageDocumentation
- */
-import React from 'react';
-export interface Avl3DOrbitalNodeProps {
-    /** Orbital name */
-    name: string;
-    /** Entity name */
-    entityName: string;
-    /** Number of traits (affects ring size and scale) */
-    traitCount: number;
-    /** Number of pages (affects glow brightness) */
-    pageCount?: number;
-    /** Entity persistence type */
-    persistence?: string;
-    /** 3D position [x, y, z] */
-    position: [number, number, number];
-    /** Click handler */
-    onClick?: () => void;
-    /** CSS class for label */
-    className?: string;
-}
-export declare const Avl3DOrbitalNode: React.FC<Avl3DOrbitalNodeProps>;

package/dist/components/avl/molecules/Avl3DStateNode.d.ts

@@ -1,34 +0,0 @@
-/**
- * Avl3DStateNode - State node in the 3D state machine view.
- *
- * Shape: ROUNDED BOX (matches the 2D rounded rectangle).
- * Visually distinct from orbital torus, entity icosahedron, guard octahedron.
- *
- * V3 fix: initial = green arrow cone offset to left, terminal = red stop octahedron offset to right.
- *
- * @packageDocumentation
- */
-import React from 'react';
-export interface Avl3DStateNodeProps {
-    /** State name */
-    name: string;
-    /** Whether this is the initial state */
-    isInitial?: boolean;
-    /** Whether this is a terminal state */
-    isTerminal?: boolean;
-    /** 3D position [x, y, z] */
-    position: [number, number, number];
-    /** Whether this state is currently active */
-    active?: boolean;
-    /** Click handler */
-    onClick?: () => void;
-    /** Number of incoming transitions */
-    incomingCount?: number;
-    /** Number of outgoing transitions */
-    outgoingCount?: number;
-    /** Color override */
-    color?: string;
-    /** CSS class for label */
-    className?: string;
-}
-export declare const Avl3DStateNode: React.FC<Avl3DStateNodeProps>;