@cratis/components 0.1.9

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

@@ -0,0 +1,61 @@
+import { DEFAULT_COLORS } from './constants.js';
+
+function createCssColorResolver() {
+    const canvas = document.createElement('canvas');
+    const ctx = canvas.getContext('2d');
+    const parseHex = (val) => {
+        if (!val.startsWith('#'))
+            return null;
+        const hex = val.slice(1);
+        const normalized = hex.length === 3
+            ? hex.split('').map((c) => c + c).join('')
+            : hex.length === 4
+                ? hex.slice(0, 3).split('').map((c) => c + c).join('')
+                : hex.length === 6
+                    ? hex
+                    : hex.length === 8
+                        ? hex.slice(0, 6)
+                        : null;
+        return normalized ? Number.parseInt(normalized, 16) : null;
+    };
+    return (cssValue, fallback) => {
+        if (!ctx) {
+            return fallback;
+        }
+        ctx.fillStyle = cssValue.trim();
+        const resolved = ctx.fillStyle;
+        const hex = parseHex(resolved);
+        if (hex !== null && Number.isFinite(hex)) {
+            return hex;
+        }
+        if (resolved.startsWith('rgb')) {
+            const nums = resolved
+                .replace(/rgba?\(/, '')
+                .replace(/\)/, '')
+                .split(',')
+                .map((n) => Number.parseFloat(n.trim()))
+                .filter((n) => !Number.isNaN(n));
+            if (nums.length >= 3) {
+                const [r, g, b] = nums;
+                return ((r & 0xff) << 16) | ((g & 0xff) << 8) | (b & 0xff);
+            }
+        }
+        return fallback;
+    };
+}
+function resolveCardColors(cssColorResolver) {
+    const root = document.documentElement;
+    const style = getComputedStyle(root);
+    const getVar = (name, fallback) => cssColorResolver(style.getPropertyValue(name) || name, fallback);
+    return {
+        base: getVar('--surface-b', DEFAULT_COLORS.base),
+        mid: getVar('--surface-a', DEFAULT_COLORS.mid),
+        gradient: getVar('--surface-ground', DEFAULT_COLORS.gradient),
+        border: getVar('--surface-border', DEFAULT_COLORS.border),
+        text: getVar('--text-color', DEFAULT_COLORS.text),
+        textSecondary: getVar('--text-color-secondary', DEFAULT_COLORS.textSecondary),
+    };
+}
+
+export { createCssColorResolver, resolveCardColors };
+//# sourceMappingURL=colorResolver.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"colorResolver.js","sources":["../../../../../PivotViewer/components/pivot/colorResolver.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 { DEFAULT_COLORS, type CardColors } from './constants';\n\nexport function createCssColorResolver() {\n  const canvas = document.createElement('canvas');\n  const ctx = canvas.getContext('2d');\n\n  const parseHex = (val: string): number | null => {\n    if (!val.startsWith('#')) return null;\n    const hex = val.slice(1);\n    const normalized = hex.length === 3\n      ? hex.split('').map((c) => c + c).join('')\n      : hex.length === 4\n        ? hex.slice(0, 3).split('').map((c) => c + c).join('')\n        : hex.length === 6\n          ? hex\n          : hex.length === 8\n            ? hex.slice(0, 6)\n            : null;\n    return normalized ? Number.parseInt(normalized, 16) : null;\n  };\n\n  return (cssValue: string, fallback: number): number => {\n    if (!ctx) {\n      return fallback;\n    }\n    ctx.fillStyle = cssValue.trim();\n    const resolved = ctx.fillStyle; // normalized by canvas\n    const hex = parseHex(resolved);\n    if (hex !== null && Number.isFinite(hex)) {\n      return hex;\n    }\n\n    if (resolved.startsWith('rgb')) {\n      const nums = resolved\n        .replace(/rgba?\\(/, '')\n        .replace(/\\)/, '')\n        .split(',')\n        .map((n) => Number.parseFloat(n.trim()))\n        .filter((n) => !Number.isNaN(n));\n      if (nums.length >= 3) {\n        const [r, g, b] = nums;\n        return ((r & 0xff) << 16) | ((g & 0xff) << 8) | (b & 0xff);\n      }\n    }\n\n    return fallback;\n  };\n}\n\nexport function resolveCardColors(cssColorResolver: (s: string, f: number) => number): CardColors {\n  const root = document.documentElement;\n  const style = getComputedStyle(root);\n  const getVar = (name: string, fallback: number) =>\n    cssColorResolver(style.getPropertyValue(name) || name, fallback);\n\n  return {\n    base: getVar('--surface-b', DEFAULT_COLORS.base),\n    mid: getVar('--surface-a', DEFAULT_COLORS.mid),\n    gradient: getVar('--surface-ground', DEFAULT_COLORS.gradient),\n    border: getVar('--surface-border', DEFAULT_COLORS.border),\n    text: getVar('--text-color', DEFAULT_COLORS.text),\n    textSecondary: getVar('--text-color-secondary', DEFAULT_COLORS.textSecondary),\n  };\n}\n"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,38 @@
+import type * as PIXI from 'pixi.js';
+export declare const ANIMATION_SPEED = 0.15;
+export declare const CARD_PADDING = 10;
+export declare const CARD_RADIUS = 12;
+export declare const CARD_GAP = 8;
+export declare const DEFAULT_COLORS: {
+    base: number;
+    mid: number;
+    gradient: number;
+    border: number;
+    text: number;
+    textSecondary: number;
+};
+export type CardColors = typeof DEFAULT_COLORS;
+export interface CardSprite {
+    container: PIXI.Container;
+    graphics: PIXI.Graphics;
+    titleText: PIXI.Text;
+    labelsText: PIXI.Text;
+    valuesText: PIXI.Text;
+    itemId: number | string;
+    targetX: number;
+    targetY: number;
+    currentX: number;
+    currentY: number;
+    animationStartTime?: number;
+    animationDelay?: number;
+    startX?: number;
+    startY?: number;
+    lastSelectedId?: string | number | null;
+    lastCardColors?: CardColors;
+    lastTitle?: string;
+    lastLabels?: string;
+    lastValues?: string;
+}
+declare const _default: {};
+export default _default;
+//# sourceMappingURL=constants.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../../../PivotViewer/components/pivot/constants.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,IAAI,MAAM,SAAS,CAAC;AAErC,eAAO,MAAM,eAAe,OAAO,CAAC;AACpC,eAAO,MAAM,YAAY,KAAK,CAAC;AAC/B,eAAO,MAAM,WAAW,KAAK,CAAC;AAC9B,eAAO,MAAM,QAAQ,IAAI,CAAC;AAE1B,eAAO,MAAM,cAAc;;;;;;;CAO1B,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG,OAAO,cAAc,CAAC;AAE/C,MAAM,WAAW,UAAU;IACzB,SAAS,EAAE,IAAI,CAAC,SAAS,CAAC;IAC1B,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC;IACxB,SAAS,EAAE,IAAI,CAAC,IAAI,CAAC;IACrB,UAAU,EAAE,IAAI,CAAC,IAAI,CAAC;IACtB,UAAU,EAAE,IAAI,CAAC,IAAI,CAAC;IACtB,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IAEjB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB,cAAc,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC;IACxC,cAAc,CAAC,EAAE,UAAU,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;;AAED,wBAAkB"}

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

