@cratis/components 4.21.1 → 4.22.1

package/dist/esm/PivotViewer/components/PivotCanvasProps.d.ts

@@ -0,0 +1,51 @@
+import type { GroupingResult, ItemId, LayoutResult } from '../engine/types.js';
+import type { PivotViewerColors } from '../types.js';
+import type { ViewMode } from './Toolbar.js';
+/** Props for the Pixi card renderer inside a PivotViewer viewport. */
+export interface PivotCanvasProps<TItem extends object> {
+    /** Original items array */
+    items: TItem[];
+    /** Layout positions */
+    layout: LayoutResult;
+    /** Grouping information */
+    grouping: GroupingResult;
+    /** Visible item IDs */
+    visibleIds: Uint32Array;
+    /** Card dimensions */
+    cardWidth: number;
+    cardHeight: number;
+    /** Zoom level */
+    zoomLevel: number;
+    /** Pan offset */
+    panX: number;
+    panY: number;
+    /** Viewport dimensions (visible area) */
+    viewportWidth: number;
+    viewportHeight: number;
+    /** Selected item ID */
+    selectedId: ItemId | null;
+    /** Hovered group index */
+    hoveredGroupIndex: number | null;
+    /** Current view mode */
+    viewMode: ViewMode;
+    /** Is zooming animation in progress */
+    isZooming?: boolean;
+    /** Card renderer function - returns structured data for display */
+    cardRenderer: (item: TItem) => {
+        title: string;
+        labels?: string[];
+        values?: string[];
+    };
+    /** Public color overrides; changes trigger a Pixi color refresh. */
+    colorOverrides?: Partial<PivotViewerColors>;
+    /** ID resolver */
+    resolveId: (item: TItem, index: number) => string | number;
+    /** Click handler */
+    onCardClick: (item: TItem, e: MouseEvent, id: number | string) => void;
+    /** Pan handlers */
+    onPanStart: (e: React.MouseEvent) => void;
+    onPanMove: (e: React.MouseEvent) => void;
+    onPanEnd: () => void;
+    containerRef: React.RefObject<HTMLDivElement | null>;
+}
+//# sourceMappingURL=PivotCanvasProps.d.ts.map

package/dist/esm/PivotViewer/components/PivotCanvasProps.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PivotCanvasProps.d.ts","sourceRoot":"","sources":["../../../../PivotViewer/components/PivotCanvasProps.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM,oBAAiB,CAAC;AAC5E,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,aAAU,CAAC;AAClD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,cAAW,CAAC;AAE1C,sEAAsE;AACtE,MAAM,WAAW,gBAAgB,CAAC,KAAK,SAAS,MAAM;IAClD,2BAA2B;IAC3B,KAAK,EAAE,KAAK,EAAE,CAAC;IAEf,uBAAuB;IACvB,MAAM,EAAE,YAAY,CAAC;IAErB,2BAA2B;IAC3B,QAAQ,EAAE,cAAc,CAAC;IAEzB,uBAAuB;IACvB,UAAU,EAAE,WAAW,CAAC;IAExB,sBAAsB;IACtB,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,EAAE,MAAM,CAAC;IAEnB,iBAAiB;IACjB,SAAS,EAAE,MAAM,CAAC;IAElB,iBAAiB;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IAEb,yCAAyC;IACzC,aAAa,EAAE,MAAM,CAAC;IACtB,cAAc,EAAE,MAAM,CAAC;IAEvB,uBAAuB;IACvB,UAAU,EAAE,MAAM,GAAG,IAAI,CAAC;IAE1B,0BAA0B;IAC1B,iBAAiB,EAAE,MAAM,GAAG,IAAI,CAAC;IAEjC,wBAAwB;IACxB,QAAQ,EAAE,QAAQ,CAAC;IAEnB,uCAAuC;IACvC,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,mEAAmE;IACnE,YAAY,EAAE,CAAC,IAAI,EAAE,KAAK,KAAK;QAC3B,KAAK,EAAE,MAAM,CAAC;QACd,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;QAClB,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;KACrB,CAAC;IAEF,oEAAoE;IACpE,cAAc,CAAC,EAAE,OAAO,CAAC,iBAAiB,CAAC,CAAC;IAE5C,kBAAkB;IAClB,SAAS,EAAE,CAAC,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,GAAG,MAAM,CAAC;IAE3D,oBAAoB;IACpB,WAAW,EAAE,CAAC,IAAI,EAAE,KAAK,EAAE,CAAC,EAAE,UAAU,EAAE,EAAE,EAAE,MAAM,GAAG,MAAM,KAAK,IAAI,CAAC;IAEvE,mBAAmB;IACnB,UAAU,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAC1C,SAAS,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IACzC,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,YAAY,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;CACxD"}

package/dist/esm/PivotViewer/components/PivotCanvasProps.js

@@ -0,0 +1,4 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+export {};
+//# sourceMappingURL=PivotCanvasProps.js.map

package/dist/esm/PivotViewer/components/PivotCanvasProps.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PivotCanvasProps.js","sourceRoot":"","sources":["../../../../PivotViewer/components/PivotCanvasProps.ts"],"names":[],"mappings":"AAAA,6CAA6C;AAC7C,qGAAqG","sourcesContent":["// Copyright (c) Cratis. All rights reserved.\n// Licensed under the MIT license. See LICENSE file in the project root for full license information.\n\nimport type { GroupingResult, ItemId, LayoutResult } from '../engine/types';\nimport type { PivotViewerColors } from '../types';\nimport type { ViewMode } from './Toolbar';\n\n/** Props for the Pixi card renderer inside a PivotViewer viewport. */\nexport interface PivotCanvasProps<TItem extends object> {\n    /** Original items array */\n    items: TItem[];\n\n    /** Layout positions */\n    layout: LayoutResult;\n\n    /** Grouping information */\n    grouping: GroupingResult;\n\n    /** Visible item IDs */\n    visibleIds: Uint32Array;\n\n    /** Card dimensions */\n    cardWidth: number;\n    cardHeight: number;\n\n    /** Zoom level */\n    zoomLevel: number;\n\n    /** Pan offset */\n    panX: number;\n    panY: number;\n\n    /** Viewport dimensions (visible area) */\n    viewportWidth: number;\n    viewportHeight: number;\n\n    /** Selected item ID */\n    selectedId: ItemId | null;\n\n    /** Hovered group index */\n    hoveredGroupIndex: number | null;\n\n    /** Current view mode */\n    viewMode: ViewMode;\n\n    /** Is zooming animation in progress */\n    isZooming?: boolean;\n\n    /** Card renderer function - returns structured data for display */\n    cardRenderer: (item: TItem) => {\n        title: string;\n        labels?: string[];\n        values?: string[];\n    };\n\n    /** Public color overrides; changes trigger a Pixi color refresh. */\n    colorOverrides?: Partial<PivotViewerColors>;\n\n    /** ID resolver */\n    resolveId: (item: TItem, index: number) => string | number;\n\n    /** Click handler */\n    onCardClick: (item: TItem, e: MouseEvent, id: number | string) => void;\n\n    /** Pan handlers */\n    onPanStart: (e: React.MouseEvent) => void;\n    onPanMove: (e: React.MouseEvent) => void;\n    onPanEnd: () => void;\n    containerRef: React.RefObject<HTMLDivElement | null>;\n}\n"]}

package/dist/esm/PivotViewer/components/pivot/PivotRenderContext.d.ts

