@cratis/components 0.1.10 → 0.1.12

package/dist/esm/PivotViewer/index.d.ts

@@ -1,4 +1,5 @@
 import { PivotViewer } from './PivotViewer';
 export { PivotViewer, PivotViewer as PivotViewerOptimized };
-export type { PivotViewerProps, PivotDimension, PivotFilter, PivotFilterOption, PivotGroup, PivotPrimitive } from './types';
+export type { PivotViewerProps, PivotDimension, PivotFilter, PivotFilterOption, PivotGroup, PivotPrimitive, PropertyAccessor } from './types';
+export { getPropertyPath, getValueByPath } from './types';
 //# sourceMappingURL=index.d.ts.map

package/dist/esm/PivotViewer/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../PivotViewer/index.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAE5C,OAAO,EAAE,WAAW,EAAE,WAAW,IAAI,oBAAoB,EAAE,CAAC;AAC5D,YAAY,EAAE,gBAAgB,EAAE,cAAc,EAAE,WAAW,EAAE,iBAAiB,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../PivotViewer/index.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAE5C,OAAO,EAAE,WAAW,EAAE,WAAW,IAAI,oBAAoB,EAAE,CAAC;AAC5D,YAAY,EAAE,gBAAgB,EAAE,cAAc,EAAE,WAAW,EAAE,iBAAiB,EAAE,UAAU,EAAE,cAAc,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAC9I,OAAO,EAAE,eAAe,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC"}

package/dist/esm/PivotViewer/index.js

@@ -1,2 +1,3 @@
 export { PivotViewer, PivotViewer as PivotViewerOptimized } from './PivotViewer.js';
+export { getPropertyPath, getValueByPath } from './types.js';
 //# sourceMappingURL=index.js.map

package/dist/esm/PivotViewer/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/esm/PivotViewer/types.d.ts

@@ -1,5 +1,8 @@
 import type { ReactNode } from 'react';
 export type PivotPrimitive = string | number | boolean | Date | null | undefined;