@@ -0,0 +1,14 @@
+const CARD_PADDING = 10;
+const CARD_RADIUS = 12;
+const CARD_GAP = 8;
+const DEFAULT_COLORS = {
+    base: 0x1b2b2f,
+    mid: 0x234445,
+    gradient: 0x2f5b56,
+    border: 0x5ad1a0,
+    text: 0xffffff,
+    textSecondary: 0x8899aa,
+};
+
+export { CARD_GAP, CARD_PADDING, CARD_RADIUS, DEFAULT_COLORS };
+//# sourceMappingURL=constants.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"constants.js","sources":["../../../../../PivotViewer/components/pivot/constants.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 type * as PIXI from 'pixi.js';\n\nexport const ANIMATION_SPEED = 0.15;\nexport const CARD_PADDING = 10;\nexport const CARD_RADIUS = 12;\nexport const CARD_GAP = 8; // Gap between cards (must match layout gap)\n\nexport const DEFAULT_COLORS = {\n  base: 0x1b2b2f,\n  mid: 0x234445,\n  gradient: 0x2f5b56,\n  border: 0x5ad1a0,\n  text: 0xffffff,\n  textSecondary: 0x8899aa,\n};\n\nexport type CardColors = typeof DEFAULT_COLORS;\n\nexport interface CardSprite {\n  container: PIXI.Container;\n  graphics: PIXI.Graphics;\n  titleText: PIXI.Text;\n  labelsText: PIXI.Text;\n  valuesText: PIXI.Text;\n  itemId: number | string;\n  targetX: number;\n  targetY: number;\n  currentX: number;\n  currentY: number;\n  // Animation state\n  animationStartTime?: number;\n  animationDelay?: number;\n  startX?: number;\n  startY?: number;\n  // Cache state to avoid unnecessary redraws\n  lastSelectedId?: string | number | null;\n  lastCardColors?: CardColors;\n  lastTitle?: string;\n  lastLabels?: string;\n  lastValues?: string;\n}\n\nexport default {};\n"],"names":[],"mappings":"AAMO,MAAM,YAAY,GAAG;AACrB,MAAM,WAAW,GAAG;AACpB,MAAM,QAAQ,GAAG;AAEjB,MAAM,cAAc,GAAG;AAC5B,IAAA,IAAI,EAAE,QAAQ;AACd,IAAA,GAAG,EAAE,QAAQ;AACb,IAAA,QAAQ,EAAE,QAAQ;AAClB,IAAA,MAAM,EAAE,QAAQ;AAChB,IAAA,IAAI,EAAE,QAAQ;AACd,IAAA,aAAa,EAAE,QAAQ;;;;;"}

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