@@ -0,0 +1,16 @@
+import type { RefObject } from 'react';
+import type { PivotCanvasProps } from '../PivotCanvasProps.js';
+import type { CardColors } from './constants.js';
+import type { PivotStage } from './PivotStage.js';
+import type { PivotTransitionState } from './PivotTransitionState.js';
+/** Everything the PivotCanvas render hooks read: props, stage, transition state and colors. */
+export interface PivotRenderContext<TItem extends object> {
+    props: PivotCanvasProps<TItem>;
+    stage: PivotStage;
+    transition: PivotTransitionState;
+    cardColorsRef: RefObject<CardColors>;
+    colorRevision: number;
+    onCardClickRef: RefObject<PivotCanvasProps<TItem>['onCardClick']>;
+    onPanStartRef: RefObject<PivotCanvasProps<TItem>['onPanStart']>;
+}
+//# sourceMappingURL=PivotRenderContext.d.ts.map

package/dist/esm/PivotViewer/components/pivot/PivotRenderContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PivotRenderContext.d.ts","sourceRoot":"","sources":["../../../../../PivotViewer/components/pivot/PivotRenderContext.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,wBAAqB,CAAC;AAC5D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gBAAa,CAAC;AAC9C,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAc,CAAC;AAC/C,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,2BAAwB,CAAC;AAEnE,+FAA+F;AAC/F,MAAM,WAAW,kBAAkB,CAAC,KAAK,SAAS,MAAM;IACpD,KAAK,EAAE,gBAAgB,CAAC,KAAK,CAAC,CAAC;IAC/B,KAAK,EAAE,UAAU,CAAC;IAClB,UAAU,EAAE,oBAAoB,CAAC;IACjC,aAAa,EAAE,SAAS,CAAC,UAAU,CAAC,CAAC;IACrC,aAAa,EAAE,MAAM,CAAC;IACtB,cAAc,EAAE,SAAS,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC;IAClE,aAAa,EAAE,SAAS,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC;CACnE"}

package/dist/esm/PivotViewer/components/pivot/PivotRenderContext.js

@@ -0,0 +1,4 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+export {};
+//# sourceMappingURL=PivotRenderContext.js.map

package/dist/esm/PivotViewer/components/pivot/PivotRenderContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PivotRenderContext.js","sourceRoot":"","sources":["../../../../../PivotViewer/components/pivot/PivotRenderContext.ts"],"names":[],"mappings":"AAAA,6CAA6C;AAC7C,qGAAqG","sourcesContent":["// Copyright (c) Cratis. All rights reserved.\n// Licensed under the MIT license. See LICENSE file in the project root for full license information.\n\nimport type { RefObject } from 'react';\nimport type { PivotCanvasProps } from '../PivotCanvasProps';\nimport type { CardColors } from './constants';\nimport type { PivotStage } from './PivotStage';\nimport type { PivotTransitionState } from './PivotTransitionState';\n\n/** Everything the PivotCanvas render hooks read: props, stage, transition state and colors. */\nexport interface PivotRenderContext<TItem extends object> {\n    props: PivotCanvasProps<TItem>;\n    stage: PivotStage;\n    transition: PivotTransitionState;\n    cardColorsRef: RefObject<CardColors>;\n    colorRevision: number;\n    onCardClickRef: RefObject<PivotCanvasProps<TItem>['onCardClick']>;\n    onPanStartRef: RefObject<PivotCanvasProps<TItem>['onPanStart']>;\n}\n"]}

package/dist/esm/PivotViewer/components/pivot/PivotStage.d.ts

@@ -0,0 +1,19 @@
+import type { RefObject } from 'react';
+import type * as PIXI from 'pixi.js';
+import type { ItemId } from '../../engine/types.js';
+import type { CardSprite } from './constants.js';
+/** The Pixi application and containers a PivotCanvas renders into. */
+export interface PivotStage {
+    appRef: RefObject<PIXI.Application | null>;
+    rootRef: RefObject<PIXI.Container | null>;
+    groupsContainerRef: RefObject<PIXI.Container | null>;
+    canvasRef: RefObject<HTMLCanvasElement | null>;
+    spritesRef: RefObject<Map<ItemId, CardSprite>>;
+    animationFrameRef: RefObject<number>;
+    mountedRef: RefObject<boolean>;
+    /** Set when the stage has changed and needs another render. */
+    needsRenderRef: RefObject<boolean>;
+    /** Whether the Pixi application is initialized. */
+    pixiReady: boolean;
+}
+//# sourceMappingURL=PivotStage.d.ts.map

package/dist/esm/PivotViewer/components/pivot/PivotStage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PivotStage.d.ts","sourceRoot":"","sources":["../../../../../PivotViewer/components/pivot/PivotStage.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,KAAK,IAAI,MAAM,SAAS,CAAC;AACrC,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,uBAAoB,CAAC;AACjD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gBAAa,CAAC;AAE9C,sEAAsE;AACtE,MAAM,WAAW,UAAU;IACvB,MAAM,EAAE,SAAS,CAAC,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAC3C,OAAO,EAAE,SAAS,CAAC,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,CAAC;IAC1C,kBAAkB,EAAE,SAAS,CAAC,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,CAAC;IACrD,SAAS,EAAE,SAAS,CAAC,iBAAiB,GAAG,IAAI,CAAC,CAAC;IAC/C,UAAU,EAAE,SAAS,CAAC,GAAG,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC,CAAC;IAC/C,iBAAiB,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC;IACrC,UAAU,EAAE,SAAS,CAAC,OAAO,CAAC,CAAC;IAC/B,+DAA+D;IAC/D,cAAc,EAAE,SAAS,CAAC,OAAO,CAAC,CAAC;IACnC,mDAAmD;IACnD,SAAS,EAAE,OAAO,CAAC;CACtB"}

package/dist/esm/PivotViewer/components/pivot/PivotStage.js

@@ -0,0 +1,4 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+export {};
+//# sourceMappingURL=PivotStage.js.map

package/dist/esm/PivotViewer/components/pivot/PivotStage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PivotStage.js","sourceRoot":"","sources":["../../../../../PivotViewer/components/pivot/PivotStage.ts"],"names":[],"mappings":"AAAA,6CAA6C;AAC7C,qGAAqG","sourcesContent":["// Copyright (c) Cratis. All rights reserved.\n// Licensed under the MIT license. See LICENSE file in the project root for full license information.\n\nimport type { RefObject } from 'react';\nimport type * as PIXI from 'pixi.js';\nimport type { ItemId } from '../../engine/types';\nimport type { CardSprite } from './constants';\n\n/** The Pixi application and containers a PivotCanvas renders into. */\nexport interface PivotStage {\n    appRef: RefObject<PIXI.Application | null>;\n    rootRef: RefObject<PIXI.Container | null>;\n    groupsContainerRef: RefObject<PIXI.Container | null>;\n    canvasRef: RefObject<HTMLCanvasElement | null>;\n    spritesRef: RefObject<Map<ItemId, CardSprite>>;\n    animationFrameRef: RefObject<number>;\n    mountedRef: RefObject<boolean>;\n    /** Set when the stage has changed and needs another render. */\n    needsRenderRef: RefObject<boolean>;\n    /** Whether the Pixi application is initialized. */\n    pixiReady: boolean;\n}\n"]}

package/dist/esm/PivotViewer/components/pivot/PivotTransitionState.d.ts