+export type PropertyAccessor<TItem> = (item: TItem) => unknown;
+export declare function getPropertyPath<TItem>(accessor: PropertyAccessor<TItem>): string;
+export declare function getValueByPath<TItem>(item: TItem, path: string): unknown;
 export interface PivotGroup<TItem extends object> {
     key: string;
     label: string;
@@ -37,7 +40,7 @@ export interface PivotViewerProps<TItem extends object> {
     defaultDimensionKey?: string;
     cardRenderer?: (item: TItem) => ReactNode;
     getItemId?: (item: TItem, index: number) => string | number;
-    searchFields?: (keyof TItem)[];
+    searchFields?: PropertyAccessor<TItem>[];
     className?: string;
     emptyContent?: ReactNode;
     isLoading?: boolean;

package/dist/esm/PivotViewer/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../PivotViewer/types.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,MAAM,cAAc,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,IAAI,GAAG,IAAI,GAAG,SAAS,CAAC;AAEjF,MAAM,WAAW,UAAU,CAAC,KAAK,SAAS,MAAM;IAC9C,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,cAAc,CAAC;IACtB,KAAK,EAAE,KAAK,EAAE,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,cAAc,CAAC,KAAK,SAAS,MAAM;IAClD,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,IAAI,EAAE,KAAK,KAAK,cAAc,CAAC;IAC1C,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,cAAc,KAAK,MAAM,CAAC;IAChD,IAAI,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,KAAK,CAAC,EAAE,CAAC,EAAE,UAAU,CAAC,KAAK,CAAC,KAAK,MAAM,CAAC;CAC/D;AAED,MAAM,WAAW,iBAAiB;IAChC,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,cAAc,CAAC;IACtB,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,WAAW,CAAC,KAAK,SAAS,MAAM;IAC/C,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,IAAI,EAAE,KAAK,KAAK,cAAc,CAAC;IAC1C,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,OAAO,CAAC,EAAE,iBAAiB,EAAE,CAAC;IAC9B,IAAI,CAAC,EAAE,CAAC,CAAC,EAAE,iBAAiB,EAAE,CAAC,EAAE,iBAAiB,KAAK,MAAM,CAAC;IAE9D,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,MAAM,CAAC;IAEpC,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,WAAW,gBAAgB,CAAC,KAAK,SAAS,MAAM;IACpD,IAAI,EAAE,KAAK,EAAE,CAAC;IACd,UAAU,EAAE,cAAc,CAAC,KAAK,CAAC,EAAE,CAAC;IACpC,OAAO,CAAC,EAAE,WAAW,CAAC,KAAK,CAAC,EAAE,CAAC;IAC/B,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,KAAK,KAAK,SAAS,CAAC;IAC1C,SAAS,CAAC,EAAE,CAAC,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,GAAG,MAAM,CAAC;IAC5D,YAAY,CAAC,EAAE,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,MAAM,MAAM,WAAW,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC;AAEtD,MAAM,MAAM,gBAAgB,GAAG,MAAM,CAAC,MAAM,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,IAAI,CAAC,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../PivotViewer/types.ts"],"names":[],"mappings":"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"}

package/dist/esm/PivotViewer/types.js

@@ -1,2 +1,19 @@
-export {};
-//# sourceMappingURL=types.js.map
+function getPropertyPath(accessor) {
+    const fnStr = accessor.toString();
+    const match = fnStr.match(/(?:=>|return)\s*[a-zA-Z_$][a-zA-Z0-9_$]*\.([a-zA-Z_$][a-zA-Z0-9_$.]*)/);
+    return match ? match[1] : '';
+}
+function getValueByPath(item, path) {
+    const parts = path.split('.');
+    let value = item;
+    for (const part of parts) {
+        if (value === null || value === undefined) {
+            return undefined;
+        }
+        value = value[part];
+    }
+    return value;
+}
+
+export { getPropertyPath, getValueByPath };
+//# sourceMappingURL=types.js.map

package/dist/esm/PivotViewer/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../PivotViewer/types.ts"],"names":[],"mappings":""}
+{"version":3,"file":"types.js","sources":["../../../PivotViewer/types.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 { ReactNode } from 'react';\n\nexport type PivotPrimitive = string | number | boolean | Date | null | undefined;\n\n/**\n * Type-safe property accessor for accessing properties, including nested ones\n */\nexport type PropertyAccessor<TItem> = (item: TItem) => unknown;\n\n/**\n * Extract property path from a property accessor function\n * Supports nested properties like item => item.address.city\n */\nexport function getPropertyPath<TItem>(accessor: PropertyAccessor<TItem>): string {\n    const fnStr = accessor.toString();\n    // Match patterns like: item => item.prop or item => item.prop.nested or (item) => item.prop\n    const match = fnStr.match(/(?:=>|return)\\s*[a-zA-Z_$][a-zA-Z0-9_$]*\\.([a-zA-Z_$][a-zA-Z0-9_$.]*)/)\n    return match ? match[1] : '';\n}\n\n/**\n * Get the value from an item using a property path string\n * Supports nested properties like \"address.city\"\n */\nexport function getValueByPath<TItem>(item: TItem, path: string): unknown {\n    const parts = path.split('.');\n    let value: any = item;\n    for (const part of parts) {\n        if (value === null || value === undefined) {\n            return undefined;\n        }\n        value = value[part];\n    }\n    return value;\n}\n\nexport interface PivotGroup<TItem extends object> {\n  key: string;\n  label: string;\n  value: PivotPrimitive;\n  items: TItem[];\n  count?: number;\n}\n\nexport interface PivotDimension<TItem extends object> {\n  key: string;\n  label: string;\n  getValue: (item: TItem) => PivotPrimitive;\n  formatValue?: (value: PivotPrimitive) => string;\n  sort?: (a: PivotGroup<TItem>, b: PivotGroup<TItem>) => number;\n}\n\nexport interface PivotFilterOption {\n  key: string;\n  label: string;\n  value: PivotPrimitive;\n  count: number;\n}\n\nexport interface PivotFilter<TItem extends object> {\n  key: string;\n  label: string;\n  getValue: (item: TItem) => PivotPrimitive;\n  multi?: boolean;\n  options?: PivotFilterOption[];\n  sort?: (a: PivotFilterOption, b: PivotFilterOption) => number;\n  /** For numeric filters, enables range picker with histogram */\n  type?: 'string' | 'number' | 'date';\n  /** Number of buckets for the histogram in range filters */\n  buckets?: number;\n}\n\nexport interface PivotViewerProps<TItem extends object> {\n  data: TItem[];\n  dimensions: PivotDimension<TItem>[];\n  filters?: PivotFilter<TItem>[];\n  defaultDimensionKey?: string;\n  cardRenderer?: (item: TItem) => ReactNode;\n  getItemId?: (item: TItem, index: number) => string | number;\n  searchFields?: PropertyAccessor<TItem>[];\n  className?: string;\n  emptyContent?: ReactNode;\n  isLoading?: boolean;\n}\n\nexport type FilterState = Record<string, Set<string>>;\n\nexport type RangeFilterState = Record<string, [number, number] | null>;\n"],"names":[],"mappings":"AAgBM,SAAU,eAAe,CAAQ,QAAiC,EAAA;AACpE,IAAA,MAAM,KAAK,GAAG,QAAQ,CAAC,QAAQ,EAAE;IAEjC,MAAM,KAAK,GAAG,KAAK,CAAC,KAAK,CAAC,uEAAuE,CAAC;AAClG,IAAA,OAAO,KAAK,GAAG,KAAK,CAAC,CAAC,CAAC,GAAG,EAAE;AAChC;AAMM,SAAU,cAAc,CAAQ,IAAW,EAAE,IAAY,EAAA;IAC3D,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC;IAC7B,IAAI,KAAK,GAAQ,IAAI;AACrB,IAAA,KAAK,MAAM,IAAI,IAAI,KAAK,EAAE;QACtB,IAAI,KAAK,KAAK,IAAI,IAAI,KAAK,KAAK,SAAS,EAAE;AACvC,YAAA,OAAO,SAAS;QACpB;AACA,QAAA,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC;IACvB;AACA,IAAA,OAAO,KAAK;AAChB;;;;"}

package/dist/esm/TimeMachine/TimeMachine.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TimeMachine.d.ts","sourceRoot":"","sources":["../../../TimeMachine/TimeMachine.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAmD,MAAM,OAAO,CAAC;AACxE,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC;AAGvC,OAAO,mBAAmB,CAAC;AAI3B,UAAU,gBAAgB;IACxB,QAAQ,EAAE,OAAO,EAAE,CAAC;IACpB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAE1C,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B;AAED,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAkJlD,CAAC;AA8EF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"TimeMachine.d.ts","sourceRoot":"","sources":["../../../TimeMachine/TimeMachine.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAmD,MAAM,OAAO,CAAC;AACxE,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC;AAGvC,OAAO,mBAAmB,CAAC;AAO3B,UAAU,gBAAgB;IACxB,QAAQ,EAAE,OAAO,EAAE,CAAC;IACpB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAE1C,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B;AAED,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAkJlD,CAAC;AA8EF,eAAe,WAAW,CAAC"}

package/dist/esm/TimeMachine/TimeMachine.js

@@ -4,11 +4,16 @@ import { ReadModelView } from './ReadModelView.js';
 import { EventsView } from './EventsView.js';
 import './TimeMachine.css';
 
+var ViewModes;
+(function (ViewModes) {
+    ViewModes["ReadModel"] = "ReadModel";
+    ViewModes["Events"] = "Events";
+})(ViewModes || (ViewModes = {}));
 const TimeMachine = ({ versions, currentVersionIndex = 0, onVersionChange, scrollSensitivity = 50, }) => {
     const [selectedIndex, setSelectedIndex] = useState(currentVersionIndex);
     const [hoveredIndex, setHoveredIndex] = useState(null);
     const [isHoveringCard, setIsHoveringCard] = useState(false);
-    const [viewMode, setViewMode] = useState('readmodel');
+    const [viewMode, setViewMode] = useState(ViewModes.ReadModel);
     const containerRef = useRef(null);
     const scrollAccumulatorRef = useRef(0);
     const handleVersionSelect = useCallback((index) => {
@@ -19,7 +24,7 @@ const TimeMachine = ({ versions, currentVersionIndex = 0, onVersionChange, scrol
         setHoveredIndex(index);
     }, []);
     useEffect(() => {
-        if (viewMode !== 'readmodel') {
+        if (viewMode !== ViewModes.ReadModel) {
             return;
         }
         const container = containerRef.current;
@@ -48,7 +53,7 @@ const TimeMachine = ({ versions, currentVersionIndex = 0, onVersionChange, scrol
         };
     }, [versions.length, selectedIndex, onVersionChange, scrollSensitivity, isHoveringCard, viewMode]);
     const allEvents = versions.flatMap(version => version.events || []);
-    return (jsxs("div", { className: "time-machine", ref: containerRef, children: [jsxs("div", { className: "view-switcher", children: [jsx("button", { className: `view-button ${viewMode === 'readmodel' ? 'active' : ''}`, onClick: () => setViewMode('readmodel'), "aria-label": "Read Model View", title: "Read Model View", children: jsx("i", { className: "pi pi-box" }) }), jsx("button", { className: `view-button ${viewMode === 'events' ? 'active' : ''}`, onClick: () => setViewMode('events'), "aria-label": "Events View", title: "Events View", children: jsx("i", { className: "pi pi-list" }) })] }), viewMode === 'readmodel' ? (jsx(ReadModelView, { versions: versions, selectedIndex: selectedIndex, hoveredIndex: hoveredIndex, onVersionSelect: handleVersionSelect, onHoveringCardChange: setIsHoveringCard })) : (jsx(EventsView, { events: allEvents })), viewMode === 'readmodel' && (jsx(Timeline, { versions: versions, selectedIndex: selectedIndex, hoveredIndex: hoveredIndex, onSelect: handleVersionSelect, onHover: handleTimelineHover })), viewMode === 'readmodel' && (jsxs("div", { className: "navigation-controls", children: [jsx("button", { className: "nav-button prev", disabled: selectedIndex === 0, onClick: () => handleVersionSelect(Math.max(0, selectedIndex - 1)), "aria-label": "Previous version", children: "\u2039" }), jsx("button", { className: "nav-button next", disabled: selectedIndex === versions.length - 1, onClick: () => handleVersionSelect(Math.min(versions.length - 1, selectedIndex + 1)), "aria-label": "Next version", children: "\u203A" })] }))] }));
+    return (jsxs("div", { className: "time-machine", ref: containerRef, children: [jsxs("div", { className: "view-switcher", children: [jsx("button", { className: `view-button ${viewMode === ViewModes.ReadModel ? 'active' : ''}`, onClick: () => setViewMode(ViewModes.ReadModel), "aria-label": "Read Model View", title: "Read Model View", children: jsx("i", { className: "pi pi-box" }) }), jsx("button", { className: `view-button ${viewMode === ViewModes.Events ? 'active' : ''}`, onClick: () => setViewMode(ViewModes.Events), "aria-label": "Events View", title: "Events View", children: jsx("i", { className: "pi pi-list" }) })] }), viewMode === ViewModes.ReadModel ? (jsx(ReadModelView, { versions: versions, selectedIndex: selectedIndex, hoveredIndex: hoveredIndex, onVersionSelect: handleVersionSelect, onHoveringCardChange: setIsHoveringCard })) : (jsx(EventsView, { events: allEvents })), viewMode === ViewModes.ReadModel && (jsx(Timeline, { versions: versions, selectedIndex: selectedIndex, hoveredIndex: hoveredIndex, onSelect: handleVersionSelect, onHover: handleTimelineHover })), viewMode === ViewModes.ReadModel && (jsxs("div", { className: "navigation-controls", children: [jsx("button", { className: "nav-button prev", disabled: selectedIndex === 0, onClick: () => handleVersionSelect(Math.max(0, selectedIndex - 1)), "aria-label": "Previous version", children: "\u2039" }), jsx("button", { className: "nav-button next", disabled: selectedIndex === versions.length - 1, onClick: () => handleVersionSelect(Math.min(versions.length - 1, selectedIndex + 1)), "aria-label": "Next version", children: "\u203A" })] }))] }));
 };
 const Timeline = ({ versions, selectedIndex, hoveredIndex, onSelect, onHover, }) => {
     const getMagnification = (index, hoverIdx) => {

package/dist/esm/TimeMachine/TimeMachine.js.map

@@ -1 +1 @@
-{"version":3,"file":"TimeMachine.js","sources":["../../../TimeMachine/TimeMachine.tsx"],"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 React, { useState, useCallback, useRef, useEffect } from 'react';\nimport type { Version } from './types';\nimport { ReadModelView } from './ReadModelView';\nimport { EventsView } from './EventsView';\nimport './TimeMachine.css';\n\ntype ViewMode = 'readmodel' | 'events';\n\ninterface TimeMachineProps {\n  versions: Version[];\n  currentVersionIndex?: number;\n  onVersionChange?: (index: number) => void;\n  /** Scroll sensitivity - higher values require more scrolling to change versions */\n  scrollSensitivity?: number;\n}\n\nexport const TimeMachine: React.FC<TimeMachineProps> = ({\n  versions,\n  currentVersionIndex = 0,\n  onVersionChange,\n  scrollSensitivity = 50,\n}) => {\n  const [selectedIndex, setSelectedIndex] = useState(currentVersionIndex);\n  const [hoveredIndex, setHoveredIndex] = useState<number | null>(null);\n  const [isHoveringCard, setIsHoveringCard] = useState(false);\n  const [viewMode, setViewMode] = useState<ViewMode>('readmodel');\n  const containerRef = useRef<HTMLDivElement>(null);\n  const scrollAccumulatorRef = useRef(0);\n\n  const handleVersionSelect = useCallback((index: number) => {\n    setSelectedIndex(index);\n    onVersionChange?.(index);\n  }, [onVersionChange]);\n\n  const handleTimelineHover = useCallback((index: number | null) => {\n    setHoveredIndex(index);\n  }, []);\n\n  // Handle trackpad two-finger scroll gesture\n  useEffect(() => {\n    if (viewMode !== 'readmodel') {\n      return;\n    }\n\n    const container = containerRef.current;\n    if (!container) return;\n\n    const handleWheel = (e: WheelEvent) => {\n      // Only handle navigation when not hovering over a card\n      if (isHoveringCard) {\n        return; // Allow normal scrolling within cards\n      }\n\n      // Prevent default scrolling behavior\n      e.preventDefault();\n\n      // Use deltaX for horizontal scroll, fallback to deltaY for vertical\n      // Most trackpads send horizontal delta for two-finger swipe\n      const delta = Math.abs(e.deltaX) > Math.abs(e.deltaY) ? e.deltaX : e.deltaY;\n\n      // Accumulate scroll delta\n      scrollAccumulatorRef.current += delta;\n\n      // Check if we've accumulated enough scroll to change version\n      if (Math.abs(scrollAccumulatorRef.current) >= scrollSensitivity) {\n        const direction = scrollAccumulatorRef.current > 0 ? 1 : -1;\n        const newIndex = Math.max(0, Math.min(versions.length - 1, selectedIndex + direction));\n\n        if (newIndex !== selectedIndex) {\n          setSelectedIndex(newIndex);\n          onVersionChange?.(newIndex);\n        }\n\n        // Reset accumulator after version change\n        scrollAccumulatorRef.current = 0;\n      }\n    };\n\n    container.addEventListener('wheel', handleWheel, { passive: false });\n\n    return () => {\n      container.removeEventListener('wheel', handleWheel);\n    };\n  }, [versions.length, selectedIndex, onVersionChange, scrollSensitivity, isHoveringCard, viewMode]);\n\n  // Calculate the display index - either hovered or selected\n  // (not used in this component; ReadModelView computes its own display index)\n  void hoveredIndex;\n  void selectedIndex;\n\n  // Get all events from all versions\n  const allEvents = versions.flatMap(version => version.events || []);\n\n  return (\n    <div className=\"time-machine\" ref={containerRef}>\n      {/* View Switcher */}\n      <div className=\"view-switcher\">\n        <button\n          className={`view-button ${viewMode === 'readmodel' ? 'active' : ''}`}\n          onClick={() => setViewMode('readmodel')}\n          aria-label=\"Read Model View\"\n          title=\"Read Model View\"\n        >\n          <i className=\"pi pi-box\" />\n        </button>\n        <button\n          className={`view-button ${viewMode === 'events' ? 'active' : ''}`}\n          onClick={() => setViewMode('events')}\n          aria-label=\"Events View\"\n          title=\"Events View\"\n        >\n          <i className=\"pi pi-list\" />\n        </button>\n      </div>\n\n      {/* Render the appropriate view */}\n      {viewMode === 'readmodel' ? (\n        <ReadModelView\n          versions={versions}\n          selectedIndex={selectedIndex}\n          hoveredIndex={hoveredIndex}\n          onVersionSelect={handleVersionSelect}\n          onHoveringCardChange={setIsHoveringCard}\n        />\n      ) : (\n        <EventsView events={allEvents} />\n      )}\n\n      {/* Timeline - only show in ReadModel view */}\n      {viewMode === 'readmodel' && (\n        <Timeline\n          versions={versions}\n          selectedIndex={selectedIndex}\n          hoveredIndex={hoveredIndex}\n          onSelect={handleVersionSelect}\n          onHover={handleTimelineHover}\n        />\n      )}\n\n      {/* Navigation arrows - only show in ReadModel view */}\n      {viewMode === 'readmodel' && (\n        <div className=\"navigation-controls\">\n          <button\n            className=\"nav-button prev\"\n            disabled={selectedIndex === 0}\n            onClick={() => handleVersionSelect(Math.max(0, selectedIndex - 1))}\n            aria-label=\"Previous version\"\n          >\n            ‹\n          </button>\n          <button\n            className=\"nav-button next\"\n            disabled={selectedIndex === versions.length - 1}\n            onClick={() => handleVersionSelect(Math.min(versions.length - 1, selectedIndex + 1))}\n            aria-label=\"Next version\"\n          >\n            ›\n          </button>\n        </div>\n      )}\n    </div>\n  );\n};\n\ninterface TimelineProps {\n  versions: Version[];\n  selectedIndex: number;\n  hoveredIndex: number | null;\n  onSelect: (index: number) => void;\n  onHover: (index: number | null) => void;\n}\n\nconst Timeline: React.FC<TimelineProps> = ({\n  versions,\n  selectedIndex,\n  hoveredIndex,\n  onSelect,\n  onHover,\n}) => {\n  const getMagnification = (index: number, hoverIdx: number | null): number => {\n    if (hoverIdx === null) return 1;\n    const distance = Math.abs(index - hoverIdx);\n    // Fish-eye effect: items close to hover get magnified\n    if (distance === 0) return 2.0;\n    if (distance === 1) return 1.6;\n    if (distance === 2) return 1.3;\n    if (distance === 3) return 1.1;\n    return 1;\n  };\n\n  const formatDate = (date: Date): string => {\n    return date.toLocaleDateString('en-US', {\n      month: 'short',\n      day: 'numeric',\n      year: 'numeric',\n    });\n  };\n\n  const formatTime = (date: Date): string => {\n    return date.toLocaleTimeString('en-US', {\n      hour: 'numeric',\n      minute: '2-digit',\n      hour12: true,\n    });\n  };\n\n  return (\n    <div\n      className=\"timeline\"\n      onMouseLeave={() => onHover(null)}\n    >\n      <div className=\"timeline-track\">\n        {versions.map((version, index) => {\n          const magnification = getMagnification(index, hoveredIndex);\n          const isSelected = index === selectedIndex;\n          const isHovered = index === hoveredIndex;\n\n          return (\n            <div\n              key={version.id}\n              className={`timeline-entry ${isSelected ? 'selected' : ''} ${isHovered ? 'hovered' : ''}`}\n              style={{\n                '--magnification': magnification,\n              } as React.CSSProperties}\n              onMouseEnter={() => onHover(index)}\n              onClick={() => onSelect(index)}\n            >\n              <div className=\"timeline-tick\"></div>\n              <div className=\"timeline-label\">\n                <span className=\"timeline-date\">{formatDate(version.timestamp)}</span>\n                <span className=\"timeline-time\">{formatTime(version.timestamp)}</span>\n              </div>\n            </div>\n          );\n        })}\n      </div>\n    </div>\n  );\n};\n\nexport default TimeMachine;\n"],"names":["_jsxs","_jsx"],"mappings":"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"}
+{"version":3,"file":"TimeMachine.js","sources":["../../../TimeMachine/TimeMachine.tsx"],"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 React, { useState, useCallback, useRef, useEffect } from 'react';\nimport type { Version } from './types';\nimport { ReadModelView } from './ReadModelView';\nimport { EventsView } from './EventsView';\nimport './TimeMachine.css';\n\nenum ViewModes {\n  ReadModel = 'ReadModel',\n  Events = 'Events',\n}\n\ninterface TimeMachineProps {\n  versions: Version[];\n  currentVersionIndex?: number;\n  onVersionChange?: (index: number) => void;\n  /** Scroll sensitivity - higher values require more scrolling to change versions */\n  scrollSensitivity?: number;\n}\n\nexport const TimeMachine: React.FC<TimeMachineProps> = ({\n  versions,\n  currentVersionIndex = 0,\n  onVersionChange,\n  scrollSensitivity = 50,\n}) => {\n  const [selectedIndex, setSelectedIndex] = useState(currentVersionIndex);\n  const [hoveredIndex, setHoveredIndex] = useState<number | null>(null);\n  const [isHoveringCard, setIsHoveringCard] = useState(false);\n  const [viewMode, setViewMode] = useState<ViewModes>(ViewModes.ReadModel);\n  const containerRef = useRef<HTMLDivElement>(null);\n  const scrollAccumulatorRef = useRef(0);\n\n  const handleVersionSelect = useCallback((index: number) => {\n    setSelectedIndex(index);\n    onVersionChange?.(index);\n  }, [onVersionChange]);\n\n  const handleTimelineHover = useCallback((index: number | null) => {\n    setHoveredIndex(index);\n  }, []);\n\n  // Handle trackpad two-finger scroll gesture\n  useEffect(() => {\n    if (viewMode !== ViewModes.ReadModel) {\n      return;\n    }\n\n    const container = containerRef.current;\n    if (!container) return;\n\n    const handleWheel = (e: WheelEvent) => {\n      // Only handle navigation when not hovering over a card\n      if (isHoveringCard) {\n        return; // Allow normal scrolling within cards\n      }\n\n      // Prevent default scrolling behavior\n      e.preventDefault();\n\n      // Use deltaX for horizontal scroll, fallback to deltaY for vertical\n      // Most trackpads send horizontal delta for two-finger swipe\n      const delta = Math.abs(e.deltaX) > Math.abs(e.deltaY) ? e.deltaX : e.deltaY;\n\n      // Accumulate scroll delta\n      scrollAccumulatorRef.current += delta;\n\n      // Check if we've accumulated enough scroll to change version\n      if (Math.abs(scrollAccumulatorRef.current) >= scrollSensitivity) {\n        const direction = scrollAccumulatorRef.current > 0 ? 1 : -1;\n        const newIndex = Math.max(0, Math.min(versions.length - 1, selectedIndex + direction));\n\n        if (newIndex !== selectedIndex) {\n          setSelectedIndex(newIndex);\n          onVersionChange?.(newIndex);\n        }\n\n        // Reset accumulator after version change\n        scrollAccumulatorRef.current = 0;\n      }\n    };\n\n    container.addEventListener('wheel', handleWheel, { passive: false });\n\n    return () => {\n      container.removeEventListener('wheel', handleWheel);\n    };\n  }, [versions.length, selectedIndex, onVersionChange, scrollSensitivity, isHoveringCard, viewMode]);\n\n  // Calculate the display index - either hovered or selected\n  // (not used in this component; ReadModelView computes its own display index)\n  void hoveredIndex;\n  void selectedIndex;\n\n  // Get all events from all versions\n  const allEvents = versions.flatMap(version => version.events || []);\n\n  return (\n    <div className=\"time-machine\" ref={containerRef}>\n      {/* View Switcher */}\n      <div className=\"view-switcher\">\n        <button\n          className={`view-button ${viewMode === ViewModes.ReadModel ? 'active' : ''}`}\n          onClick={() => setViewMode(ViewModes.ReadModel)}\n          aria-label=\"Read Model View\"\n          title=\"Read Model View\"\n        >\n          <i className=\"pi pi-box\" />\n        </button>\n        <button\n          className={`view-button ${viewMode === ViewModes.Events ? 'active' : ''}`}\n          onClick={() => setViewMode(ViewModes.Events)}\n          aria-label=\"Events View\"\n          title=\"Events View\"\n        >\n          <i className=\"pi pi-list\" />\n        </button>\n      </div>\n\n      {/* Render the appropriate view */}\n      {viewMode === ViewModes.ReadModel ? (\n        <ReadModelView\n          versions={versions}\n          selectedIndex={selectedIndex}\n          hoveredIndex={hoveredIndex}\n          onVersionSelect={handleVersionSelect}\n          onHoveringCardChange={setIsHoveringCard}\n        />\n      ) : (\n        <EventsView events={allEvents} />\n      )}\n\n      {/* Timeline - only show in ReadModel view */}\n      {viewMode === ViewModes.ReadModel && (\n        <Timeline\n          versions={versions}\n          selectedIndex={selectedIndex}\n          hoveredIndex={hoveredIndex}\n          onSelect={handleVersionSelect}\n          onHover={handleTimelineHover}\n        />\n      )}\n\n      {/* Navigation arrows - only show in ReadModel view */}\n      {viewMode === ViewModes.ReadModel && (\n        <div className=\"navigation-controls\">\n          <button\n            className=\"nav-button prev\"\n            disabled={selectedIndex === 0}\n            onClick={() => handleVersionSelect(Math.max(0, selectedIndex - 1))}\n            aria-label=\"Previous version\"\n          >\n            ‹\n          </button>\n          <button\n            className=\"nav-button next\"\n            disabled={selectedIndex === versions.length - 1}\n            onClick={() => handleVersionSelect(Math.min(versions.length - 1, selectedIndex + 1))}\n            aria-label=\"Next version\"\n          >\n            ›\n          </button>\n        </div>\n      )}\n    </div>\n  );\n};\n\ninterface TimelineProps {\n  versions: Version[];\n  selectedIndex: number;\n  hoveredIndex: number | null;\n  onSelect: (index: number) => void;\n  onHover: (index: number | null) => void;\n}\n\nconst Timeline: React.FC<TimelineProps> = ({\n  versions,\n  selectedIndex,\n  hoveredIndex,\n  onSelect,\n  onHover,\n}) => {\n  const getMagnification = (index: number, hoverIdx: number | null): number => {\n    if (hoverIdx === null) return 1;\n    const distance = Math.abs(index - hoverIdx);\n    // Fish-eye effect: items close to hover get magnified\n    if (distance === 0) return 2.0;\n    if (distance === 1) return 1.6;\n    if (distance === 2) return 1.3;\n    if (distance === 3) return 1.1;\n    return 1;\n  };\n\n  const formatDate = (date: Date): string => {\n    return date.toLocaleDateString('en-US', {\n      month: 'short',\n      day: 'numeric',\n      year: 'numeric',\n    });\n  };\n\n  const formatTime = (date: Date): string => {\n    return date.toLocaleTimeString('en-US', {\n      hour: 'numeric',\n      minute: '2-digit',\n      hour12: true,\n    });\n  };\n\n  return (\n    <div\n      className=\"timeline\"\n      onMouseLeave={() => onHover(null)}\n    >\n      <div className=\"timeline-track\">\n        {versions.map((version, index) => {\n          const magnification = getMagnification(index, hoveredIndex);\n          const isSelected = index === selectedIndex;\n          const isHovered = index === hoveredIndex;\n\n          return (\n            <div\n              key={version.id}\n              className={`timeline-entry ${isSelected ? 'selected' : ''} ${isHovered ? 'hovered' : ''}`}\n              style={{\n                '--magnification': magnification,\n              } as React.CSSProperties}\n              onMouseEnter={() => onHover(index)}\n              onClick={() => onSelect(index)}\n            >\n              <div className=\"timeline-tick\"></div>\n              <div className=\"timeline-label\">\n                <span className=\"timeline-date\">{formatDate(version.timestamp)}</span>\n                <span className=\"timeline-time\">{formatTime(version.timestamp)}</span>\n              </div>\n            </div>\n          );\n        })}\n      </div>\n    </div>\n  );\n};\n\nexport default TimeMachine;\n"],"names":["_jsxs","_jsx"],"mappings":"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"}