@rs-x/react-components 1.0.1

package/dist/index.d.ts

@@ -0,0 +1,586 @@
+import React$1, { CSSProperties, JSX, ReactNode } from 'react';
+import * as _rs_x_expression_parser from '@rs-x/expression-parser';
+import { IExpression, IExpressionChangeHistory, IExpressionChangeTracker } from '@rs-x/expression-parser';
+import { OnMount, Monaco as Monaco$1 } from '@monaco-editor/react';
+import * as Monaco from 'monaco-editor';
+import * as rxjs from 'rxjs';
+import * as operators from 'rxjs/operators';
+
+interface IChangeHistoryPanel {
+    version: number;
+    canClearSelectedHistory: boolean;
+    modelIndex: number;
+    expressionIndex: number;
+    changeHistoryIndex: number;
+    expression: IExpression;
+    changeHistory: IExpressionChangeHistory[][];
+    onClearSelectedHistory?: () => void;
+    onHistoryChanged?: (modelIndex: number, expressionIndex: any, changes: IExpressionChangeHistory[][]) => void;
+    onSelectionChanged?: (modelIndex: number, expressionIndex: number, selectedChangeSetIndex: number, items: IExpressionChangeHistory[], replay: boolean) => void;
+}
+declare const ChangeHistoryPanel: React$1.FC<IChangeHistoryPanel>;
+
+interface ICodeViewerProps {
+    code: string;
+    className?: string;
+    style?: CSSProperties;
+    containerClassName?: string;
+    codeClassName?: string;
+    actionsClassName?: string;
+    toggleButtonClassName?: string;
+    collapsedLineCount?: number;
+    expandable?: boolean;
+    expandLabel?: string;
+    collapseLabel?: string;
+}
+declare const CodeViewer: React$1.FC<ICodeViewerProps>;
+
+type SortDirection = 'asc' | 'desc';
+type Accessor<TData> = keyof TData | ((row: TData) => unknown);
+interface IDataTableColumn<TData> {
+    id: string;
+    header: React$1.ReactNode;
+    accessor?: Accessor<TData>;
+    renderCell?: (row: TData) => React$1.ReactNode;
+    sortAccessor?: (row: TData) => unknown;
+    filterAccessor?: (row: TData) => unknown;
+    sortable?: boolean;
+    searchable?: boolean;
+    headerClassName?: string;
+    cellClassName?: string;
+}
+interface IDataTableProps<TData> {
+    rows: readonly TData[];
+    columns: readonly IDataTableColumn<TData>[];
+    getRowKey: (row: TData, index: number) => React$1.Key;
+    initialSortColumnId?: string;
+    initialSortDirection?: SortDirection;
+    enableFilter?: boolean;
+    filterLabel?: string;
+    filterPlaceholder?: string;
+    hideFilterLabel?: boolean;
+    emptyMessage?: React$1.ReactNode;
+    className?: string;
+    controlsClassName?: string;
+    filterLabelClassName?: string;
+    filterInputClassName?: string;
+    tableWrapClassName?: string;
+    tableClassName?: string;
+    sortButtonClassName?: string;
+    sortMarkerClassName?: string;
+    showInactiveSortMarker?: boolean;
+}
+declare const DataTable: <TData>({ rows, columns, getRowKey, initialSortColumnId, initialSortDirection, enableFilter, filterLabel, filterPlaceholder, hideFilterLabel, emptyMessage, className, controlsClassName, filterLabelClassName, filterInputClassName, tableWrapClassName, tableClassName, sortButtonClassName, sortMarkerClassName, showInactiveSortMarker, }: IDataTableProps<TData>) => React$1.ReactElement;
+
+interface IErrorPanel {
+    errors: string[];
+}
+declare const ErrorPanel: React$1.FC<IErrorPanel>;
+
+interface IExpressionChangeHistoryViewProps {
+    version: number;
+    modelIndex: number;
+    expressionIndex: number;
+    expression: IExpression;
+    changeHistory: IExpressionChangeHistory[][];
+    changeHistoryIndex: number;
+    onHistoryChange?: (modelIndex: number, expressionIndex: number, changes: IExpressionChangeHistory[][]) => void;
+    onSelectionChanged?: (modelIndex: number, expressionIndex: number, selectedChangeSetIndex: number, items: IExpressionChangeHistory[], replay: boolean) => void;
+}
+declare const ExpressionChangeHistoryView: React$1.FC<IExpressionChangeHistoryViewProps>;
+
+declare function useExpressionChangeHistoryTracker(args: {
+    changeHistory: IExpressionChangeHistory[][];
+    expression: IExpression | null | undefined;
+    version: number | string;
+    modelIndex: number;
+    expressionIndex: number;
+    onHistoryChange: (modelIndex: number, expressionIndex: number, nextHistory: IExpressionChangeHistory[][]) => void;
+    onSelectionChanged: (modelIndex: number, expressionIndex: number, newestPersistedIndex: number, stack: IExpressionChangeHistory[], replay: boolean) => void;
+}): {
+    tracker: _rs_x_expression_parser.IExpressionChangeTracker | null;
+};
+
+declare function stackKey(stack: readonly IExpressionChangeHistory[]): string;
+type TrackerSubscriptionResult = {
+    tracker: IExpressionChangeTracker | null;
+    latestStack: IExpressionChangeHistory[] | null;
+    latestStackKey: string | null;
+};
+declare function useExpressionChangeTrackerSubscription(args: {
+    expression: IExpression | null | undefined;
+}): TrackerSubscriptionResult;
+
+declare function useLatestChangeSetFromTracker(args: {
+    expression: IExpression | null | undefined;
+    useTracker: (expr: IExpression) => IExpressionChangeTracker | null;
+}): IExpressionChangeHistory[];
+
+declare function usePersistChangeHistoryFromStack(args: {
+    latestStack: IExpressionChangeHistory[] | null;
+    latestStackKey: string | null;
+    changeHistory: IExpressionChangeHistory[][];
+    modelIndex: number;
+    expressionIndex: number;
+    onHistoryChange: (modelIndex: number, expressionIndex: number, nextHistory: IExpressionChangeHistory[][]) => void;
+    onSelectionChanged: (modelIndex: number, expressionIndex: number, newestPersistedIndex: number, stack: IExpressionChangeHistory[], replay: boolean) => void;
+}): void;
+
+interface IExpressionTreePanelProps {
+    selectedExpressionString: string | undefined;
+    treeZoomPercent: number;
+    expression: IExpression;
+    version: number;
+    highlightVersion: number;
+    treeHighlight: IExpressionChangeHistory[];
+    onTreeZoomPercentChange: (value: number) => void;
+    onClose?: () => void;
+    isVisible: boolean;
+}
+declare const ExpressionTreePanel: React$1.FC<IExpressionTreePanelProps>;
+
+type NodeId = string;
+interface TNode {
+    id: NodeId;
+    expr: IExpression;
+    children: TNode[];
+    parent?: TNode;
+    depth: number;
+    x: number;
+    y: number;
+    prelim: number;
+    mod: number;
+    change: number;
+    shift: number;
+    ancestor: TNode;
+    thread?: TNode;
+    number: number;
+}
+
+interface LayoutEdge$1 {
+    from: NodeId;
+    to: NodeId;
+}
+
+interface LayoutNode$2 {
+    id: NodeId;
+    expression: IExpression;
+    depth: number;
+    x: number;
+    y: number;
+}
+
+interface LayoutResult {
+    nodes: LayoutNode$2[];
+    edges: LayoutEdge$1[];
+    maxX: number;
+    maxDepth: number;
+}
+
+declare class ExpressionIndex {
+    readonly idByExprRef: Map<IExpression<unknown, unknown>, string>;
+    readonly idByExprKey: Map<string, string>;
+    readonly parentById: Map<string, string | null>;
+    constructor(layout: LayoutResult);
+    edgeKey(from: NodeId, to: NodeId): string;
+    exprKey(expression: IExpression): string;
+    resolveNodeId(expr: IExpression): NodeId | null;
+    /**
+     * ✅ IMPORTANT:
+     * For single-node updates, expr.id is constant, so a key like "id|id|id"
+     * never changes and animation effects won't re-run.
+     *
+     * So include the old->new values in the signature.
+     */
+    buildHighlightKey(highlightChanges: readonly IExpressionChangeHistory[]): string;
+    private _buildChainToRoot;
+    /** ✅ public helper for animators: [start, parent, ..., root] */
+    chainToRoot(start: NodeId): NodeId[];
+    pathNodesBetween(a: NodeId, b: NodeId): NodeId[];
+}
+
+interface IExpressionTreeProps {
+    version: number;
+    root: IExpression;
+    nodeWidth?: number;
+    nodeHeight?: number;
+    horizontalGap?: number;
+    verticalGap?: number;
+    formatValue?: (value: unknown) => string;
+    valueMaxDepth?: number;
+    valueMaxChars?: number;
+    className?: string;
+    style?: React$1.CSSProperties;
+    highlightChanges?: IExpressionChangeHistory[];
+    highlightVersion?: number;
+    zoomPercent?: number;
+    isVisible?: boolean;
+    playNonce?: number;
+    fitRequestNonce?: number;
+    centerRequestNonce?: number;
+    onFitZoomComputed?: (zoomPercent: number) => void;
+}
+declare const ExpressionTree: React$1.FC<IExpressionTreeProps>;
+
+declare function useExpressionChangedRerender(expression: IExpression | null | undefined): number;
+
+type LayoutEdge = {
+    from: NodeId;
+    to: NodeId;
+};
+type LayoutNode$1 = {
+    id: NodeId;
+    expression: IExpression;
+};
+type NodePos$2 = {
+    cx: number;
+    topY: number;
+    bottomY: number;
+};
+type EdgePathVm = {
+    key: string;
+    d: string;
+    className: string;
+};
+declare function useExpressionTreeEdgePaths(args: {
+    edges: readonly LayoutEdge[];
+    nodes: readonly LayoutNode$1[];
+    nodePos: Map<NodeId, NodePos$2>;
+    edgeKey: (from: NodeId, to: NodeId) => string;
+    selectedEdgeKeys: Set<string>;
+    activeEdgeKeys: ReadonlySet<string>;
+}): EdgePathVm[];
+
+type LayoutNode = {
+    id: NodeId;
+    expression: IExpression;
+};
+type NodePos$1 = {
+    left: number;
+    top: number;
+};
+type NodeVm = {
+    id: NodeId;
+    className: string;
+    style: React.CSSProperties;
+    expressionText: string;
+    typeText: string;
+    valueText: string;
+    hasValue: boolean;
+    isAsync: boolean;
+};
+declare function useExpressionTreeNodeVms(args: {
+    nodes: readonly LayoutNode[];
+    nodePos: Map<NodeId, NodePos$1>;
+    nodeWidth: number;
+    nodeHeight: number;
+    selectedNodeIds: Set<NodeId>;
+    activeNodeIds: ReadonlySet<NodeId>;
+    formatValue: (v: unknown) => string;
+}): NodeVm[];
+
+type NodePos = {
+    left: number;
+    top: number;
+    cx: number;
+    topY: number;
+    bottomY: number;
+};
+type ExpressionTreeViewport = {
+    zoomScale: number;
+    paddedW: number;
+    paddedH: number;
+    scaledW: number;
+    scaledH: number;
+    nodePos: Map<NodeId, NodePos>;
+};
+declare function useExpressionTreeViewport(args: {
+    layout: LayoutResult;
+    nodeWidth: number;
+    nodeHeight: number;
+    horizontalGap: number;
+    verticalGap: number;
+    panelW: number;
+    panelH: number;
+    zoomPercent: number;
+}): ExpressionTreeViewport;
+
+declare function useHighlightAnimation(args: {
+    highlightChanges: readonly IExpressionChangeHistory[];
+    highlightVersion: number;
+    highlightKey: string;
+    expressionIndex: ExpressionIndex;
+    isVisible: boolean;
+    playNonce: number;
+}): {
+    selectedNodeIds: Set<NodeId>;
+    selectedEdgeKeys: Set<string>;
+    activeNodeIds: Set<NodeId>;
+    activeEdgeKeys: Set<string>;
+};
+
+declare function useResizeObserverSize<T extends HTMLElement>(): [
+    React.RefObject<T | null>,
+    {
+        width: number;
+        height: number;
+    }
+];
+
+declare class TreeLayoutEngine {
+    private _seq;
+    computeLayout(expression: IExpression): LayoutResult;
+    private makeId;
+    /**
+     * Build a visible-only tree:
+     * - Hidden nodes are NOT added to the layout
+     * - Children of hidden nodes are "lifted" to the nearest visible parent
+     */
+    private buildVisibleTNodeTree;
+    private leftSibling;
+    private leftMostSibling;
+    private nextLeft;
+    private nextRight;
+    private moveSubtree;
+    private ancestorNode;
+    private executeShifts;
+    private apportion;
+    private firstWalk;
+    private secondWalk;
+    private tidyLayout;
+}
+
+interface IExpressionTreeViewWithModel {
+    version?: number;
+    treeHighlightVersion?: number;
+    modelIndex?: number;
+    expressionIndex?: number;
+    hideTrackChange?: boolean;
+    hideHeader?: boolean;
+    changeHistoryIndex?: number;
+    expression?: IExpression;
+    changeHistory?: IExpressionChangeHistory[][];
+    treeHighlight: IExpressionChangeHistory[];
+    treeZoomPercent: number;
+    modelEditor: JSX.Element;
+    onHistoryChanged?: (modelIndex: number, expressionIndex: number, history: IExpressionChangeHistory[][]) => void;
+    onSelectHistoryBatch?: (modelIndex: number, expressionIndex: number, selectedIndex: number, items: IExpressionChangeHistory[], replay: boolean) => void;
+    onClearSelectedHistory?: () => void;
+    setTreeZoomPercent: (zoom: number) => void;
+    onClose?: () => void;
+}
+declare const ExpressionTreeViewWithModel: React$1.FC<IExpressionTreeViewWithModel>;
+
+declare function useSyncScriptToUrl(args: {
+    script: string;
+    buildQuery: (script: string) => string | Promise<string>;
+    debounceMs?: number;
+    enabled?: boolean;
+}): void;
+
+interface IItemLinkCardContentProps {
+    title: ReactNode;
+    meta?: ReactNode;
+    description?: ReactNode;
+    arrow?: ReactNode;
+    titleClassName?: string;
+    metaClassName?: string;
+    descriptionClassName?: string;
+    arrowClassName?: string;
+}
+declare const ItemLinkCardContent: React$1.FC<IItemLinkCardContentProps>;
+
+type LeftAccentCardTone = 'brand' | 'active' | 'done' | 'mostly' | 'planned';
+type LeftAccentCardTag = 'article' | 'div' | 'li' | 'section';
+interface ILeftAccentCardProps extends React$1.HTMLAttributes<HTMLElement> {
+    as?: LeftAccentCardTag;
+    tone?: LeftAccentCardTone;
+}
+declare const LeftAccentCard: React$1.FC<ILeftAccentCardProps>;
+
+type NotificationToastVariant = 'success' | 'error' | 'info';
+interface INotificationToastProps {
+    open: boolean;
+    title?: string;
+    message: string;
+    variant?: NotificationToastVariant;
+    durationMs?: number;
+    onClose: () => void;
+}
+declare const NotificationToast: React$1.FC<INotificationToastProps>;
+
+declare const Playground: React$1.FC;
+
+type TabValue = string;
+interface ITabItem<T extends TabValue = string> {
+    value: T;
+    label: React$1.ReactNode;
+    title?: string;
+    disabled?: boolean;
+}
+interface ITabsProps<T extends TabValue = string> {
+    ariaLabel: string;
+    items: readonly ITabItem<T>[];
+    value: T;
+    onValueChange: (value: T) => void;
+    persistKey?: string;
+    className?: string;
+    listClassName?: string;
+    tabClassName?: string;
+    activeTabClassName?: string;
+    labelClassName?: string;
+    unstyled?: boolean;
+}
+declare const Tabs: <T extends TabValue = string>({ ariaLabel, items, value, onValueChange, persistKey, className, listClassName, tabClassName, activeTabClassName, labelClassName, unstyled, }: ITabsProps<T>) => React$1.ReactElement;
+
+declare function installMonacoPlaceholder(editor: Monaco.editor.IStandaloneCodeEditor, monaco: typeof Monaco, text: string): () => void;
+interface TSEditorProps {
+    saveButtonName?: string;
+    header: string;
+    name?: string;
+    hideName?: boolean;
+    hideCancelButton?: boolean;
+    namePlaceholder?: string;
+    value?: string;
+    options?: Monaco.editor.IStandaloneEditorConstructionOptions;
+    onMount?: OnMount;
+    onChange?: (value: string) => void;
+    save: (value: string, name: string) => void;
+    cancel?: () => void;
+    secondaryActionName?: string;
+    secondaryAction?: (value: string, name: string) => void;
+    secondaryActionDisabled?: boolean;
+}
+declare const TSEditor: React$1.FC<TSEditorProps>;
+
+interface ITsEditorWithErrorPanelProp {
+    script?: string;
+    header: string;
+    name?: string;
+    namePlaceholder?: string;
+    errors: string[];
+    saveButtonName?: string;
+    hideName?: boolean;
+    options?: Monaco.editor.IStandaloneEditorConstructionOptions;
+    onChange?: (value: string) => void;
+    save: (value: string, ame: string) => void;
+    cancel?: () => void;
+    onMount?: OnMount;
+    isEditorLoading?: boolean;
+    secondaryActionName?: string;
+    secondaryAction?: (value: string, name: string) => void;
+    secondaryActionDisabled?: boolean;
+}
+declare const TsEditorWithErrorPanel: React$1.FC<ITsEditorWithErrorPanelProp>;
+
+interface IZoomDropdown {
+    value: number;
+    onChange: (value: number) => void;
+}
+declare const ZoomDropdown: React$1.FC<IZoomDropdown>;
+
+declare const ZOOM_PRESETS: number[];
+declare function snapZoomPercentToPreset(value: number): number;
+
+declare class ExpressionChangeTrackerFactory {
+    private static _expressionChangeTrackerManager;
+    private constructor();
+    static create(expression: IExpression): IExpressionChangeTracker;
+}
+
+declare function ensureExpressionParserBootstrapped(): Promise<void>;
+
+interface IExpressionFactoryResult {
+    expression: IExpression | undefined;
+    expressionString: string;
+    error: string;
+}
+declare class ModelExpressionsFactory {
+    private static _instance;
+    private readonly _expressionManager;
+    private constructor();
+    static getInstance(): ModelExpressionsFactory;
+    create(model: object, expressionStrings: string[]): IExpressionFactoryResult[];
+}
+
+declare class ModelIntellisenseService {
+    private static _instance;
+    model: object;
+    monaco?: Monaco$1;
+    private readonly scopes;
+    private constructor();
+    static getInstance(): ModelIntellisenseService;
+    setModel(model: object): void;
+    register(monacoInstance: Monaco$1): void;
+    private getRootScope;
+    private getCurrentMemberExpression;
+    private getWordRangeAtPosition;
+    private getSuggestions;
+    private resolveMemberExpression;
+}
+
+declare function downloadProjectZip(script: string): void;
+
+declare class RxjsMonacoTypesLoader {
+    private static _instance;
+    private _installed;
+    private static readonly GLOBAL_LIB_URI;
+    private constructor();
+    static getInstance(): RxjsMonacoTypesLoader;
+    install(monaco: Monaco$1): Promise<void>;
+    private installGlobalApiTypes;
+}
+
+type RxjsCore = typeof rxjs;
+type RxjsOps = typeof operators;
+type CollidingKeys = keyof RxjsCore & keyof RxjsOps;
+type NonCollidingOps = Omit<RxjsOps, CollidingKeys>;
+/**
+ * Final scope:
+ * - All core RxJS exports (interval, combineLatest, Observable, ...)
+ * - All NON-colliding operators directly on the scope (map, pairwise, bufferCount, ...)
+ * - ALL operators available under $.op.* (including colliding names)
+ */
+type RxJsScope = RxjsCore & NonCollidingOps & {
+    op: RxjsOps;
+};
+declare const rxjsScope: RxJsScope;
+
+type EvaluateModelResult<T> = {
+    success: true;
+    returnValue: T;
+} | {
+    success: false;
+    error: string;
+};
+declare class ScriptEvaluator {
+    private static _instance;
+    private constructor();
+    static getInstance(): ScriptEvaluator;
+    evaluateScript<T>(editorModelString: string): Promise<EvaluateModelResult<T>>;
+    /**
+     * Extracts "file:line:col" where file is SOURCE_NAME.
+     */
+    private _extractLocationFromText;
+    /**
+     * Fallback: extract "<anonymous>:line:col" (some browsers do this for eval).
+     */
+    private _extractAnonymousLocationFromText;
+    private _escapeRegExp;
+    evaluateModel<T>(editorModelString: string): EvaluateModelResult<T>;
+    private buildApi;
+}
+
+type ScriptWrapperModels = {
+    userModel: Monaco.editor.ITextModel;
+    wrapperModel: Monaco.editor.ITextModel;
+    dispose: () => void;
+};
+declare function setupScriptModels(args: {
+    monaco: typeof Monaco;
+    initialUserCode: string;
+}): ScriptWrapperModels;
+
+declare function buildZipFromTextFiles(files: Record<string, string>): Blob;
+
+export { ChangeHistoryPanel, CodeViewer, DataTable, type EdgePathVm, ErrorPanel, type EvaluateModelResult, ExpressionChangeHistoryView, ExpressionChangeTrackerFactory, ExpressionIndex, ExpressionTree, ExpressionTreePanel, ExpressionTreeViewWithModel, type ExpressionTreeViewport, type IChangeHistoryPanel, type ICodeViewerProps, type IDataTableColumn, type IDataTableProps, type IErrorPanel, type IExpressionChangeHistoryViewProps, type IExpressionFactoryResult, type IExpressionTreePanelProps, type IExpressionTreeProps, type IExpressionTreeViewWithModel, type IItemLinkCardContentProps, type ILeftAccentCardProps, type INotificationToastProps, type ITabItem, type ITabsProps, type ITsEditorWithErrorPanelProp, type IZoomDropdown, ItemLinkCardContent, type LayoutEdge$1 as LayoutEdge, type LayoutNode$2 as LayoutNode, type LayoutResult, LeftAccentCard, type LeftAccentCardTone, ModelExpressionsFactory, ModelIntellisenseService, type NodeId, type NodePos, type NodeVm, NotificationToast, type NotificationToastVariant, Playground, type RxJsScope, RxjsMonacoTypesLoader, ScriptEvaluator, type ScriptWrapperModels, type TNode, TSEditor, type TSEditorProps, Tabs, type TrackerSubscriptionResult, TreeLayoutEngine, TsEditorWithErrorPanel, ZOOM_PRESETS, ZoomDropdown, buildZipFromTextFiles, downloadProjectZip, ensureExpressionParserBootstrapped, installMonacoPlaceholder, rxjsScope, setupScriptModels, snapZoomPercentToPreset, stackKey, useExpressionChangeHistoryTracker, useExpressionChangeTrackerSubscription, useExpressionChangedRerender, useExpressionTreeEdgePaths, useExpressionTreeNodeVms, useExpressionTreeViewport, useHighlightAnimation, useLatestChangeSetFromTracker, usePersistChangeHistoryFromStack, useResizeObserverSize, useSyncScriptToUrl };