@@ -0,0 +1,21 @@
+import type { RefObject } from 'react';
+import type { GroupingResult, ItemId, LayoutResult } from '../../engine/types.js';
+import type { ViewMode } from '../Toolbar.js';
+/** What a PivotCanvas remembers between renders to animate view, grouping and layout changes. */
+export interface PivotTransitionState {
+    isAnimatingRef: RefObject<boolean>;
+    isViewTransitionRef: RefObject<boolean>;
+    lastViewChangeTimeRef: RefObject<number>;
+    previousViewModeRef: RefObject<ViewMode>;
+    prevLayoutRef: RefObject<LayoutResult | null>;
+    transitionLayoutRef: RefObject<LayoutResult | null>;
+    transitionSeenIdsRef: RefObject<Set<ItemId>>;
+    prevGroupingRef: RefObject<GroupingResult | null>;
+    prevScrollTopRef: RefObject<number>;
+    prevScrollLeftRef: RefObject<number>;
+    prevPanRef: RefObject<{
+        x: number;
+        y: number;
+    }>;
+}
+//# sourceMappingURL=PivotTransitionState.d.ts.map

package/dist/esm/PivotViewer/components/pivot/PivotTransitionState.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PivotTransitionState.d.ts","sourceRoot":"","sources":["../../../../../PivotViewer/components/pivot/PivotTransitionState.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM,uBAAoB,CAAC;AAC/E,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,eAAY,CAAC;AAE3C,iGAAiG;AACjG,MAAM,WAAW,oBAAoB;IACjC,cAAc,EAAE,SAAS,CAAC,OAAO,CAAC,CAAC;IACnC,mBAAmB,EAAE,SAAS,CAAC,OAAO,CAAC,CAAC;IACxC,qBAAqB,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC;IACzC,mBAAmB,EAAE,SAAS,CAAC,QAAQ,CAAC,CAAC;IACzC,aAAa,EAAE,SAAS,CAAC,YAAY,GAAG,IAAI,CAAC,CAAC;IAC9C,mBAAmB,EAAE,SAAS,CAAC,YAAY,GAAG,IAAI,CAAC,CAAC;IACpD,oBAAoB,EAAE,SAAS,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC;IAC7C,eAAe,EAAE,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IAClD,gBAAgB,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC;IACpC,iBAAiB,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC;IACrC,UAAU,EAAE,SAAS,CAAC;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;CACnD"}

package/dist/esm/PivotViewer/components/pivot/PivotTransitionState.js

@@ -0,0 +1,4 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+export {};
+//# sourceMappingURL=PivotTransitionState.js.map

package/dist/esm/PivotViewer/components/pivot/PivotTransitionState.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PivotTransitionState.js","sourceRoot":"","sources":["../../../../../PivotViewer/components/pivot/PivotTransitionState.ts"],"names":[],"mappings":"AAAA,6CAA6C;AAC7C,qGAAqG","sourcesContent":["// Copyright (c) Cratis. All rights reserved.\n// Licensed under the MIT license. See LICENSE file in the project root for full license information.\n\nimport type { RefObject } from 'react';\nimport type { GroupingResult, ItemId, LayoutResult } from '../../engine/types';\nimport type { ViewMode } from '../Toolbar';\n\n/** What a PivotCanvas remembers between renders to animate view, grouping and layout changes. */\nexport interface PivotTransitionState {\n    isAnimatingRef: RefObject<boolean>;\n    isViewTransitionRef: RefObject<boolean>;\n    lastViewChangeTimeRef: RefObject<number>;\n    previousViewModeRef: RefObject<ViewMode>;\n    prevLayoutRef: RefObject<LayoutResult | null>;\n    transitionLayoutRef: RefObject<LayoutResult | null>;\n    transitionSeenIdsRef: RefObject<Set<ItemId>>;\n    prevGroupingRef: RefObject<GroupingResult | null>;\n    prevScrollTopRef: RefObject<number>;\n    prevScrollLeftRef: RefObject<number>;\n    prevPanRef: RefObject<{ x: number; y: number }>;\n}\n"]}

package/dist/esm/PivotViewer/components/pivot/asReactMouseEvent.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Treats the browser pointer event Pixi exposes as the React mouse event PivotViewer's pan
+ * callbacks take; they read only the coordinates and modifiers both share.
+ * @param event The originating browser event.
+ * @returns The same event, typed for the pan callbacks.
+ */
+export declare const asReactMouseEvent: (event: unknown) => React.MouseEvent;
+//# sourceMappingURL=asReactMouseEvent.d.ts.map

package/dist/esm/PivotViewer/components/pivot/asReactMouseEvent.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"asReactMouseEvent.d.ts","sourceRoot":"","sources":["../../../../../PivotViewer/components/pivot/asReactMouseEvent.ts"],"names":[],"mappings":"AAGA;;;;;GAKG;AACH,eAAO,MAAM,iBAAiB,UAAW,OAAO,KAAG,KAAK,CAAC,UAIxD,CAAC"}

package/dist/esm/PivotViewer/components/pivot/asReactMouseEvent.js

@@ -0,0 +1,6 @@
+const asReactMouseEvent = (event) => {
+    return event;
+};
+
+export { asReactMouseEvent };
+//# sourceMappingURL=asReactMouseEvent.js.map

package/dist/esm/PivotViewer/components/pivot/asReactMouseEvent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"asReactMouseEvent.js","sources":["../../../../../PivotViewer/components/pivot/asReactMouseEvent.ts"],"sourcesContent":["// Copyright (c) Cratis. All rights reserved.\n// Licensed under the MIT license. See LICENSE file in the project root for full license information.\n\n/**\n * Treats the browser pointer event Pixi exposes as the React mouse event PivotViewer's pan\n * callbacks take; they read only the coordinates and modifiers both share.\n * @param event The originating browser event.\n * @returns The same event, typed for the pan callbacks.\n */\nexport const asReactMouseEvent = (event: unknown): React.MouseEvent => {\n    // SAFETY: Pixi exposes the originating browser pointer event. PivotViewer's pan\n    // callbacks consume only coordinates/modifiers shared with React.MouseEvent.\n    return event as React.MouseEvent;\n};\n"],"names":[],"mappings":"AASO,MAAM,iBAAiB,GAAG,CAAC,KAAc,KAAsB;AAGlE,IAAA,OAAO,KAAyB;AACpC;;"}

package/dist/esm/PivotViewer/components/pivot/sprites.js

@@ -1,5 +1,5 @@
 import * as PIXI from 'pixi.js';
-import { CARD_RADIUS, CARD_PADDING, CARD_GAP } from './constants.js';
+import { CARD_RADIUS, CARD_GAP, CARD_PADDING } from './constants.js';
 import { ellipsizeLine, ellipsizeBlock } from './ellipsize.js';
 
 const VALUES_INSET = 65;

package/dist/esm/PivotViewer/components/pivot/usePivotCardColors.d.ts

@@ -0,0 +1,22 @@
+import { type RefObject } from 'react';
+import type { PivotViewerColors } from '../../types.js';
+/**
+ * Resolves the card colors from the viewport's CSS and refreshes them when the color environment
+ * or the overrides change.
+ * @param parentContainerRef The viewport whose CSS supplies the colors.
+ * @param colorOverrides The public color overrides; a change triggers a refresh.
+ * @param needsRenderRef Set when the colors change, so the stage renders again.
+ * @returns The current card colors and a revision that changes with them.
+ */
+export declare const usePivotCardColors: (parentContainerRef: RefObject<HTMLDivElement | null>, colorOverrides: Partial<PivotViewerColors> | undefined, needsRenderRef: RefObject<boolean>) => {
+    cardColorsRef: RefObject<{
+        base: string;
+        mid: string;
+        gradient: string;
+        border: string;
+        text: string;
+        textSecondary: string;
+    }>;
+    colorRevision: number;
+};
+//# sourceMappingURL=usePivotCardColors.d.ts.map