@@ -0,0 +1,6 @@
+import type { CardSprite, CardColors } from './constants';
+export declare function createCardSprite<TItem extends object>(id: number | string, x: number, y: number, items: TItem[], onCardClick: (item: TItem, e: MouseEvent, id: number | string) => void, onPanStart: (e: MouseEvent) => void, cardWidth: number, cardHeight: number, cardColors: CardColors): CardSprite;
+export declare function destroySprite(sprite: CardSprite): void;
+export declare function clearSpritePool(): void;
+export declare function updateCardContent<TItem extends object>(sprite: CardSprite, item: TItem, selectedId: string | number | null, cardWidth: number, cardHeight: number, cardColors: CardColors): void;
+//# sourceMappingURL=sprites.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sprites.d.ts","sourceRoot":"","sources":["../../../../../PivotViewer/components/pivot/sprites.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAI1D,wBAAgB,gBAAgB,CAAC,KAAK,SAAS,MAAM,EACnD,EAAE,EAAE,MAAM,GAAG,MAAM,EACnB,CAAC,EAAE,MAAM,EACT,CAAC,EAAE,MAAM,EACT,KAAK,EAAE,KAAK,EAAE,EACd,WAAW,EAAE,CAAC,IAAI,EAAE,KAAK,EAAE,CAAC,EAAE,UAAU,EAAE,EAAE,EAAE,MAAM,GAAG,MAAM,KAAK,IAAI,EACtE,UAAU,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,EACnC,SAAS,EAAE,MAAM,EACjB,UAAU,EAAE,MAAM,EAClB,UAAU,EAAE,UAAU,GACrB,UAAU,CA+GZ;AAED,wBAAgB,aAAa,CAAC,MAAM,EAAE,UAAU,QAS/C;AAED,wBAAgB,eAAe,SAa9B;AAED,wBAAgB,iBAAiB,CAAC,KAAK,SAAS,MAAM,EACpD,MAAM,EAAE,UAAU,EAClB,IAAI,EAAE,KAAK,EACX,UAAU,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,EAClC,SAAS,EAAE,MAAM,EACjB,UAAU,EAAE,MAAM,EAClB,UAAU,EAAE,UAAU,QAoGvB"}

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