package/dist/esm/PivotViewer/components/pivot/usePivotCardColors.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePivotCardColors.d.ts","sourceRoot":"","sources":["../../../../../PivotViewer/components/pivot/usePivotCardColors.ts"],"names":[],"mappings":"AAGA,OAAO,EAAwC,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAC7E,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,gBAAa,CAAC;AAQrD;;;;;;;GAOG;AACH,eAAO,MAAM,kBAAkB,uBACP,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,kBACpC,OAAO,CAAC,iBAAiB,CAAC,GAAG,SAAS,kBACtC,SAAS,CAAC,OAAO,CAAC;;;;;;;;;;CAqBrC,CAAC"}

package/dist/esm/PivotViewer/components/pivot/usePivotCardColors.js

@@ -0,0 +1,25 @@
+import { useState, useRef, useMemo, useEffect } from 'react';
+import { createCssColorResolver, observeColorEnvironment, resolveCardColors } from './colorResolver.js';
+import { DEFAULT_COLORS } from './constants.js';
+
+const usePivotCardColors = (parentContainerRef, colorOverrides, needsRenderRef) => {
+    const [colorRevision, setColorRevision] = useState(0);
+    const cardColorsRef = useRef(DEFAULT_COLORS);
+    const cssColorResolver = useMemo(() => createCssColorResolver(), []);
+    useEffect(() => {
+        const element = parentContainerRef.current;
+        if (!element)
+            return;
+        const refreshColors = () => {
+            cardColorsRef.current = resolveCardColors(cssColorResolver, element);
+            needsRenderRef.current = true;
+            setColorRevision((revision) => revision + 1);
+        };
+        refreshColors();
+        return observeColorEnvironment(element, refreshColors);
+    }, [cssColorResolver, parentContainerRef, colorOverrides, needsRenderRef]);
+    return { cardColorsRef, colorRevision };
+};
+
+export { usePivotCardColors };
+//# sourceMappingURL=usePivotCardColors.js.map

package/dist/esm/PivotViewer/components/pivot/usePivotCardColors.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePivotCardColors.js","sources":["../../../../../PivotViewer/components/pivot/usePivotCardColors.ts"],"sourcesContent":["// Copyright (c) Cratis. All rights reserved.\n// Licensed under the MIT license. See LICENSE file in the project root for full license information.\n\nimport { useEffect, useMemo, useRef, useState, type RefObject } from 'react';\nimport type { PivotViewerColors } from '../../types';\nimport {\n    createCssColorResolver,\n    observeColorEnvironment,\n    resolveCardColors,\n} from './colorResolver';\nimport { DEFAULT_COLORS, type CardColors } from './constants';\n\n/**\n * Resolves the card colors from the viewport's CSS and refreshes them when the color environment\n * or the overrides change.\n * @param parentContainerRef The viewport whose CSS supplies the colors.\n * @param colorOverrides The public color overrides; a change triggers a refresh.\n * @param needsRenderRef Set when the colors change, so the stage renders again.\n * @returns The current card colors and a revision that changes with them.\n */\nexport const usePivotCardColors = (\n    parentContainerRef: RefObject<HTMLDivElement | null>,\n    colorOverrides: Partial<PivotViewerColors> | undefined,\n    needsRenderRef: RefObject<boolean>,\n) => {\n    const [colorRevision, setColorRevision] = useState(0);\n    const cardColorsRef = useRef<CardColors>(DEFAULT_COLORS);\n    const cssColorResolver = useMemo(() => createCssColorResolver(), []);\n\n    useEffect(() => {\n        const element = parentContainerRef.current;\n        if (!element) return;\n\n        const refreshColors = () => {\n            cardColorsRef.current = resolveCardColors(cssColorResolver, element);\n            needsRenderRef.current = true;\n            setColorRevision((revision) => revision + 1);\n        };\n\n        refreshColors();\n        return observeColorEnvironment(element, refreshColors);\n    }, [cssColorResolver, parentContainerRef, colorOverrides, needsRenderRef]);\n\n    return { cardColorsRef, colorRevision };\n};\n"],"names":[],"mappings":";;;;AAoBO,MAAM,kBAAkB,GAAG,CAC9B,kBAAoD,EACpD,cAAsD,EACtD,cAAkC,KAClC;IACA,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC;AACrD,IAAA,MAAM,aAAa,GAAG,MAAM,CAAa,cAAc,CAAC;AACxD,IAAA,MAAM,gBAAgB,GAAG,OAAO,CAAC,MAAM,sBAAsB,EAAE,EAAE,EAAE,CAAC;IAEpE,SAAS,CAAC,MAAK;AACX,QAAA,MAAM,OAAO,GAAG,kBAAkB,CAAC,OAAO;AAC1C,QAAA,IAAI,CAAC,OAAO;YAAE;QAEd,MAAM,aAAa,GAAG,MAAK;YACvB,aAAa,CAAC,OAAO,GAAG,iBAAiB,CAAC,gBAAgB,EAAE,OAAO,CAAC;AACpE,YAAA,cAAc,CAAC,OAAO,GAAG,IAAI;YAC7B,gBAAgB,CAAC,CAAC,QAAQ,KAAK,QAAQ,GAAG,CAAC,CAAC;AAChD,QAAA,CAAC;AAED,QAAA,aAAa,EAAE;AACf,QAAA,OAAO,uBAAuB,CAAC,OAAO,EAAE,aAAa,CAAC;IAC1D,CAAC,EAAE,CAAC,gBAAgB,EAAE,kBAAkB,EAAE,cAAc,EAAE,cAAc,CAAC,CAAC;AAE1E,IAAA,OAAO,EAAE,aAAa,EAAE,aAAa,EAAE;AAC3C;;"}

package/dist/esm/PivotViewer/components/pivot/usePivotGroupBackgrounds.d.ts

@@ -0,0 +1,8 @@
+import type { PivotRenderContext } from './PivotRenderContext.js';
+/**
+ * Draws the group backgrounds when the layout, grouping or colors change, and fades them in and out
+ * when switching between grouped and collection view.
+ * @param context The props, stage, and colors.
+ */
+export declare const usePivotGroupBackgrounds: <TItem extends object>({ props, stage, cardColorsRef, colorRevision, }: PivotRenderContext<TItem>) => void;
+//# sourceMappingURL=usePivotGroupBackgrounds.d.ts.map

package/dist/esm/PivotViewer/components/pivot/usePivotGroupBackgrounds.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePivotGroupBackgrounds.d.ts","sourceRoot":"","sources":["../../../../../PivotViewer/components/pivot/usePivotGroupBackgrounds.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,yBAAsB,CAAC;AAE/D;;;;GAIG;AACH,eAAO,MAAM,wBAAwB,GAAI,KAAK,SAAS,MAAM,mDAK1D,kBAAkB,CAAC,KAAK,CAAC,SA+D3B,CAAC"}

package/dist/esm/PivotViewer/components/pivot/usePivotGroupBackgrounds.js

@@ -0,0 +1,53 @@
+import { useEffect } from 'react';
+import { updateGroupBackgrounds } from './groups.js';
+
+const usePivotGroupBackgrounds = ({ props, stage, cardColorsRef, colorRevision, }) => {
+    const { layout, grouping, zoomLevel, viewMode, colorOverrides, containerRef: parentContainerRef, } = props;
+    const { groupsContainerRef, appRef, needsRenderRef, pixiReady } = stage;
+    useEffect(() => {
+        if (!groupsContainerRef.current || !parentContainerRef.current || !pixiReady)
+            return;
+        updateGroupBackgrounds(groupsContainerRef.current, parentContainerRef.current, grouping, layout, zoomLevel, cardColorsRef.current, viewMode);
+        needsRenderRef.current = true;
+        appRef.current?.renderer?.render(appRef.current.stage);
+    }, [
+        grouping,
+        layout,
+        zoomLevel,
+        viewMode,
+        pixiReady,
+        colorOverrides,
+        colorRevision,
+        appRef,
+        cardColorsRef,
+        groupsContainerRef,
+        needsRenderRef,
+        parentContainerRef,
+    ]);
+    useEffect(() => {
+        const gc = groupsContainerRef.current;
+        const app = appRef.current;
+        if (!gc || !app)
+            return;
+        const target = viewMode === 'grouped' ? 1 : 0;
+        const start = typeof gc.alpha === 'number' ? gc.alpha : 1;
+        const duration = 200;
+        if (Math.abs(start - target) < 0.01) {
+            gc.alpha = target;
+            return;
+        }
+        const t0 = performance.now();
+        const step = () => {
+            const u = Math.min(1, (performance.now() - t0) / duration);
+            const eased = u * (2 - u);
+            gc.alpha = start + (target - start) * eased;
+            app.renderer?.render(app.stage);
+            if (u < 1)
+                requestAnimationFrame(step);
+        };
+        requestAnimationFrame(step);
+    }, [viewMode, appRef, groupsContainerRef]);
+};
+
+export { usePivotGroupBackgrounds };
+//# sourceMappingURL=usePivotGroupBackgrounds.js.map

package/dist/esm/PivotViewer/components/pivot/usePivotGroupBackgrounds.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePivotGroupBackgrounds.js","sources":["../../../../../PivotViewer/components/pivot/usePivotGroupBackgrounds.ts"],"sourcesContent":["// Copyright (c) Cratis. All rights reserved.\n// Licensed under the MIT license. See LICENSE file in the project root for full license information.\n\nimport { useEffect } from 'react';\nimport { updateGroupBackgrounds as updateGroupBackgroundsExternal } from './groups';\nimport type { PivotRenderContext } from './PivotRenderContext';\n\n/**\n * Draws the group backgrounds when the layout, grouping or colors change, and fades them in and out\n * when switching between grouped and collection view.\n * @param context The props, stage, and colors.\n */\nexport const usePivotGroupBackgrounds = <TItem extends object>({\n    props,\n    stage,\n    cardColorsRef,\n    colorRevision,\n}: PivotRenderContext<TItem>) => {\n    const {\n        layout,\n        grouping,\n        zoomLevel,\n        viewMode,\n        colorOverrides,\n        containerRef: parentContainerRef,\n    } = props;\n    const { groupsContainerRef, appRef, needsRenderRef, pixiReady } = stage;\n\n    // Update group backgrounds only when layout/grouping changes\n    useEffect(() => {\n        if (!groupsContainerRef.current || !parentContainerRef.current || !pixiReady)\n            return;\n        updateGroupBackgroundsExternal(\n            groupsContainerRef.current,\n            parentContainerRef.current,\n            grouping,\n            layout,\n            zoomLevel,\n            cardColorsRef.current,\n            viewMode,\n        );\n        needsRenderRef.current = true;\n        appRef.current?.renderer?.render(appRef.current.stage);\n    }, [\n        grouping,\n        layout,\n        zoomLevel,\n        viewMode,\n        pixiReady,\n        colorOverrides,\n        colorRevision,\n        appRef,\n        cardColorsRef,\n        groupsContainerRef,\n        needsRenderRef,\n        parentContainerRef,\n    ]);\n\n    // Fade buckets background when switching view modes\n    useEffect(() => {\n        const gc = groupsContainerRef.current;\n        const app = appRef.current;\n        if (!gc || !app) return;\n        const target = viewMode === 'grouped' ? 1 : 0;\n        const start = typeof gc.alpha === 'number' ? gc.alpha : 1;\n        const duration = 200; // ms\n        if (Math.abs(start - target) < 0.01) {\n            gc.alpha = target;\n            return;\n        }\n        const t0 = performance.now();\n        const step = () => {\n            const u = Math.min(1, (performance.now() - t0) / duration);\n            const eased = u * (2 - u);\n            gc.alpha = start + (target - start) * eased;\n            app.renderer?.render(app.stage);\n            if (u < 1) requestAnimationFrame(step);\n        };\n        requestAnimationFrame(step);\n    }, [viewMode, appRef, groupsContainerRef]);\n};\n"],"names":["updateGroupBackgroundsExternal"],"mappings":";;;AAYO,MAAM,wBAAwB,GAAG,CAAuB,EAC3D,KAAK,EACL,KAAK,EACL,aAAa,EACb,aAAa,GACW,KAAI;AAC5B,IAAA,MAAM,EACF,MAAM,EACN,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,cAAc,EACd,YAAY,EAAE,kBAAkB,GACnC,GAAG,KAAK;IACT,MAAM,EAAE,kBAAkB,EAAE,MAAM,EAAE,cAAc,EAAE,SAAS,EAAE,GAAG,KAAK;IAGvE,SAAS,CAAC,MAAK;QACX,IAAI,CAAC,kBAAkB,CAAC,OAAO,IAAI,CAAC,kBAAkB,CAAC,OAAO,IAAI,CAAC,SAAS;YACxE;QACJA,sBAA8B,CAC1B,kBAAkB,CAAC,OAAO,EAC1B,kBAAkB,CAAC,OAAO,EAC1B,QAAQ,EACR,MAAM,EACN,SAAS,EACT,aAAa,CAAC,OAAO,EACrB,QAAQ,CACX;AACD,QAAA,cAAc,CAAC,OAAO,GAAG,IAAI;AAC7B,QAAA,MAAM,CAAC,OAAO,EAAE,QAAQ,EAAE,MAAM,CAAC,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC;AAC1D,IAAA,CAAC,EAAE;QACC,QAAQ;QACR,MAAM;QACN,SAAS;QACT,QAAQ;QACR,SAAS;QACT,cAAc;QACd,aAAa;QACb,MAAM;QACN,aAAa;QACb,kBAAkB;QAClB,cAAc;QACd,kBAAkB;AACrB,KAAA,CAAC;IAGF,SAAS,CAAC,MAAK;AACX,QAAA,MAAM,EAAE,GAAG,kBAAkB,CAAC,OAAO;AACrC,QAAA,MAAM,GAAG,GAAG,MAAM,CAAC,OAAO;AAC1B,QAAA,IAAI,CAAC,EAAE,IAAI,CAAC,GAAG;YAAE;AACjB,QAAA,MAAM,MAAM,GAAG,QAAQ,KAAK,SAAS,GAAG,CAAC,GAAG,CAAC;AAC7C,QAAA,MAAM,KAAK,GAAG,OAAO,EAAE,CAAC,KAAK,KAAK,QAAQ,GAAG,EAAE,CAAC,KAAK,GAAG,CAAC;QACzD,MAAM,QAAQ,GAAG,GAAG;QACpB,IAAI,IAAI,CAAC,GAAG,CAAC,KAAK,GAAG,MAAM,CAAC,GAAG,IAAI,EAAE;AACjC,YAAA,EAAE,CAAC,KAAK,GAAG,MAAM;YACjB;QACJ;AACA,QAAA,MAAM,EAAE,GAAG,WAAW,CAAC,GAAG,EAAE;QAC5B,MAAM,IAAI,GAAG,MAAK;AACd,YAAA,MAAM,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,WAAW,CAAC,GAAG,EAAE,GAAG,EAAE,IAAI,QAAQ,CAAC;YAC1D,MAAM,KAAK,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;AACzB,YAAA,EAAE,CAAC,KAAK,GAAG,KAAK,GAAG,CAAC,MAAM,GAAG,KAAK,IAAI,KAAK;YAC3C,GAAG,CAAC,QAAQ,EAAE,MAAM,CAAC,GAAG,CAAC,KAAK,CAAC;YAC/B,IAAI,CAAC,GAAG,CAAC;gBAAE,qBAAqB,CAAC,IAAI,CAAC;AAC1C,QAAA,CAAC;QACD,qBAAqB,CAAC,IAAI,CAAC;IAC/B,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,kBAAkB,CAAC,CAAC;AAC9C;;"}