@@ -0,0 +1,203 @@
+import * as PIXI from 'pixi.js';
+import { CARD_RADIUS, CARD_PADDING, CARD_GAP } from './constants.js';
+
+const spritePool = [];
+function createCardSprite(id, x, y, items, onCardClick, onPanStart, cardWidth, cardHeight, cardColors) {
+    if (spritePool.length > 0) {
+        const sprite = spritePool.pop();
+        sprite.container.visible = true;
+        sprite.container.alpha = 1;
+        sprite.container.position.set(x, y);
+        sprite.itemId = id;
+        sprite.targetX = x;
+        sprite.targetY = y;
+        sprite.currentX = x;
+        sprite.currentY = y;
+        delete sprite.animationStartTime;
+        delete sprite.animationDelay;
+        delete sprite.startX;
+        delete sprite.startY;
+        sprite.lastSelectedId = null;
+        sprite.lastCardColors = undefined;
+        sprite.lastTitle = undefined;
+        sprite.lastLabels = undefined;
+        sprite.lastValues = undefined;
+        sprite.container._eventContext = { items, onCardClick, id };
+        return sprite;
+    }
+    const container = new PIXI.Container();
+    container.eventMode = 'static';
+    container.cursor = 'pointer';
+    container.position.set(x, y);
+    container._eventContext = { items, onCardClick, id };
+    const graphics = new PIXI.Graphics();
+    const actualWidth = cardWidth - CARD_GAP;
+    const actualHeight = cardHeight - CARD_GAP;
+    const offsetX = CARD_GAP / 2;
+    const offsetY = CARD_GAP / 2;
+    const gradient = new PIXI.FillGradient(0, offsetY, 0, offsetY + actualHeight);
+    gradient.addColorStop(0, cardColors.mid);
+    gradient.addColorStop(1, cardColors.base);
+    graphics.roundRect(offsetX, offsetY, actualWidth, actualHeight, CARD_RADIUS);
+    graphics.fill(gradient);
+    container.addChild(graphics);
+    const titleText = new PIXI.Text('', {
+        fontSize: 13,
+        fill: cardColors.text,
+        fontWeight: '600',
+        lineHeight: 18,
+        wordWrap: false,
+    });
+    titleText.position.set(offsetX + CARD_PADDING, offsetY + CARD_PADDING);
+    container.addChild(titleText);
+    const labelsText = new PIXI.Text('', {
+        fontSize: 11,
+        fill: cardColors.textSecondary,
+        fontWeight: '400',
+        lineHeight: 18,
+    });
+    labelsText.position.set(offsetX + CARD_PADDING, offsetY + CARD_PADDING + 40);
+    container.addChild(labelsText);
+    const valuesText = new PIXI.Text('', {
+        fontSize: 11,
+        fill: cardColors.text,
+        fontWeight: '500',
+        lineHeight: 18,
+        wordWrap: false,
+    });
+    valuesText.position.set(offsetX + CARD_PADDING + 65, offsetY + CARD_PADDING + 40);
+    container.addChild(valuesText);
+    container.on('click', (e) => {
+        e.stopPropagation();
+        const ctx = container._eventContext;
+        const itemsMap = ctx.items;
+        const item = itemsMap[String(ctx.id)];
+        if (item) {
+            ctx.onCardClick(item, e.nativeEvent, ctx.id);
+        }
+    });
+    container.on('pointerdown', (e) => {
+        e.stopPropagation();
+    });
+    return {
+        container,
+        graphics,
+        titleText,
+        labelsText,
+        valuesText,
+        itemId: id,
+        targetX: x,
+        targetY: y,
+        currentX: x,
+        currentY: y,
+    };
+}
+function destroySprite(sprite) {
+    if (sprite.container && sprite.container.parent) {
+        sprite.container.parent.removeChild(sprite.container);
+    }
+    if (sprite.container) {
+        sprite.container.visible = false;
+    }
+    spritePool.push(sprite);
+}
+function clearSpritePool() {
+    for (const sprite of spritePool) {
+        try {
+            sprite.graphics?.destroy();
+            sprite.titleText?.destroy();
+            sprite.labelsText?.destroy();
+            sprite.valuesText?.destroy();
+            sprite.container?.destroy();
+        }
+        catch (e) {
+        }
+    }
+    spritePool.length = 0;
+}
+function updateCardContent(sprite, item, selectedId, cardWidth, cardHeight, cardColors) {
+    if (!item)
+        return;
+    const event = item;
+    const eventType = event.type || event.name || event.title || 'Event';
+    const timeStr = event.occurred ? new Date(event.occurred).toLocaleString('en-US', {
+        month: '2-digit',
+        day: '2-digit',
+        year: 'numeric',
+        hour: '2-digit',
+        minute: '2-digit',
+        hour12: false
+    }).replace(',', '') : '';
+    const correlation = event.correlationId || event.correlation || '';
+    const correlationShort = correlation ? String(correlation).substring(0, 12) + '...' : '';
+    const maxTitleLength = 20;
+    const titleDisplay = eventType.length > maxTitleLength
+        ? eventType.substring(0, maxTitleLength) + '...'
+        : eventType;
+    const maxTypeLength = 16;
+    const typeDisplay = eventType.length > maxTypeLength
+        ? eventType.substring(0, maxTypeLength) + '...'
+        : eventType;
+    const colors = cardColors;
+    const labelsText = 'Type\nOccurred\nCorrelation';
+    const valuesText = `${typeDisplay}\n${timeStr}\n${correlationShort}`;
+    const colorsChanged = sprite.lastCardColors !== colors;
+    if (sprite.lastTitle !== titleDisplay) {
+        sprite.titleText.text = titleDisplay;
+        sprite.lastTitle = titleDisplay;
+    }
+    if (sprite.lastLabels !== labelsText) {
+        sprite.labelsText.text = labelsText;
+        sprite.lastLabels = labelsText;
+    }
+    if (colorsChanged) {
+        sprite.labelsText.style.fill = colors.textSecondary;
+    }
+    if (sprite.lastValues !== valuesText) {
+        sprite.valuesText.text = valuesText;
+        sprite.lastValues = valuesText;
+    }
+    if (colorsChanged) {
+        sprite.valuesText.style.fill = colors.text;
+    }
+    sprite.titleText.visible = true;
+    sprite.labelsText.visible = true;
+    sprite.valuesText.visible = true;
+    const isSelected = sprite.itemId === selectedId;
+    if (sprite.lastSelectedId === selectedId && !colorsChanged && sprite.graphics) {
+        return;
+    }
+    sprite.lastSelectedId = selectedId;
+    sprite.lastCardColors = cardColors;
+    if (sprite.graphics) {
+        sprite.graphics.clear();
+    }
+    else {
+        sprite.graphics = new PIXI.Graphics();
+        sprite.container.addChildAt(sprite.graphics, 0);
+    }
+    const actualWidth = cardWidth - CARD_GAP;
+    const actualHeight = cardHeight - CARD_GAP;
+    const offsetX = CARD_GAP / 2;
+    const offsetY = CARD_GAP / 2;
+    const gradient = new PIXI.FillGradient(0, offsetY, 0, offsetY + actualHeight);
+    if (isSelected) {
+        gradient.addColorStop(0, colors.gradient);
+        gradient.addColorStop(1, colors.mid);
+    }
+    else {
+        gradient.addColorStop(0, colors.mid);
+        gradient.addColorStop(1, colors.base);
+    }
+    sprite.graphics.roundRect(offsetX, offsetY, actualWidth, actualHeight, CARD_RADIUS);
+    sprite.graphics.fill(gradient);
+    if (isSelected) {
+        sprite.graphics.stroke({ width: 2, color: colors.border });
+    }
+    else {
+        sprite.graphics.stroke({ width: 1, color: colors.border, alpha: 0.35 });
+    }
+}
+
+export { clearSpritePool, createCardSprite, destroySprite, updateCardContent };
+//# sourceMappingURL=sprites.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sprites.js","sources":["../../../../../PivotViewer/components/pivot/sprites.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 * as PIXI from 'pixi.js';\nimport { CARD_GAP, CARD_PADDING, CARD_RADIUS } from './constants';\nimport type { CardSprite, CardColors } from './constants';\n\nconst spritePool: CardSprite[] = [];\n\nexport function createCardSprite<TItem extends object>(\n  id: number | string,\n  x: number,\n  y: number,\n  items: TItem[],\n  onCardClick: (item: TItem, e: MouseEvent, id: number | string) => void,\n  onPanStart: (e: MouseEvent) => void,\n  cardWidth: number,\n  cardHeight: number,\n  cardColors: CardColors,\n): CardSprite {\n  if (spritePool.length > 0) {\n    const sprite = spritePool.pop()!;\n    sprite.container.visible = true;\n    sprite.container.alpha = 1;\n    sprite.container.position.set(x, y);\n    sprite.itemId = id;\n    sprite.targetX = x;\n    sprite.targetY = y;\n    sprite.currentX = x;\n    sprite.currentY = y;\n\n    // Reset animation state\n    delete sprite.animationStartTime;\n    delete sprite.animationDelay;\n    delete sprite.startX;\n    delete sprite.startY;\n\n    // Reset cache\n    sprite.lastSelectedId = null;\n    sprite.lastCardColors = undefined;\n    sprite.lastTitle = undefined;\n    sprite.lastLabels = undefined;\n    sprite.lastValues = undefined;\n\n    // Update event context\n    (sprite.container as any)._eventContext = { items, onCardClick, id };\n\n    return sprite;\n  }\n\n  const container = new PIXI.Container();\n  container.eventMode = 'static';\n  container.cursor = 'pointer';\n  container.position.set(x, y);\n\n  // Store context for event handlers\n  (container as any)._eventContext = { items, onCardClick, id };\n\n  const graphics = new PIXI.Graphics();\n\n  const actualWidth = cardWidth - CARD_GAP;\n  const actualHeight = cardHeight - CARD_GAP;\n  const offsetX = CARD_GAP / 2;\n  const offsetY = CARD_GAP / 2;\n\n  const gradient = new PIXI.FillGradient(0, offsetY, 0, offsetY + actualHeight);\n  gradient.addColorStop(0, cardColors.mid);\n  gradient.addColorStop(1, cardColors.base);\n\n  graphics.roundRect(offsetX, offsetY, actualWidth, actualHeight, CARD_RADIUS);\n  graphics.fill(gradient);\n\n  container.addChild(graphics);\n\n  const titleText = new PIXI.Text('', {\n    fontSize: 13,\n    fill: cardColors.text as any,\n    fontWeight: '600',\n    lineHeight: 18,\n    wordWrap: false,\n  } as any);\n  titleText.position.set(offsetX + CARD_PADDING, offsetY + CARD_PADDING);\n  container.addChild(titleText);\n\n  const labelsText = new PIXI.Text('', {\n    fontSize: 11,\n    fill: cardColors.textSecondary as any,\n    fontWeight: '400',\n    lineHeight: 18,\n  } as any);\n  labelsText.position.set(offsetX + CARD_PADDING, offsetY + CARD_PADDING + 40);\n  container.addChild(labelsText);\n\n  const valuesText = new PIXI.Text('', {\n    fontSize: 11,\n    fill: cardColors.text as any,\n    fontWeight: '500',\n    lineHeight: 18,\n    wordWrap: false,\n  } as any);\n  valuesText.position.set(offsetX + CARD_PADDING + 65, offsetY + CARD_PADDING + 40);\n  container.addChild(valuesText);\n\n  container.on('click', (e: PIXI.FederatedPointerEvent) => {\n    e.stopPropagation();\n    const ctx = (container as any)._eventContext as { items: any; onCardClick: (item: any, e: MouseEvent, id: number | string) => void; id: number | string };\n    const itemsMap = ctx.items as Record<string, any>;\n    const item = itemsMap[String(ctx.id)];\n    if (item) {\n      ctx.onCardClick(item, e.nativeEvent as MouseEvent, ctx.id);\n    }\n  });\n\n  container.on('pointerdown', (e: PIXI.FederatedPointerEvent) => {\n    e.stopPropagation();\n    // onPanStart(e.nativeEvent as MouseEvent);\n  });\n\n  return {\n    container,\n    graphics,\n    titleText,\n    labelsText,\n    valuesText,\n    itemId: id,\n    targetX: x,\n    targetY: y,\n    currentX: x,\n    currentY: y,\n  };\n}\n\nexport function destroySprite(sprite: CardSprite) {\n  if (sprite.container && sprite.container.parent) {\n    sprite.container.parent.removeChild(sprite.container);\n  }\n  // Reset visibility to ensure it doesn't ghost if something goes wrong\n  if (sprite.container) {\n    sprite.container.visible = false;\n  }\n  spritePool.push(sprite);\n}\n\nexport function clearSpritePool() {\n  for (const sprite of spritePool) {\n    try {\n      sprite.graphics?.destroy();\n      sprite.titleText?.destroy();\n      sprite.labelsText?.destroy();\n      sprite.valuesText?.destroy();\n      sprite.container?.destroy();\n    } catch (e) {\n      void e;\n    }\n  }\n  spritePool.length = 0;\n}\n\nexport function updateCardContent<TItem extends object>(\n  sprite: CardSprite,\n  item: TItem,\n  selectedId: string | number | null,\n  cardWidth: number,\n  cardHeight: number,\n  cardColors: CardColors,\n) {\n  if (!item) return;\n\n  const event = item as any;\n  const eventType = event.type || event.name || event.title || 'Event';\n\n  const timeStr = event.occurred ? new Date(event.occurred).toLocaleString('en-US', {\n    month: '2-digit',\n    day: '2-digit',\n    year: 'numeric',\n    hour: '2-digit',\n    minute: '2-digit',\n    hour12: false\n  }).replace(',', '') : '';\n\n  const correlation = event.correlationId || event.correlation || '';\n  const correlationShort = correlation ? String(correlation).substring(0, 12) + '...' : '';\n\n  const maxTitleLength = 20;\n  const titleDisplay = eventType.length > maxTitleLength\n    ? eventType.substring(0, maxTitleLength) + '...'\n    : eventType;\n\n  const maxTypeLength = 16;\n  const typeDisplay = eventType.length > maxTypeLength\n    ? eventType.substring(0, maxTypeLength) + '...'\n    : eventType;\n\n  const colors = cardColors;\n  const labelsText = 'Type\\nOccurred\\nCorrelation';\n  const valuesText = `${typeDisplay}\\n${timeStr}\\n${correlationShort}`;\n  const colorsChanged = sprite.lastCardColors !== colors;\n\n  if (sprite.lastTitle !== titleDisplay) {\n    sprite.titleText.text = titleDisplay;\n    sprite.lastTitle = titleDisplay;\n  }\n\n    if (sprite.lastLabels !== labelsText) {\n    sprite.labelsText.text = labelsText;\n    sprite.lastLabels = labelsText;\n  }\n\n  if (colorsChanged) {\n    (sprite.labelsText.style as any).fill = colors.textSecondary as any;\n  }\n\n  if (sprite.lastValues !== valuesText) {\n    sprite.valuesText.text = valuesText;\n    sprite.lastValues = valuesText;\n  }\n\n  if (colorsChanged) {\n    (sprite.valuesText.style as any).fill = colors.text as any;\n  }\n\n  sprite.titleText.visible = true;\n  sprite.labelsText.visible = true;\n  sprite.valuesText.visible = true;\n\n  const isSelected = sprite.itemId === selectedId;\n\n  // Only redraw graphics if selection state or colors changed\n  if (sprite.lastSelectedId === selectedId && !colorsChanged && sprite.graphics) {\n    return;\n  }\n\n  sprite.lastSelectedId = selectedId;\n  sprite.lastCardColors = cardColors;\n\n  if (sprite.graphics) {\n    sprite.graphics.clear();\n  } else {\n    sprite.graphics = new PIXI.Graphics();\n    sprite.container.addChildAt(sprite.graphics, 0);\n  }\n\n  const actualWidth = cardWidth - CARD_GAP;\n  const actualHeight = cardHeight - CARD_GAP;\n  const offsetX = CARD_GAP / 2;\n  const offsetY = CARD_GAP / 2;\n\n  const gradient = new PIXI.FillGradient(0, offsetY, 0, offsetY + actualHeight);\n  if (isSelected) {\n    gradient.addColorStop(0, colors.gradient);\n    gradient.addColorStop(1, colors.mid);\n  } else {\n    gradient.addColorStop(0, colors.mid);\n    gradient.addColorStop(1, colors.base);\n  }\n\n  sprite.graphics.roundRect(offsetX, offsetY, actualWidth, actualHeight, CARD_RADIUS);\n  sprite.graphics.fill(gradient);\n\n  if (isSelected) {\n    sprite.graphics.stroke({ width: 2, color: colors.border });\n  } else {\n    sprite.graphics.stroke({ width: 1, color: colors.border, alpha: 0.35 });\n  }\n}\n"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,26 @@
+import * as PIXI from 'pixi.js';
+import type { CardSprite } from './constants';
+import type { LayoutResult } from '../../engine/types';
+export interface SyncParams<TItem> {
+    root: PIXI.Container | null;
+    container: HTMLDivElement | null;
+    sprites: Map<string | number, CardSprite>;
+    layout: LayoutResult;
+    visibleIds: Uint32Array;
+    items: TItem[];
+    cardWidth: number;
+    cardHeight: number;
+    panX: number;
+    panY: number;
+    panDeltaX?: number;
+    panDeltaY?: number;
+    viewportWidth: number;
+    viewportHeight: number;
+    zoomLevel: number;
+    createCardSprite: (id: string | number, x: number, y: number) => CardSprite;
+    updateCardContent: (sprite: CardSprite, item: TItem) => void;
+    isViewTransition?: boolean;
+    prevLayout?: LayoutResult | null;
+}
+export declare function syncSpritesToViewport<TItem>(params: SyncParams<TItem>): void;
+//# sourceMappingURL=visibility.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"visibility.d.ts","sourceRoot":"","sources":["../../../../../PivotViewer/components/pivot/visibility.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,IAAI,MAAM,SAAS,CAAC;AAChC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAE9C,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAGvD,MAAM,WAAW,UAAU,CAAC,KAAK;IAC/B,IAAI,EAAE,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;IAC5B,SAAS,EAAE,cAAc,GAAG,IAAI,CAAC;IACjC,OAAO,EAAE,GAAG,CAAC,MAAM,GAAG,MAAM,EAAE,UAAU,CAAC,CAAC;IAC1C,MAAM,EAAE,YAAY,CAAC;IACrB,UAAU,EAAE,WAAW,CAAC;IACxB,KAAK,EAAE,KAAK,EAAE,CAAC;IACf,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,EAAE,MAAM,CAAC;IACnB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,EAAE,MAAM,CAAC;IACtB,cAAc,EAAE,MAAM,CAAC;IACvB,SAAS,EAAE,MAAM,CAAC;IAClB,gBAAgB,EAAE,CAAC,EAAE,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,KAAK,UAAU,CAAC;IAC5E,iBAAiB,EAAE,CAAC,MAAM,EAAE,UAAU,EAAE,IAAI,EAAE,KAAK,KAAK,IAAI,CAAC;IAC7D,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,UAAU,CAAC,EAAE,YAAY,GAAG,IAAI,CAAC;CAClC;AAED,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,MAAM,EAAE,UAAU,CAAC,KAAK,CAAC,QA+RrE"}

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