package/dist/esm/PivotViewer/components/pivot/usePivotScrollSync.d.ts

@@ -0,0 +1,8 @@
+import type { PivotRenderContext } from './PivotRenderContext.js';
+/**
+ * Syncs the card sprites once per animation frame while the viewport scrolls, natively or
+ * programmatically.
+ * @param context The props, stage, transition state and colors.
+ */
+export declare const usePivotScrollSync: <TItem extends object>({ props, stage, transition, cardColorsRef, onCardClickRef, onPanStartRef, }: PivotRenderContext<TItem>) => void;
+//# sourceMappingURL=usePivotScrollSync.d.ts.map

package/dist/esm/PivotViewer/components/pivot/usePivotScrollSync.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePivotScrollSync.d.ts","sourceRoot":"","sources":["../../../../../PivotViewer/components/pivot/usePivotScrollSync.ts"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,yBAAsB,CAAC;AAE/D;;;;GAIG;AACH,eAAO,MAAM,kBAAkB,GAAI,KAAK,SAAS,MAAM,+EAOpD,kBAAkB,CAAC,KAAK,CAAC,SAoK3B,CAAC"}

package/dist/esm/PivotViewer/components/pivot/usePivotScrollSync.js

@@ -0,0 +1,100 @@
+import { useEffect } from 'react';
+import { asReactMouseEvent } from './asReactMouseEvent.js';
+import { updateCardContent, createCardSprite } from './sprites.js';
+import { syncScrollSprites } from './syncScrollSprites.js';
+
+const usePivotScrollSync = ({ props, stage, transition, cardColorsRef, onCardClickRef, onPanStartRef, }) => {
+    const { items, layout, grouping, visibleIds, cardWidth, cardHeight, zoomLevel, panX, panY, viewportWidth, viewportHeight, selectedId, viewMode, cardRenderer, resolveId, onPanStart, onCardClick, containerRef: parentContainerRef, } = props;
+    const { rootRef, groupsContainerRef, spritesRef, appRef, needsRenderRef, pixiReady } = stage;
+    const { isViewTransitionRef, transitionLayoutRef, transitionSeenIdsRef, prevScrollTopRef, prevScrollLeftRef, } = transition;
+    useEffect(() => {
+        if (!pixiReady ||
+            !parentContainerRef ||
+            !parentContainerRef.current ||
+            !appRef.current ||
+            !rootRef.current)
+            return;
+        const container = parentContainerRef.current;
+        const app = appRef.current;
+        const pendingRef = { scheduled: false };
+        const processScroll = () => {
+            pendingRef.scheduled = false;
+            try {
+                syncScrollSprites({
+                    root: rootRef.current,
+                    groupsContainer: groupsContainerRef.current,
+                    container: parentContainerRef.current,
+                    sprites: spritesRef.current,
+                    layout,
+                    visibleIds,
+                    items,
+                    cardWidth,
+                    cardHeight,
+                    panX,
+                    panY,
+                    zoomLevel,
+                    viewportWidth,
+                    viewportHeight,
+                    createCardSprite: (id, x, y) => createCardSprite(id, x, y, items, (item, e, id) => onCardClickRef.current(item, e, id), (e) => onPanStartRef.current(asReactMouseEvent(e)), cardWidth, cardHeight, cardColorsRef.current, cardRenderer, resolveId),
+                    updateCardContent: (sprite, item) => updateCardContent(sprite, item, selectedId, cardWidth, cardHeight, cardColorsRef.current, cardRenderer),
+                    isViewTransition: isViewTransitionRef.current,
+                    viewMode,
+                    transitionSeenIds: transitionSeenIdsRef.current,
+                    prevScrollTop: prevScrollTopRef.current,
+                    prevScrollLeft: prevScrollLeftRef.current,
+                }, transitionLayoutRef.current);
+                prevScrollTopRef.current = container.scrollTop || 0;
+                prevScrollLeftRef.current = container.scrollLeft || 0;
+                needsRenderRef.current = true;
+                app.renderer?.render(app.stage);
+            }
+            catch (e) {
+                console.error('[PivotCanvas] processScroll error', e);
+            }
+        };
+        const onScroll = () => {
+            if (!pendingRef.scheduled) {
+                pendingRef.scheduled = true;
+                requestAnimationFrame(processScroll);
+            }
+        };
+        container.addEventListener('scroll', onScroll, { passive: true });
+        return () => {
+            container.removeEventListener('scroll', onScroll);
+        };
+    }, [
+        pixiReady,
+        layout,
+        visibleIds,
+        items,
+        cardWidth,
+        cardHeight,
+        zoomLevel,
+        viewportWidth,
+        viewportHeight,
+        panX,
+        panY,
+        grouping,
+        viewMode,
+        selectedId,
+        onCardClick,
+        onPanStart,
+        appRef,
+        cardColorsRef,
+        groupsContainerRef,
+        isViewTransitionRef,
+        needsRenderRef,
+        onCardClickRef,
+        onPanStartRef,
+        parentContainerRef,
+        prevScrollLeftRef,
+        prevScrollTopRef,
+        rootRef,
+        spritesRef,
+        transitionLayoutRef,
+        transitionSeenIdsRef,
+    ]);
+};
+
+export { usePivotScrollSync };
+//# sourceMappingURL=usePivotScrollSync.js.map

package/dist/esm/PivotViewer/components/pivot/usePivotScrollSync.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePivotScrollSync.js","sources":["../../../../../PivotViewer/components/pivot/usePivotScrollSync.ts"],"sourcesContent":["// Copyright (c) Cratis. All rights reserved.\n// Licensed under the MIT license. See LICENSE file in the project root for full license information.\n\nimport { useEffect } from 'react';\nimport { asReactMouseEvent } from './asReactMouseEvent';\nimport type { CardSprite } from './constants';\nimport {\n    createCardSprite as createCardSpriteExternal,\n    updateCardContent as updateCardContentExternal,\n} from './sprites';\nimport { syncScrollSprites } from './syncScrollSprites';\nimport type { PivotRenderContext } from './PivotRenderContext';\n\n/**\n * Syncs the card sprites once per animation frame while the viewport scrolls, natively or\n * programmatically.\n * @param context The props, stage, transition state and colors.\n */\nexport const usePivotScrollSync = <TItem extends object>({\n    props,\n    stage,\n    transition,\n    cardColorsRef,\n    onCardClickRef,\n    onPanStartRef,\n}: PivotRenderContext<TItem>) => {\n    const {\n        items,\n        layout,\n        grouping,\n        visibleIds,\n        cardWidth,\n        cardHeight,\n        zoomLevel,\n        panX,\n        panY,\n        viewportWidth,\n        viewportHeight,\n        selectedId,\n        viewMode,\n        cardRenderer,\n        resolveId,\n        onPanStart,\n        onCardClick,\n        containerRef: parentContainerRef,\n    } = props;\n    const { rootRef, groupsContainerRef, spritesRef, appRef, needsRenderRef, pixiReady } =\n        stage;\n    const {\n        isViewTransitionRef,\n        transitionLayoutRef,\n        transitionSeenIdsRef,\n        prevScrollTopRef,\n        prevScrollLeftRef,\n    } = transition;\n\n    // Listen to native scroll events on the parent container so we update the\n    // Pixi world immediately when the user scrolls (native scrollbar or\n    // programmatic). This ensures `syncSpritesToViewport` runs on scroll and\n    // creates/destroys sprites as the viewport moves.\n    useEffect(() => {\n        if (\n            !pixiReady ||\n            !parentContainerRef ||\n            !parentContainerRef.current ||\n            !appRef.current ||\n            !rootRef.current\n        )\n            return;\n\n        const container = parentContainerRef.current;\n        const app = appRef.current;\n\n        // rAF-batched scroll handling: process scroll once per animation frame to avoid heavy synchronous work inside\n        // the scroll event which causes jank and de-synchronisation between the\n        // compositor and Pixi render updates.\n        const pendingRef = { scheduled: false } as { scheduled: boolean };\n\n        const processScroll = () => {\n            pendingRef.scheduled = false;\n            try {\n                // Note: We delegate root/groups container positioning to syncSpritesToViewport\n                // because it encapsulates the logic for conditional vertical alignment (offsetY)\n                // in different view modes. Manually setting position here would overwrite that logic.\n\n                syncScrollSprites(\n                    {\n                        root: rootRef.current,\n                        groupsContainer: groupsContainerRef.current,\n                        container: parentContainerRef.current,\n                        sprites: spritesRef.current,\n                        layout,\n                        visibleIds,\n                        items,\n                        cardWidth,\n                        cardHeight,\n                        panX,\n                        panY,\n                        zoomLevel,\n                        viewportWidth,\n                        viewportHeight,\n                        createCardSprite: (id: string | number, x: number, y: number) =>\n                            createCardSpriteExternal(\n                                id,\n                                x,\n                                y,\n                                items as TItem[],\n                                (item, e, id) => onCardClickRef.current(item, e, id),\n                                (e) => onPanStartRef.current(asReactMouseEvent(e)),\n                                cardWidth,\n                                cardHeight,\n                                cardColorsRef.current,\n                                cardRenderer,\n                                resolveId,\n                            ),\n                        updateCardContent: (sprite: CardSprite, item: TItem) =>\n                            updateCardContentExternal(\n                                sprite,\n                                item,\n                                selectedId,\n                                cardWidth,\n                                cardHeight,\n                                cardColorsRef.current,\n                                cardRenderer,\n                            ),\n                        isViewTransition: isViewTransitionRef.current,\n                        viewMode,\n                        transitionSeenIds: transitionSeenIdsRef.current,\n                        prevScrollTop: prevScrollTopRef.current,\n                        prevScrollLeft: prevScrollLeftRef.current,\n                    },\n                    transitionLayoutRef.current,\n                );\n\n                // Update previous scroll position for next frame\n                prevScrollTopRef.current = container.scrollTop || 0;\n                prevScrollLeftRef.current = container.scrollLeft || 0;\n                needsRenderRef.current = true;\n                app.renderer?.render(app.stage);\n            } catch (e) {\n                console.error('[PivotCanvas] processScroll error', e);\n            }\n        };\n\n        const onScroll = () => {\n            // schedule the work for the next animation frame\n            if (!pendingRef.scheduled) {\n                pendingRef.scheduled = true;\n                requestAnimationFrame(processScroll);\n            }\n        };\n\n        container.addEventListener('scroll', onScroll, { passive: true });\n\n        return () => {\n            container.removeEventListener('scroll', onScroll);\n        };\n    }, [\n        pixiReady,\n        layout,\n        visibleIds,\n        items,\n        cardWidth,\n        cardHeight,\n        zoomLevel,\n        viewportWidth,\n        viewportHeight,\n        panX,\n        panY,\n        grouping,\n        viewMode,\n        selectedId,\n        onCardClick,\n        onPanStart,\n        appRef,\n        cardColorsRef,\n        groupsContainerRef,\n        isViewTransitionRef,\n        needsRenderRef,\n        onCardClickRef,\n        onPanStartRef,\n        parentContainerRef,\n        prevScrollLeftRef,\n        prevScrollTopRef,\n        rootRef,\n        spritesRef,\n        transitionLayoutRef,\n        transitionSeenIdsRef,\n    ]);\n};\n"],"names":["createCardSpriteExternal","updateCardContentExternal"],"mappings":"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"}

package/dist/esm/PivotViewer/components/pivot/usePivotSelectionHighlight.d.ts

@@ -0,0 +1,7 @@
+import type { PivotRenderContext } from './PivotRenderContext.js';
+/**
+ * Redraws the cards when the selection changes and the group highlight when the hovered group changes.
+ * @param context The props, stage and colors.
+ */
+export declare const usePivotSelectionHighlight: <TItem extends object>({ props, stage, cardColorsRef, }: PivotRenderContext<TItem>) => void;
+//# sourceMappingURL=usePivotSelectionHighlight.d.ts.map

package/dist/esm/PivotViewer/components/pivot/usePivotSelectionHighlight.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePivotSelectionHighlight.d.ts","sourceRoot":"","sources":["../../../../../PivotViewer/components/pivot/usePivotSelectionHighlight.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,yBAAsB,CAAC;AAE/D;;;GAGG;AACH,eAAO,MAAM,0BAA0B,GAAI,KAAK,SAAS,MAAM,oCAI5D,kBAAkB,CAAC,KAAK,CAAC,SAyD3B,CAAC"}

package/dist/esm/PivotViewer/components/pivot/usePivotSelectionHighlight.js

@@ -0,0 +1,35 @@
+import { useEffect } from 'react';
+import { updateHighlight } from './groups.js';
+import { updateCardContent } from './sprites.js';
+
+const usePivotSelectionHighlight = ({ props, stage, cardColorsRef, }) => {
+    const { items, layout, grouping, cardWidth, cardHeight, zoomLevel, selectedId, hoveredGroupIndex, cardRenderer, containerRef: parentContainerRef, } = props;
+    const { rootRef, groupsContainerRef, spritesRef, appRef, needsRenderRef } = stage;
+    useEffect(() => {
+        if (!rootRef.current)
+            return;
+        updateSelection();
+        needsRenderRef.current = true;
+        appRef.current?.renderer.render(appRef.current.stage);
+    }, [selectedId, items, appRef, needsRenderRef, rootRef]);
+    useEffect(() => {
+        if (!rootRef.current)
+            return;
+        updateHighlight$1();
+        needsRenderRef.current = true;
+        appRef.current?.renderer.render(appRef.current.stage);
+    }, [hoveredGroupIndex, layout, grouping, appRef, needsRenderRef, rootRef]);
+    function updateSelection() {
+        const sprites = spritesRef.current;
+        for (const sprite of sprites.values()) {
+            const val = items[Number(sprite.itemId)];
+            updateCardContent(sprite, val, selectedId, cardWidth, cardHeight, cardColorsRef.current, cardRenderer);
+        }
+    }
+    function updateHighlight$1() {
+        updateHighlight(groupsContainerRef.current, parentContainerRef.current, grouping, layout, hoveredGroupIndex, cardWidth, zoomLevel);
+    }
+};
+
+export { usePivotSelectionHighlight };
+//# sourceMappingURL=usePivotSelectionHighlight.js.map