@@ -0,0 +1,221 @@
+import { CARD_GAP } from './constants.js';
+import { destroySprite } from './sprites.js';
+
+function syncSpritesToViewport(params) {
+    const { root, container, sprites, layout, visibleIds, items, cardWidth, cardHeight, panX, panY, panDeltaX, panDeltaY, viewportWidth, viewportHeight, createCardSprite, updateCardContent, zoomLevel, isViewTransition, prevLayout } = params;
+    if (!root || !container)
+        return;
+    if (isViewTransition && (panDeltaX || panDeltaY)) {
+        const dx = (panDeltaX || 0) / (zoomLevel || 1);
+        const dy = (panDeltaY || 0) / (zoomLevel || 1);
+        for (const sprite of sprites.values()) {
+            if (sprite.animationStartTime !== undefined) {
+                if (sprite.startX !== undefined)
+                    sprite.startX += dx;
+                if (sprite.startY !== undefined)
+                    sprite.startY += dy;
+                sprite.currentX += dx;
+                sprite.currentY += dy;
+                sprite.container.position.set(sprite.currentX, sprite.currentY);
+            }
+        }
+    }
+    const visibleSet = new Set();
+    const baseBufferWorld = Math.max(cardWidth, cardHeight) * 4;
+    const invScale = zoomLevel && zoomLevel !== 0 ? 1 / zoomLevel : 1;
+    const effectivePanX = typeof container.scrollLeft === 'number' ? container.scrollLeft : (panX || 0);
+    const effectivePanY = typeof container.scrollTop === 'number' ? container.scrollTop : (panY || 0);
+    const panWorldX = effectivePanX * invScale;
+    const panWorldY = effectivePanY * invScale;
+    const viewportPxWidth = container.clientWidth || viewportWidth;
+    const viewportPxHeight = container.clientHeight || viewportHeight;
+    const viewportWorldWidth = viewportPxWidth * invScale;
+    const viewportWorldHeight = viewportPxHeight * invScale;
+    const bufferWorld = Math.max(baseBufferWorld * invScale, Math.max(viewportWorldWidth, viewportWorldHeight) * 2.0, baseBufferWorld);
+    const viewportLeftWorld = panWorldX - bufferWorld;
+    const viewportRightWorld = panWorldX + viewportWorldWidth + bufferWorld;
+    const viewportTopWorld = panWorldY - bufferWorld;
+    const viewportBottomWorld = panWorldY + viewportWorldHeight + bufferWorld;
+    const inViewportIds = [];
+    const worldEpsilon = Math.max(0.5, 0.5 * invScale);
+    for (const [id, position] of layout.positions) {
+        if (!position)
+            continue;
+        const worldX = position.x;
+        const worldY = position.y;
+        const worldCardW = cardWidth;
+        const worldCardH = cardHeight;
+        if (worldX + worldCardW >= viewportLeftWorld - worldEpsilon &&
+            worldX <= viewportRightWorld + worldEpsilon &&
+            worldY + worldCardH >= viewportTopWorld - worldEpsilon &&
+            worldY <= viewportBottomWorld + worldEpsilon) {
+            inViewportIds.push(id);
+            visibleSet.add(id);
+        }
+    }
+    try {
+        const slotHeight = cardHeight + (CARD_GAP || 8);
+        const totalRows = Math.ceil((layout.totalHeight || 0) / slotHeight) || 0;
+        const rowsVisible = Math.max(1, Math.ceil(viewportWorldHeight / slotHeight));
+        const prefetchMultiplier = 0.75;
+        const prefetchRows = Math.max(2, Math.ceil(rowsVisible * prefetchMultiplier * Math.max(1, invScale)));
+        const lastRowThresholdY = Math.max(0, (totalRows - prefetchRows) * slotHeight);
+        for (const [id, position] of layout.positions) {
+            if (position.y >= lastRowThresholdY) {
+                if (!visibleSet.has(id)) {
+                    inViewportIds.push(id);
+                    visibleSet.add(id);
+                }
+            }
+        }
+    }
+    catch (e) {
+    }
+    const aggressiveCull = !isViewTransition && sprites.size > Math.max(120, Math.ceil(inViewportIds.length * 1.5));
+    for (const [id, sprite] of sprites) {
+        if (!visibleSet.has(id)) {
+            if (isViewTransition && layout.positions.has(id)) {
+                const newPos = layout.positions.get(id);
+                if (newPos) {
+                    sprite.targetX = newPos.x;
+                    sprite.targetY = newPos.y;
+                    if (sprite.animationStartTime === undefined) {
+                        sprite.startX = sprite.currentX;
+                        sprite.startY = sprite.currentY;
+                        sprite.animationStartTime = Date.now();
+                        sprite.animationDelay = Math.random() * 300;
+                    }
+                    try {
+                        if (sprite.container)
+                            sprite.container.visible = true;
+                    }
+                    catch (e) {
+                    }
+                    if (sprite.__lastHiddenAt)
+                        delete sprite.__lastHiddenAt;
+                    continue;
+                }
+            }
+            if (aggressiveCull) {
+                try {
+                    if (sprite.container)
+                        sprite.container.visible = true;
+                }
+                catch (e) {
+                }
+                continue;
+            }
+            try {
+                if (sprite.container) {
+                    sprite.container.visible = false;
+                }
+                sprite.__lastHiddenAt = Date.now();
+            }
+            catch (e) {
+            }
+        }
+        else {
+            try {
+                if (sprite.container) {
+                    sprite.container.visible = true;
+                }
+                if (sprite.__lastHiddenAt)
+                    delete sprite.__lastHiddenAt;
+            }
+            catch (e) {
+            }
+        }
+    }
+    try {
+        const SWEEP_MS = 500;
+        const now = Date.now();
+        for (const [id, sprite] of sprites) {
+            const lastHidden = sprite.__lastHiddenAt;
+            if (lastHidden && now - lastHidden > SWEEP_MS) {
+                try {
+                    if (sprite.container && sprite.container.parent)
+                        sprite.container.parent.removeChild(sprite.container);
+                }
+                catch (e) {
+                    void e;
+                }
+                try {
+                    destroySprite(sprite);
+                }
+                catch (e) {
+                    void e;
+                }
+                sprites.delete(id);
+            }
+        }
+    }
+    catch (e) {
+    }
+    const MAX_SPRITES_PER_FRAME = 50;
+    let createdCount = 0;
+    for (const id of inViewportIds) {
+        const position = layout.positions.get(id);
+        if (!position)
+            continue;
+        let sprite = sprites.get(id);
+        if (!sprite) {
+            if (createdCount >= MAX_SPRITES_PER_FRAME)
+                continue;
+            createdCount++;
+            let startX = position.x;
+            let startY = position.y;
+            let shouldAnimate = false;
+            if (isViewTransition && prevLayout && prevLayout.positions.has(id)) {
+                const oldPos = prevLayout.positions.get(id);
+                if (oldPos) {
+                    startX = oldPos.x;
+                    startY = oldPos.y;
+                    if (panDeltaX || panDeltaY) {
+                        const dx = (panDeltaX || 0) / (zoomLevel || 1);
+                        const dy = (panDeltaY || 0) / (zoomLevel || 1);
+                        startX += dx;
+                        startY += dy;
+                    }
+                    shouldAnimate = true;
+                }
+            }
+            sprite = createCardSprite(id, startX, startY);
+            sprites.set(id, sprite);
+            root.addChild(sprite.container);
+            sprite.currentX = startX;
+            sprite.currentY = startY;
+            sprite.container.position.set(startX, startY);
+            if (shouldAnimate) {
+                sprite.targetX = position.x;
+                sprite.targetY = position.y;
+                sprite.startX = startX;
+                sprite.startY = startY;
+                sprite.animationStartTime = Date.now();
+                sprite.animationDelay = Math.random() * 300;
+            }
+        }
+        if (sprite.targetX !== position.x || sprite.targetY !== position.y) {
+            if (isViewTransition) {
+                sprite.startX = sprite.currentX;
+                sprite.startY = sprite.currentY;
+                sprite.targetX = position.x;
+                sprite.targetY = position.y;
+                sprite.animationStartTime = Date.now();
+                sprite.animationDelay = Math.random() * 300;
+            }
+            else {
+                sprite.targetX = position.x;
+                sprite.targetY = position.y;
+                delete sprite.animationStartTime;
+                delete sprite.animationDelay;
+            }
+        }
+        const item = items[String(id)];
+        if (item) {
+            updateCardContent(sprite, item);
+        }
+    }
+}
+
+export { syncSpritesToViewport };
+//# sourceMappingURL=visibility.js.map