package/dist/esm/PivotViewer/components/pivot/usePivotSelectionHighlight.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePivotSelectionHighlight.js","sources":["../../../../../PivotViewer/components/pivot/usePivotSelectionHighlight.ts"],"sourcesContent":["// Copyright (c) Cratis. All rights reserved.\n// Licensed under the MIT license. See LICENSE file in the project root for full license information.\n\nimport { useEffect } from 'react';\nimport { updateHighlight as updateHighlightExternal } from './groups';\nimport { updateCardContent as updateCardContentExternal } from './sprites';\nimport type { PivotRenderContext } from './PivotRenderContext';\n\n/**\n * Redraws the cards when the selection changes and the group highlight when the hovered group changes.\n * @param context The props, stage and colors.\n */\nexport const usePivotSelectionHighlight = <TItem extends object>({\n    props,\n    stage,\n    cardColorsRef,\n}: PivotRenderContext<TItem>) => {\n    const {\n        items,\n        layout,\n        grouping,\n        cardWidth,\n        cardHeight,\n        zoomLevel,\n        selectedId,\n        hoveredGroupIndex,\n        cardRenderer,\n        containerRef: parentContainerRef,\n    } = props;\n    const { rootRef, groupsContainerRef, spritesRef, appRef, needsRenderRef } = stage;\n\n    useEffect(() => {\n        if (!rootRef.current) return;\n        updateSelection();\n        needsRenderRef.current = true;\n        appRef.current?.renderer.render(appRef.current.stage);\n    }, [selectedId, items, appRef, needsRenderRef, rootRef]);\n\n    useEffect(() => {\n        if (!rootRef.current) return;\n        updateHighlight();\n        needsRenderRef.current = true;\n        appRef.current?.renderer.render(appRef.current.stage);\n    }, [hoveredGroupIndex, layout, grouping, appRef, needsRenderRef, rootRef]);\n\n    function updateSelection() {\n        const sprites = spritesRef.current;\n\n        for (const sprite of sprites.values()) {\n            const val = (items as TItem[])[Number(sprite.itemId)];\n            updateCardContentExternal(\n                sprite,\n                val,\n                selectedId,\n                cardWidth,\n                cardHeight,\n                cardColorsRef.current,\n                cardRenderer,\n            );\n        }\n    }\n\n    function updateHighlight() {\n        updateHighlightExternal(\n            groupsContainerRef.current,\n            parentContainerRef.current,\n            grouping,\n            layout,\n            hoveredGroupIndex,\n            cardWidth,\n            zoomLevel,\n        );\n    }\n};\n"],"names":["updateHighlight","updateCardContentExternal","updateHighlightExternal"],"mappings":";;;;AAYO,MAAM,0BAA0B,GAAG,CAAuB,EAC7D,KAAK,EACL,KAAK,EACL,aAAa,GACW,KAAI;IAC5B,MAAM,EACF,KAAK,EACL,MAAM,EACN,QAAQ,EACR,SAAS,EACT,UAAU,EACV,SAAS,EACT,UAAU,EACV,iBAAiB,EACjB,YAAY,EACZ,YAAY,EAAE,kBAAkB,GACnC,GAAG,KAAK;AACT,IAAA,MAAM,EAAE,OAAO,EAAE,kBAAkB,EAAE,UAAU,EAAE,MAAM,EAAE,cAAc,EAAE,GAAG,KAAK;IAEjF,SAAS,CAAC,MAAK;QACX,IAAI,CAAC,OAAO,CAAC,OAAO;YAAE;AACtB,QAAA,eAAe,EAAE;AACjB,QAAA,cAAc,CAAC,OAAO,GAAG,IAAI;AAC7B,QAAA,MAAM,CAAC,OAAO,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC;AACzD,IAAA,CAAC,EAAE,CAAC,UAAU,EAAE,KAAK,EAAE,MAAM,EAAE,cAAc,EAAE,OAAO,CAAC,CAAC;IAExD,SAAS,CAAC,MAAK;QACX,IAAI,CAAC,OAAO,CAAC,OAAO;YAAE;AACtB,QAAAA,iBAAe,EAAE;AACjB,QAAA,cAAc,CAAC,OAAO,GAAG,IAAI;AAC7B,QAAA,MAAM,CAAC,OAAO,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC;AACzD,IAAA,CAAC,EAAE,CAAC,iBAAiB,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,cAAc,EAAE,OAAO,CAAC,CAAC;AAE1E,IAAA,SAAS,eAAe,GAAA;AACpB,QAAA,MAAM,OAAO,GAAG,UAAU,CAAC,OAAO;QAElC,KAAK,MAAM,MAAM,IAAI,OAAO,CAAC,MAAM,EAAE,EAAE;YACnC,MAAM,GAAG,GAAI,KAAiB,CAAC,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC;AACrD,YAAAC,iBAAyB,CACrB,MAAM,EACN,GAAG,EACH,UAAU,EACV,SAAS,EACT,UAAU,EACV,aAAa,CAAC,OAAO,EACrB,YAAY,CACf;QACL;IACJ;AAEA,IAAA,SAASD,iBAAe,GAAA;AACpB,QAAAE,eAAuB,CACnB,kBAAkB,CAAC,OAAO,EAC1B,kBAAkB,CAAC,OAAO,EAC1B,QAAQ,EACR,MAAM,EACN,iBAAiB,EACjB,SAAS,EACT,SAAS,CACZ;IACL;AACJ;;"}

package/dist/esm/PivotViewer/components/pivot/usePivotSpriteSync.d.ts

@@ -0,0 +1,8 @@
+import type { PivotRenderContext } from './PivotRenderContext.js';
+/**
+ * Keeps the card sprites in step with the layout, filter, zoom and pan, starting transitions when the
+ * view, grouping or layout changes and running the animation loop.
+ * @param context The props, stage, transition state and colors.
+ */
+export declare const usePivotSpriteSync: <TItem extends object>({ props, stage, transition, cardColorsRef, colorRevision, onCardClickRef, }: PivotRenderContext<TItem>) => void;
+//# sourceMappingURL=usePivotSpriteSync.d.ts.map

package/dist/esm/PivotViewer/components/pivot/usePivotSpriteSync.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePivotSpriteSync.d.ts","sourceRoot":"","sources":["../../../../../PivotViewer/components/pivot/usePivotSpriteSync.ts"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,yBAAsB,CAAC;AAE/D;;;;GAIG;AACH,eAAO,MAAM,kBAAkB,GAAI,KAAK,SAAS,MAAM,+EAOpD,kBAAkB,CAAC,KAAK,CAAC,SAuM3B,CAAC"}