@cratis/components 0.1.9

package/dist/cjs/TimeMachine/Properties.js

@@ -0,0 +1,58 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+
+const Properties = ({ data, className, align = 'left' }) => {
+    const tableStyle = {
+        width: '100%',
+        borderCollapse: 'collapse',
+        fontFamily: '-apple-system, BlinkMacSystemFont, "SF Mono", monospace',
+        fontSize: '13px',
+    };
+    const rowStyle = {
+        borderBottom: '1px solid rgba(255,255,255,0.1)',
+    };
+    const labelStyle = {
+        padding: '8px 12px',
+        color: 'rgba(255,255,255,0.6)',
+        textAlign: align,
+        fontWeight: 500,
+        width: '40%',
+    };
+    const valueStyle = {
+        padding: '8px 12px',
+        color: '#fff',
+        textAlign: align,
+    };
+    const renderValue = (value) => {
+        if (value === null || value === undefined) {
+            return jsxRuntime.jsx("span", { style: { color: 'rgba(255,255,255,0.4)' }, children: "null" });
+        }
+        if (typeof value === 'boolean') {
+            return jsxRuntime.jsx("span", { style: { color: value ? '#4ade80' : '#f87171' }, children: value.toString() });
+        }
+        if (typeof value === 'number') {
+            return jsxRuntime.jsx("span", { style: { color: '#fbbf24' }, children: value });
+        }
+        if (value instanceof Date) {
+            return jsxRuntime.jsx("span", { style: { color: '#60a5fa' }, children: value.toLocaleString() });
+        }
+        if (Array.isArray(value)) {
+            return (jsxRuntime.jsxs("span", { style: { color: 'rgba(255,255,255,0.7)' }, children: ["Array[", value.length, "]"] }));
+        }
+        if (typeof value === 'object') {
+            return (jsxRuntime.jsxs("span", { style: { color: 'rgba(255,255,255,0.7)' }, children: ['{', "...", '}'] }));
+        }
+        return jsxRuntime.jsx("span", { children: String(value) });
+    };
+    const formatPropertyName = (key) => {
+        return key
+            .replace(/([A-Z])/g, ' $1')
+            .replace(/^./, str => str.toUpperCase())
+            .trim();
+    };
+    return (jsxRuntime.jsx("div", { className: className, children: jsxRuntime.jsx("table", { style: tableStyle, children: jsxRuntime.jsx("tbody", { children: data && Object.entries(data).map(([key, value], index) => (jsxRuntime.jsxs("tr", { style: rowStyle, children: [jsxRuntime.jsx("td", { style: labelStyle, children: formatPropertyName(key) }), jsxRuntime.jsx("td", { style: valueStyle, children: renderValue(value) })] }, `${key}-${index}`))) }) }) }));
+};
+
+exports.Properties = Properties;
+//# sourceMappingURL=Properties.js.map

package/dist/cjs/TimeMachine/Properties.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Properties.js","sources":["../../../TimeMachine/Properties.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 from 'react';\n\ninterface PropertiesProps {\n    data: Record<string, unknown>;\n    /** CSS class name for the container */\n    className?: string;\n    /** Text alignment for the table */\n    align?: 'left' | 'right';\n}\n\nexport const Properties: React.FC<PropertiesProps> = ({ data, className, align = 'left' }) => {\n    const tableStyle: React.CSSProperties = {\n        width: '100%',\n        borderCollapse: 'collapse',\n        fontFamily: '-apple-system, BlinkMacSystemFont, \"SF Mono\", monospace',\n        fontSize: '13px',\n    };\n\n    const rowStyle: React.CSSProperties = {\n        borderBottom: '1px solid rgba(255,255,255,0.1)',\n    };\n\n    const labelStyle: React.CSSProperties = {\n        padding: '8px 12px',\n        color: 'rgba(255,255,255,0.6)',\n        textAlign: align,\n        fontWeight: 500,\n        width: '40%',\n    };\n\n    const valueStyle: React.CSSProperties = {\n        padding: '8px 12px',\n        color: '#fff',\n        textAlign: align,\n    };\n\n    const renderValue = (value: unknown): React.ReactNode => {\n        if (value === null || value === undefined) {\n            return <span style={{ color: 'rgba(255,255,255,0.4)' }}>null</span>;\n        }\n\n        if (typeof value === 'boolean') {\n            return <span style={{ color: value ? '#4ade80' : '#f87171' }}>{value.toString()}</span>;\n        }\n\n        if (typeof value === 'number') {\n            return <span style={{ color: '#fbbf24' }}>{value}</span>;\n        }\n\n        if (value instanceof Date) {\n            return <span style={{ color: '#60a5fa' }}>{value.toLocaleString()}</span>;\n        }\n\n        if (Array.isArray(value)) {\n            return (\n                <span style={{ color: 'rgba(255,255,255,0.7)' }}>\n                    Array[{value.length}]\n                </span>\n            );\n        }\n\n        if (typeof value === 'object') {\n            return (\n                <span style={{ color: 'rgba(255,255,255,0.7)' }}>\n                    {'{'}...{'}'}\n                </span>\n            );\n        }\n\n        return <span>{String(value)}</span>;\n    };\n\n    const formatPropertyName = (key: string): string => {\n        // Convert camelCase to Title Case with spaces\n        return key\n            .replace(/([A-Z])/g, ' $1')\n            .replace(/^./, str => str.toUpperCase())\n            .trim();\n    };\n\n    return (\n        <div className={className}>\n            <table style={tableStyle}>\n                <tbody>\n                    {data && Object.entries(data).map(([key, value], index) => (\n                        <tr key={`${key}-${index}`} style={rowStyle}>\n                            <td style={labelStyle}>{formatPropertyName(key)}</td>\n                            <td style={valueStyle}>{renderValue(value)}</td>\n                        </tr>\n                    ))}\n                </tbody>\n            </table>\n        </div>\n    );\n};\n"],"names":["_jsx","_jsxs"],"mappings":"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"}

package/dist/cjs/TimeMachine/ReadModelView.js

@@ -0,0 +1,40 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var Properties = require('./Properties.js');
+
+const ReadModelView = ({ versions, selectedIndex, hoveredIndex, onVersionSelect, onHoveringCardChange, }) => {
+    const displayIndex = hoveredIndex ?? selectedIndex;
+    const [flippedMap, setFlippedMap] = React.useState({});
+    const toggleFlip = (id) => (event) => {
+        event.stopPropagation();
+        setFlippedMap(previous => ({
+            ...previous,
+            [id]: !previous[id]
+        }));
+    };
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { className: "time-machine-background", children: [jsxRuntime.jsx("div", { className: "stars" }), jsxRuntime.jsx("div", { className: "stars stars-2" }), jsxRuntime.jsx("div", { className: "stars stars-3" })] }), jsxRuntime.jsx("div", { className: "time-machine-viewport", children: jsxRuntime.jsx("div", { className: "windows-container", children: versions.map((version, index) => {
+                        const depth = index - displayIndex;
+                        const isActive = index === displayIndex;
+                        const isVisible = depth >= 0 && depth < 10;
+                        const isFlipped = flippedMap[version.id] ?? false;
+                        if (!isVisible)
+                            return null;
+                        const events = isActive && version.events?.length
+                            ? version.events.map(event => ({
+                                ...event,
+                                occurred: new Date(event.occurred)
+                            }))
+                            : [];
+                        return (jsxRuntime.jsx("div", { className: `version-window ${isActive ? 'active' : ''} ${isFlipped ? 'flipped' : ''}`, style: {
+                                '--depth': depth,
+                                '--z-offset': -depth * 150,
+                                '--scale': 1 - depth * 0.05,
+                                '--opacity': 1 - depth * 0.12,
+                            }, onClick: () => onVersionSelect(index), onMouseEnter: () => onHoveringCardChange(true), onMouseLeave: () => onHoveringCardChange(false), children: jsxRuntime.jsxs("div", { className: "version-window-inner", children: [jsxRuntime.jsxs("div", { className: "version-window-face version-window-face--front", children: [jsxRuntime.jsxs("div", { className: "window-chrome", children: [jsxRuntime.jsxs("div", { className: "window-controls", children: [jsxRuntime.jsx("span", { className: "control close" }), jsxRuntime.jsx("span", { className: "control minimize" }), jsxRuntime.jsx("span", { className: "control maximize" })] }), jsxRuntime.jsx("div", { className: "window-title", children: version.label }), jsxRuntime.jsx("div", { className: "window-actions", children: jsxRuntime.jsx("button", { type: "button", className: "window-flip-button", onClick: toggleFlip(version.id), "aria-label": "Show related events", "aria-pressed": isFlipped, children: jsxRuntime.jsx("i", { className: `pi ${isFlipped ? 'pi-undo' : 'pi-refresh'}` }) }) })] }), jsxRuntime.jsx("div", { className: "window-content", children: version.content })] }), jsxRuntime.jsxs("div", { className: "version-window-face version-window-face--back", children: [jsxRuntime.jsxs("div", { className: "window-chrome window-chrome--back", children: [jsxRuntime.jsxs("div", { className: "window-controls", children: [jsxRuntime.jsx("span", { className: "control close" }), jsxRuntime.jsx("span", { className: "control minimize" }), jsxRuntime.jsx("span", { className: "control maximize" })] }), jsxRuntime.jsx("div", { className: "window-title", children: "Related Events" }), jsxRuntime.jsx("div", { className: "window-actions", children: jsxRuntime.jsx("button", { type: "button", className: "window-flip-button", onClick: toggleFlip(version.id), "aria-label": "Show read model snapshot", "aria-pressed": isFlipped, children: jsxRuntime.jsx("i", { className: `pi ${isFlipped ? 'pi-undo' : 'pi-refresh'}` }) }) })] }), jsxRuntime.jsx("div", { className: "window-content window-content--events", children: jsxRuntime.jsx("div", { className: "snapshot-event-list", children: events.map((event, eventIndex) => (jsxRuntime.jsxs("div", { className: "snapshot-event", children: [jsxRuntime.jsxs("div", { className: "snapshot-event-header", children: [jsxRuntime.jsx("span", { className: "snapshot-event-name", children: event.type }), jsxRuntime.jsx("span", { className: "snapshot-event-timestamp", children: event.occurred.toLocaleString() })] }), jsxRuntime.jsx(Properties.Properties, { data: event.content, align: "left" })] }, `${version.id}-${event.sequenceNumber ?? eventIndex}`))) }) })] })] }) }, version.id));
+                    }) }) })] }));
+};
+
+exports.ReadModelView = ReadModelView;
+//# sourceMappingURL=ReadModelView.js.map

package/dist/cjs/TimeMachine/ReadModelView.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ReadModelView.js","sources":["../../../TimeMachine/ReadModelView.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 } from 'react';\nimport type { Version } from './types';\nimport { Properties } from './Properties';\n\ninterface ReadModelViewProps {\n    versions: Version[];\n    selectedIndex: number;\n    hoveredIndex: number | null;\n    onVersionSelect: (index: number) => void;\n    onHoveringCardChange: (isHovering: boolean) => void;\n}\n\nexport const ReadModelView: React.FC<ReadModelViewProps> = ({\n    versions,\n    selectedIndex,\n    hoveredIndex,\n    onVersionSelect,\n    onHoveringCardChange,\n}) => {\n    const displayIndex = hoveredIndex ?? selectedIndex;\n    const [flippedMap, setFlippedMap] = useState<Record<string, boolean>>({});\n\n    const toggleFlip = (id: string) => (event: React.MouseEvent<HTMLButtonElement>) => {\n        event.stopPropagation();\n        setFlippedMap(previous => ({\n            ...previous,\n            [id]: !previous[id]\n        }));\n    };\n\n    return (\n        <>\n            {/* Starfield background */}\n            <div className=\"time-machine-background\">\n                <div className=\"stars\"></div>\n                <div className=\"stars stars-2\"></div>\n                <div className=\"stars stars-3\"></div>\n            </div>\n\n            {/* 3D Stacked Windows */}\n            <div className=\"time-machine-viewport\">\n                <div className=\"windows-container\">\n                    {versions.map((version, index) => {\n                        const depth = index - displayIndex;\n                        const isActive = index === displayIndex;\n                        const isVisible = depth >= 0 && depth < 10;\n                        const isFlipped = flippedMap[version.id] ?? false;\n\n                        if (!isVisible) return null;\n\n                        // Only prepare events for the active version to avoid showing all events at once\n                        const events = isActive && version.events?.length\n                            ? version.events.map(event => ({\n                                ...event,\n                                occurred: new Date(event.occurred)\n                            }))\n                            : [];\n\n                        return (\n                            <div\n                                key={version.id}\n                                className={`version-window ${isActive ? 'active' : ''} ${isFlipped ? 'flipped' : ''}`}\n                                style={{\n                                    '--depth': depth,\n                                    '--z-offset': -depth * 150,\n                                    '--scale': 1 - depth * 0.05,\n                                    '--opacity': 1 - depth * 0.12,\n                                } as React.CSSProperties}\n                                onClick={() => onVersionSelect(index)}\n                                onMouseEnter={() => onHoveringCardChange(true)}\n                                onMouseLeave={() => onHoveringCardChange(false)}\n                            >\n                                <div className=\"version-window-inner\">\n                                    <div className=\"version-window-face version-window-face--front\">\n                                        <div className=\"window-chrome\">\n                                            <div className=\"window-controls\">\n                                                <span className=\"control close\"></span>\n                                                <span className=\"control minimize\"></span>\n                                                <span className=\"control maximize\"></span>\n                                            </div>\n                                            <div className=\"window-title\">{version.label}</div>\n                                            <div className=\"window-actions\">\n                                                <button\n                                                    type=\"button\"\n                                                    className=\"window-flip-button\"\n                                                    onClick={toggleFlip(version.id)}\n                                                    aria-label=\"Show related events\"\n                                                    aria-pressed={isFlipped}\n                                                >\n                                                    <i className={`pi ${isFlipped ? 'pi-undo' : 'pi-refresh'}`} />\n                                                </button>\n                                            </div>\n                                        </div>\n                                        <div className=\"window-content\">\n                                            {version.content}\n                                        </div>\n                                    </div>\n                                    <div className=\"version-window-face version-window-face--back\">\n                                        <div className=\"window-chrome window-chrome--back\">\n                                            <div className=\"window-controls\">\n                                                <span className=\"control close\"></span>\n                                                <span className=\"control minimize\"></span>\n                                                <span className=\"control maximize\"></span>\n                                            </div>\n                                            <div className=\"window-title\">Related Events</div>\n                                            <div className=\"window-actions\">\n                                                <button\n                                                    type=\"button\"\n                                                    className=\"window-flip-button\"\n                                                    onClick={toggleFlip(version.id)}\n                                                    aria-label=\"Show read model snapshot\"\n                                                    aria-pressed={isFlipped}\n                                                >\n                                                    <i className={`pi ${isFlipped ? 'pi-undo' : 'pi-refresh'}`} />\n                                                </button>\n                                            </div>\n                                        </div>\n                                        <div className=\"window-content window-content--events\">\n                                            <div className=\"snapshot-event-list\">\n                                                {events.map((event, eventIndex) => (\n                                                    <div key={`${version.id}-${event.sequenceNumber ?? eventIndex}`} className=\"snapshot-event\">\n                                                        <div className=\"snapshot-event-header\">\n                                                            <span className=\"snapshot-event-name\">{event.type}</span>\n                                                            <span className=\"snapshot-event-timestamp\">{event.occurred.toLocaleString()}</span>\n                                                        </div>\n                                                        <Properties data={event.content} align=\"left\" />\n                                                    </div>\n                                                ))}\n                                            </div>\n                                        </div>\n                                    </div>\n                                </div>\n                            </div>\n                        );\n                    })}\n                </div>\n            </div>\n        </>\n    );\n};\n"],"names":["useState","_jsxs","_jsx","Properties"],"mappings":"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"}

package/dist/cjs/TimeMachine/TimeMachine.js

@@ -0,0 +1,98 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var ReadModelView = require('./ReadModelView.js');
+var EventsView = require('./EventsView.js');
+require('./TimeMachine.css');
+
+const TimeMachine = ({ versions, currentVersionIndex = 0, onVersionChange, scrollSensitivity = 50, }) => {
+    const [selectedIndex, setSelectedIndex] = React.useState(currentVersionIndex);
+    const [hoveredIndex, setHoveredIndex] = React.useState(null);
+    const [isHoveringCard, setIsHoveringCard] = React.useState(false);
+    const [viewMode, setViewMode] = React.useState('readmodel');
+    const containerRef = React.useRef(null);
+    const scrollAccumulatorRef = React.useRef(0);
+    const handleVersionSelect = React.useCallback((index) => {
+        setSelectedIndex(index);
+        onVersionChange?.(index);
+    }, [onVersionChange]);
+    const handleTimelineHover = React.useCallback((index) => {
+        setHoveredIndex(index);
+    }, []);
+    React.useEffect(() => {
+        if (viewMode !== 'readmodel') {
+            return;
+        }
+        const container = containerRef.current;
+        if (!container)
+            return;
+        const handleWheel = (e) => {
+            if (isHoveringCard) {
+                return;
+            }
+            e.preventDefault();
+            const delta = Math.abs(e.deltaX) > Math.abs(e.deltaY) ? e.deltaX : e.deltaY;
+            scrollAccumulatorRef.current += delta;
+            if (Math.abs(scrollAccumulatorRef.current) >= scrollSensitivity) {
+                const direction = scrollAccumulatorRef.current > 0 ? 1 : -1;
+                const newIndex = Math.max(0, Math.min(versions.length - 1, selectedIndex + direction));
+                if (newIndex !== selectedIndex) {
+                    setSelectedIndex(newIndex);
+                    onVersionChange?.(newIndex);
+                }
+                scrollAccumulatorRef.current = 0;
+            }
+        };
+        container.addEventListener('wheel', handleWheel, { passive: false });
+        return () => {
+            container.removeEventListener('wheel', handleWheel);
+        };
+    }, [versions.length, selectedIndex, onVersionChange, scrollSensitivity, isHoveringCard, viewMode]);
+    const allEvents = versions.flatMap(version => version.events || []);
+    return (jsxRuntime.jsxs("div", { className: "time-machine", ref: containerRef, children: [jsxRuntime.jsxs("div", { className: "view-switcher", children: [jsxRuntime.jsx("button", { className: `view-button ${viewMode === 'readmodel' ? 'active' : ''}`, onClick: () => setViewMode('readmodel'), "aria-label": "Read Model View", title: "Read Model View", children: jsxRuntime.jsx("i", { className: "pi pi-box" }) }), jsxRuntime.jsx("button", { className: `view-button ${viewMode === 'events' ? 'active' : ''}`, onClick: () => setViewMode('events'), "aria-label": "Events View", title: "Events View", children: jsxRuntime.jsx("i", { className: "pi pi-list" }) })] }), viewMode === 'readmodel' ? (jsxRuntime.jsx(ReadModelView.ReadModelView, { versions: versions, selectedIndex: selectedIndex, hoveredIndex: hoveredIndex, onVersionSelect: handleVersionSelect, onHoveringCardChange: setIsHoveringCard })) : (jsxRuntime.jsx(EventsView.EventsView, { events: allEvents })), viewMode === 'readmodel' && (jsxRuntime.jsx(Timeline, { versions: versions, selectedIndex: selectedIndex, hoveredIndex: hoveredIndex, onSelect: handleVersionSelect, onHover: handleTimelineHover })), viewMode === 'readmodel' && (jsxRuntime.jsxs("div", { className: "navigation-controls", children: [jsxRuntime.jsx("button", { className: "nav-button prev", disabled: selectedIndex === 0, onClick: () => handleVersionSelect(Math.max(0, selectedIndex - 1)), "aria-label": "Previous version", children: "\u2039" }), jsxRuntime.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) => {
+        if (hoverIdx === null)
+            return 1;
+        const distance = Math.abs(index - hoverIdx);
+        if (distance === 0)
+            return 2.0;
+        if (distance === 1)
+            return 1.6;
+        if (distance === 2)
+            return 1.3;
+        if (distance === 3)
+            return 1.1;
+        return 1;
+    };
+    const formatDate = (date) => {
+        return date.toLocaleDateString('en-US', {
+            month: 'short',
+            day: 'numeric',
+            year: 'numeric',
+        });
+    };
+    const formatTime = (date) => {
+        return date.toLocaleTimeString('en-US', {
+            hour: 'numeric',
+            minute: '2-digit',
+            hour12: true,
+        });
+    };
+    return (jsxRuntime.jsx("div", { className: "timeline", onMouseLeave: () => onHover(null), children: jsxRuntime.jsx("div", { className: "timeline-track", children: versions.map((version, index) => {
+                const magnification = getMagnification(index, hoveredIndex);
+                const isSelected = index === selectedIndex;
+                const isHovered = index === hoveredIndex;
+                return (jsxRuntime.jsxs("div", { className: `timeline-entry ${isSelected ? 'selected' : ''} ${isHovered ? 'hovered' : ''}`, style: {
+                        '--magnification': magnification,
+                    }, onMouseEnter: () => onHover(index), onClick: () => onSelect(index), children: [jsxRuntime.jsx("div", { className: "timeline-tick" }), jsxRuntime.jsxs("div", { className: "timeline-label", children: [jsxRuntime.jsx("span", { className: "timeline-date", children: formatDate(version.timestamp) }), jsxRuntime.jsx("span", { className: "timeline-time", children: formatTime(version.timestamp) })] })] }, version.id));
+            }) }) }));
+};
+
+exports.TimeMachine = TimeMachine;
+exports.default = TimeMachine;
+//# sourceMappingURL=TimeMachine.js.map

package/dist/cjs/TimeMachine/TimeMachine.js.map

@@ -0,0 +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":["useState","useRef","useCallback","useEffect","_jsxs","_jsx","ReadModelView","EventsView"],"mappings":"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"}

package/dist/cjs/TimeMachine/index.js

@@ -0,0 +1,14 @@
+'use strict';
+
+var TimeMachine = require('./TimeMachine.js');
+var ReadModelView = require('./ReadModelView.js');
+var EventsView = require('./EventsView.js');
+var Properties = require('./Properties.js');
+
+
+
+exports.TimeMachine = TimeMachine.TimeMachine;
+exports.ReadModelView = ReadModelView.ReadModelView;
+exports.EventsView = EventsView.EventsView;
+exports.Properties = Properties.Properties;
+//# sourceMappingURL=index.js.map

package/dist/cjs/TimeMachine/index.js.map

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

package/dist/cjs/index.js

@@ -0,0 +1,22 @@
+'use strict';
+
+var index = require('./CommandDialog/index.js');
+var index$1 = require('./CommandForm/index.js');
+var index$2 = require('./DataPage/index.js');
+var index$3 = require('./DataTables/index.js');
+var index$4 = require('./Dialogs/index.js');
+var index$5 = require('./Dropdown/index.js');
+var index$6 = require('./PivotViewer/index.js');
+var index$7 = require('./TimeMachine/index.js');
+
+
+
+exports.CommandDialog = index;
+exports.CommandForm = index$1;
+exports.DataPage = index$2;
+exports.dataTables = index$3;
+exports.dialogs = index$4;
+exports.Dropdown = index$5;
+exports.PivotViewer = index$6;
+exports.TimeMachine = index$7;
+//# sourceMappingURL=index.js.map

package/dist/cjs/index.js.map

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

package/dist/cjs/useOverlayZIndex.js

@@ -0,0 +1,24 @@
+'use strict';
+
+var React = require('react');
+
+function useOverlayZIndex(className, zIndex = 10000) {
+    React.useEffect(() => {
+        const observer = new MutationObserver(() => {
+            const panel = document.querySelector(`.${className}`);
+            if (panel instanceof HTMLElement && panel.style.zIndex !== zIndex.toString()) {
+                panel.style.zIndex = zIndex.toString();
+            }
+        });
+        observer.observe(document.body, {
+            childList: true,
+            subtree: true,
+            attributes: true,
+            attributeFilter: ['style']
+        });
+        return () => observer.disconnect();
+    }, [className, zIndex]);
+}
+
+exports.useOverlayZIndex = useOverlayZIndex;
+//# sourceMappingURL=useOverlayZIndex.js.map

package/dist/cjs/useOverlayZIndex.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useOverlayZIndex.js","sources":["../../useOverlayZIndex.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';\n\n/**\n * Hook to force a specific z-index on PrimeReact overlay components.\n * This is a workaround for PrimeReact's automatic z-index calculation\n * which can cause overlays to appear behind dialogs.\n *\n * @param className - The CSS class name to target (e.g., 'location-autocomplete-overlay')\n * @param zIndex - The desired z-index value (default: 10000)\n */\nexport function useOverlayZIndex(className: string, zIndex: number = 10000): void {\n    useEffect(() => {\n        const observer = new MutationObserver(() => {\n            const panel = document.querySelector(`.${className}`);\n            if (panel instanceof HTMLElement && panel.style.zIndex !== zIndex.toString()) {\n                panel.style.zIndex = zIndex.toString();\n            }\n        });\n\n        observer.observe(document.body, {\n            childList: true,\n            subtree: true,\n            attributes: true,\n            attributeFilter: ['style']\n        });\n\n        return () => observer.disconnect();\n    }, [className, zIndex]);\n}\n"],"names":["useEffect"],"mappings":";;;;SAagB,gBAAgB,CAAC,SAAiB,EAAE,SAAiB,KAAK,EAAA;IACtEA,eAAS,CAAC,MAAK;AACX,QAAA,MAAM,QAAQ,GAAG,IAAI,gBAAgB,CAAC,MAAK;YACvC,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,CAAA,CAAA,EAAI,SAAS,CAAA,CAAE,CAAC;AACrD,YAAA,IAAI,KAAK,YAAY,WAAW,IAAI,KAAK,CAAC,KAAK,CAAC,MAAM,KAAK,MAAM,CAAC,QAAQ,EAAE,EAAE;gBAC1E,KAAK,CAAC,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC,QAAQ,EAAE;YAC1C;AACJ,QAAA,CAAC,CAAC;AAEF,QAAA,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,IAAI,EAAE;AAC5B,YAAA,SAAS,EAAE,IAAI;AACf,YAAA,OAAO,EAAE,IAAI;AACb,YAAA,UAAU,EAAE,IAAI;YAChB,eAAe,EAAE,CAAC,OAAO;AAC5B,SAAA,CAAC;AAEF,QAAA,OAAO,MAAM,QAAQ,CAAC,UAAU,EAAE;AACtC,IAAA,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,CAAC,CAAC;AAC3B;;;;"}

package/dist/esm/CommandDialog/CommandDialog.d.ts

@@ -0,0 +1,45 @@
+import { ICommandResult } from '@cratis/arc/commands';
+import { Constructor } from '@cratis/fundamentals';
+import React from 'react';
+import { BeforeExecuteCallback } from '../CommandForm/CommandForm';
+export type FieldValidator<TCommand> = (command: TCommand, fieldName: string, oldValue: unknown, newValue: unknown) => string | undefined;
+export type FieldChangeCallback<TCommand> = (command: TCommand, fieldName: string, oldValue: unknown, newValue: unknown) => void;
+export interface CommandDialogProps<TCommand, TResponse = object> {
+    command: Constructor<TCommand>;
+    initialValues?: Partial<TCommand>;
+    currentValues?: Partial<TCommand> | undefined;
+    visible: boolean;
+    header: string;
+    confirmLabel?: string;
+    cancelLabel?: string;
+    confirmIcon?: string;
+    cancelIcon?: string;
+    onConfirm: (result: ICommandResult<TResponse>) => void | Promise<void>;
+    onCancel: () => void;
+    onFieldValidate?: FieldValidator<TCommand>;
+    onFieldChange?: FieldChangeCallback<TCommand>;
+    onBeforeExecute?: BeforeExecuteCallback<TCommand>;
+    children?: React.ReactNode;
+    style?: React.CSSProperties;
+    width?: string;
+}
+interface CommandDialogContextValue<TCommand = unknown> {
+    onSuccess: (result: ICommandResult<any>) => void | Promise<void>;
+    onCancel: () => void;
+    confirmLabel: string;
+    cancelLabel: string;
+    confirmIcon: string;
+    cancelIcon: string;
+    onFieldValidate?: FieldValidator<TCommand>;
+    onFieldChange?: FieldChangeCallback<TCommand>;
+    onBeforeExecute?: BeforeExecuteCallback<TCommand>;
+}
+export declare const useCommandDialogContext: <TCommand = unknown>() => CommandDialogContextValue<TCommand>;
+export declare const CommandDialog: {
+    <TCommand extends object = any, TResponse = object>(props: CommandDialogProps<TCommand, TResponse>): import("react/jsx-runtime").JSX.Element;
+    Fields: (props: {
+        children: React.ReactNode;
+    }) => import("react/jsx-runtime").JSX.Element;
+};
+export {};
+//# sourceMappingURL=CommandDialog.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CommandDialog.d.ts","sourceRoot":"","sources":["../../../CommandDialog/CommandDialog.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AACtD,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAGnD,OAAO,KAAoC,MAAM,OAAO,CAAC;AACzD,OAAO,EAAsC,qBAAqB,EAAE,MAAM,4BAA4B,CAAC;AAGvG,MAAM,MAAM,cAAc,CAAC,QAAQ,IAAI,CAAC,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,KAAK,MAAM,GAAG,SAAS,CAAC;AAC1I,MAAM,MAAM,mBAAmB,CAAC,QAAQ,IAAI,CAAC,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;AAEjI,MAAM,WAAW,kBAAkB,CAAC,QAAQ,EAAE,SAAS,GAAG,MAAM;IAC5D,OAAO,EAAE,WAAW,CAAC,QAAQ,CAAC,CAAC;IAC/B,aAAa,CAAC,EAAE,OAAO,CAAC,QAAQ,CAAC,CAAC;IAClC,aAAa,CAAC,EAAE,OAAO,CAAC,QAAQ,CAAC,GAAG,SAAS,CAAC;IAC9C,OAAO,EAAE,OAAO,CAAC;IACjB,MAAM,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,EAAE,CAAC,MAAM,EAAE,cAAc,CAAC,SAAS,CAAC,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACvE,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,eAAe,CAAC,EAAE,cAAc,CAAC,QAAQ,CAAC,CAAC;IAC3C,aAAa,CAAC,EAAE,mBAAmB,CAAC,QAAQ,CAAC,CAAC;IAC9C,eAAe,CAAC,EAAE,qBAAqB,CAAC,QAAQ,CAAC,CAAC;IAClD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,UAAU,yBAAyB,CAAC,QAAQ,GAAG,OAAO;IAClD,SAAS,EAAE,CAAC,MAAM,EAAE,cAAc,CAAC,GAAG,CAAC,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACjE,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,YAAY,EAAE,MAAM,CAAC;IACrB,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,cAAc,CAAC,QAAQ,CAAC,CAAC;IAC3C,aAAa,CAAC,EAAE,mBAAmB,CAAC,QAAQ,CAAC,CAAC;IAC9C,eAAe,CAAC,EAAE,qBAAqB,CAAC,QAAQ,CAAC,CAAC;CACrD;AAID,eAAO,MAAM,uBAAuB,GAAI,QAAQ,GAAG,OAAO,OAKpC,yBAAyB,CAAC,QAAQ,CACvD,CAAC;AA0GF,eAAO,MAAM,aAAa;KAvDM,QAAQ,SAAS,MAAM,QAAQ,SAAS,kBAAkB,kBAAkB,CAAC,QAAQ,EAAE,SAAS,CAAC;oBAjBtF;QAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;KAAE;CAwErB,CAAC"}

package/dist/esm/CommandDialog/CommandDialog.js

@@ -0,0 +1,68 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { Dialog } from 'primereact/dialog';
+import { Button } from 'primereact/button';
+import React, { createContext, useContext } from 'react';
+import { CommandForm, useCommandInstance, useCommandFormContext } from '../CommandForm/CommandForm.js';
+
+const CommandDialogContext = createContext(undefined);
+const useCommandDialogContext = () => {
+    const context = useContext(CommandDialogContext);
+    if (!context) {
+        throw new Error('useCommandDialogContext must be used within a CommandDialog');
+    }
+    return context;
+};
+const CommandDialogFormContent = () => {
+    const command = useCommandInstance();
+    const { setCommandResult, setCommandValues, isValid, onBeforeExecute } = useCommandFormContext();
+    const { onSuccess: onConfirm, onCancel, confirmLabel, cancelLabel, confirmIcon, cancelIcon } = useCommandDialogContext();
+    const handleConfirm = async () => {
+        if (onBeforeExecute) {
+            const transformedValues = onBeforeExecute(command);
+            setCommandValues(transformedValues);
+        }
+        const result = await command.execute();
+        if (result.isSuccess) {
+            await onConfirm(result);
+        }
+        else {
+            setCommandResult(result);
+        }
+    };
+    const handleCancel = () => {
+        onCancel();
+    };
+    return (jsx(Fragment, { children: jsxs("div", { className: "card flex flex-wrap justify-content-center gap-3 mt-8", children: [jsx(Button, { label: confirmLabel, icon: confirmIcon, onClick: handleConfirm, disabled: !isValid }), jsx(Button, { label: cancelLabel, icon: cancelIcon, severity: 'secondary', onClick: handleCancel })] }) }));
+};
+const CommandDialogFieldsWrapper = (props) => {
+    React.Children.forEach(props.children, child => {
+        if (React.isValidElement(child)) {
+            const component = child.type;
+            if (component.displayName !== 'CommandFormField') {
+                throw new Error(`Only CommandFormField components are allowed as children of CommandDialog.Fields. Got: ${component.displayName || component.name || 'Unknown'}`);
+            }
+        }
+    });
+    return (jsx(CommandForm.Fields, { children: props.children }));
+};
+const CommandDialogComponent = (props) => {
+    const { command, initialValues, currentValues, visible, header, confirmLabel = 'Confirm', cancelLabel = 'Cancel', confirmIcon = 'pi pi-check', cancelIcon = 'pi pi-times', onConfirm, onCancel, onFieldValidate, onFieldChange, onBeforeExecute, children, style = { width: '50vw' }, width } = props;
+    const dialogStyle = width ? { ...style, width } : style;
+    const contextValue = {
+        onSuccess: onConfirm,
+        onCancel,
+        confirmLabel,
+        cancelLabel,
+        confirmIcon,
+        cancelIcon,
+        onFieldValidate,
+        onFieldChange,
+        onBeforeExecute
+    };
+    return (jsx(Dialog, { header: header, visible: visible, style: dialogStyle, onHide: onCancel, contentStyle: { overflow: 'visible' }, children: jsx(CommandDialogContext.Provider, { value: contextValue, children: jsxs(CommandForm, { command: command, initialValues: initialValues, currentValues: currentValues, onFieldValidate: onFieldValidate, onFieldChange: onFieldChange, onBeforeExecute: onBeforeExecute, children: [children, jsx(CommandDialogFormContent, {})] }) }) }));
+};
+CommandDialogComponent.Fields = CommandDialogFieldsWrapper;
+const CommandDialog = CommandDialogComponent;
+
+export { CommandDialog, useCommandDialogContext };
+//# sourceMappingURL=CommandDialog.js.map

package/dist/esm/CommandDialog/CommandDialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CommandDialog.js","sources":["../../../CommandDialog/CommandDialog.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 { ICommandResult } from '@cratis/arc/commands';\nimport { Constructor } from '@cratis/fundamentals';\nimport { Dialog } from 'primereact/dialog';\nimport { Button } from 'primereact/button';\nimport React, { createContext, useContext } from 'react';\nimport { CommandForm, useCommandFormContext, BeforeExecuteCallback } from '../CommandForm/CommandForm';\nimport { useCommandInstance } from '../CommandForm/CommandForm';\n\nexport type FieldValidator<TCommand> = (command: TCommand, fieldName: string, oldValue: unknown, newValue: unknown) => string | undefined;\nexport type FieldChangeCallback<TCommand> = (command: TCommand, fieldName: string, oldValue: unknown, newValue: unknown) => void;\n\nexport interface CommandDialogProps<TCommand, TResponse = object> {\n    command: Constructor<TCommand>;\n    initialValues?: Partial<TCommand>;\n    currentValues?: Partial<TCommand> | undefined;\n    visible: boolean;\n    header: string;\n    confirmLabel?: string;\n    cancelLabel?: string;\n    confirmIcon?: string;\n    cancelIcon?: string;\n    onConfirm: (result: ICommandResult<TResponse>) => void | Promise<void>;\n    onCancel: () => void;\n    onFieldValidate?: FieldValidator<TCommand>;\n    onFieldChange?: FieldChangeCallback<TCommand>;\n    onBeforeExecute?: BeforeExecuteCallback<TCommand>;\n    children?: React.ReactNode;\n    style?: React.CSSProperties;\n    width?: string;\n}\n\ninterface CommandDialogContextValue<TCommand = unknown> {\n    onSuccess: (result: ICommandResult<any>) => void | Promise<void>;\n    onCancel: () => void;\n    confirmLabel: string;\n    cancelLabel: string;\n    confirmIcon: string;\n    cancelIcon: string;\n    onFieldValidate?: FieldValidator<TCommand>;\n    onFieldChange?: FieldChangeCallback<TCommand>;\n    onBeforeExecute?: BeforeExecuteCallback<TCommand>;\n}\n\nconst CommandDialogContext = createContext<CommandDialogContextValue<unknown> | undefined>(undefined);\n\nexport const useCommandDialogContext = <TCommand = unknown,>() => {\n    const context = useContext(CommandDialogContext);\n    if (!context) {\n        throw new Error('useCommandDialogContext must be used within a CommandDialog');\n    }\n    return context as CommandDialogContextValue<TCommand>;\n};\n\nconst CommandDialogFormContent = () => {\n    const command = useCommandInstance();\n    const { setCommandResult, setCommandValues, isValid, onBeforeExecute } = useCommandFormContext();\n    const { onSuccess: onConfirm, onCancel, confirmLabel, cancelLabel, confirmIcon, cancelIcon } = useCommandDialogContext();\n\n    const handleConfirm = async () => {\n        if (onBeforeExecute) {\n            const transformedValues = onBeforeExecute(command);\n            setCommandValues(transformedValues);\n        }\n        const result = await command.execute();\n        if (result.isSuccess) {\n            await onConfirm(result);\n        } else {\n            setCommandResult(result);\n        }\n    };\n\n    const handleCancel = () => {\n        onCancel();\n    };\n\n    return (\n        <>\n            <div className=\"card flex flex-wrap justify-content-center gap-3 mt-8\">\n                <Button label={confirmLabel} icon={confirmIcon} onClick={handleConfirm} disabled={!isValid} />\n                <Button label={cancelLabel} icon={cancelIcon} severity='secondary' onClick={handleCancel} />\n            </div>\n        </>\n    );\n};\n\nconst CommandDialogFieldsWrapper = (props: { children: React.ReactNode }) => {\n    React.Children.forEach(props.children, child => {\n        if (React.isValidElement(child)) {\n            const component = child.type as any;\n            if (component.displayName !== 'CommandFormField') {\n                throw new Error(`Only CommandFormField components are allowed as children of CommandDialog.Fields. Got: ${component.displayName || component.name || 'Unknown'}`);\n            }\n        }\n    });\n\n    return (\n        <CommandForm.Fields>\n            {props.children}\n        </CommandForm.Fields>\n    );\n};\n\nconst CommandDialogComponent = <TCommand extends object = any, TResponse = object>(props: CommandDialogProps<TCommand, TResponse>) => {\n    const {\n        command,\n        initialValues,\n        currentValues,\n        visible,\n        header,\n        confirmLabel = 'Confirm',\n        cancelLabel = 'Cancel',\n        confirmIcon = 'pi pi-check',\n        cancelIcon = 'pi pi-times',\n        onConfirm,\n        onCancel,\n        onFieldValidate,\n        onFieldChange,\n        onBeforeExecute,\n        children,\n        style = { width: '50vw' },\n        width\n    } = props;\n\n    const dialogStyle = width ? { ...style, width } : style;\n\n    const contextValue: CommandDialogContextValue<TCommand> = {\n        onSuccess: onConfirm,\n        onCancel,\n        confirmLabel,\n        cancelLabel,\n        confirmIcon,\n        cancelIcon,\n        onFieldValidate,\n        onFieldChange,\n        onBeforeExecute\n    };\n\n    return (\n        <Dialog\n            header={header}\n            visible={visible}\n            style={dialogStyle}\n            onHide={onCancel}\n            contentStyle={{ overflow: 'visible' }}\n        >\n            <CommandDialogContext.Provider value={contextValue}>\n                <CommandForm command={command} initialValues={initialValues} currentValues={currentValues} onFieldValidate={onFieldValidate} onFieldChange={onFieldChange} onBeforeExecute={onBeforeExecute}>\n                    {children}\n                    <CommandDialogFormContent />\n                </CommandForm>\n            </CommandDialogContext.Provider>\n        </Dialog>\n    );\n};\n\nCommandDialogComponent.Fields = CommandDialogFieldsWrapper;\n\nexport const CommandDialog = CommandDialogComponent;\n"],"names":["_jsx","_jsxs"],"mappings":"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"}

package/dist/esm/CommandDialog/CommandDialog.stories.d.ts

@@ -0,0 +1,7 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { CommandDialog } from './CommandDialog';
+declare const meta: Meta<typeof CommandDialog>;
+export default meta;
+type Story = StoryObj<typeof CommandDialog>;
+export declare const Default: Story;
+//# sourceMappingURL=CommandDialog.stories.d.ts.map

package/dist/esm/CommandDialog/CommandDialog.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CommandDialog.stories.d.ts","sourceRoot":"","sources":["../../../CommandDialog/CommandDialog.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAEhD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,aAAa,CAGpC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,aAAa,CAAC,CAAC;AAE5C,eAAO,MAAM,OAAO,EAAE,KASrB,CAAC"}

package/dist/esm/CommandDialog/CommandDialog.stories.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { CommandDialog } from './CommandDialog';
+const meta = {
+    title: 'CommandDialog/CommandDialog',
+    component: CommandDialog,
+};
+export default meta;
+export const Default = {
+    args: {},
+    render: (args) => (_jsx("div", { className: "storybook-wrapper", children: _jsx(CommandDialog, { ...args }) }))
+};
+//# sourceMappingURL=CommandDialog.stories.js.map

package/dist/esm/CommandDialog/CommandDialog.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CommandDialog.stories.js","sourceRoot":"","sources":["../../../CommandDialog/CommandDialog.stories.tsx"],"names":[],"mappings":";AAKA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAEhD,MAAM,IAAI,GAA+B;IACvC,KAAK,EAAE,6BAA6B;IACpC,SAAS,EAAE,aAAa;CACzB,CAAC;AAEF,eAAe,IAAI,CAAC;AAGpB,MAAM,CAAC,MAAM,OAAO,GAAU;IAC1B,IAAI,EAAE,EAEL;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,CACd,cAAK,SAAS,EAAC,mBAAmB,YAC9B,KAAC,aAAa,OAAK,IAAI,GAAI,GACzB,CACT;CACJ,CAAC"}

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

@@ -0,0 +1,2 @@
+export * from './CommandDialog';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../CommandDialog/index.ts"],"names":[],"mappings":"AAGA,cAAc,iBAAiB,CAAC"}

package/dist/esm/CommandDialog/index.js

@@ -0,0 +1,2 @@
+export { CommandDialog, useCommandDialogContext } from './CommandDialog.js';
+//# sourceMappingURL=index.js.map

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

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

package/dist/esm/CommandForm/CommandForm.d.ts

@@ -0,0 +1,49 @@
+import { Constructor } from '@cratis/fundamentals';
+import { SetCommandValues } from '@cratis/arc.react/commands';
+import { ICommandResult } from '@cratis/arc/commands';
+import React from 'react';
+export type BeforeExecuteCallback<TCommand> = (values: TCommand) => TCommand;
+export interface CommandFormProps<TCommand extends object> {
+    command: Constructor<TCommand>;
+    initialValues?: Partial<TCommand>;
+    currentValues?: Partial<TCommand> | undefined;
+    onFieldValidate?: (command: TCommand, fieldName: string, oldValue: unknown, newValue: unknown) => string | undefined;
+    onFieldChange?: (command: TCommand, fieldName: string, oldValue: unknown, newValue: unknown) => void;
+    onBeforeExecute?: BeforeExecuteCallback<TCommand>;
+    children?: React.ReactNode;
+}
+interface CommandFormContextValue<TCommand> {
+    command: Constructor<TCommand>;
+    commandInstance: TCommand;
+    setCommandValues: SetCommandValues<TCommand>;
+    commandResult?: ICommandResult<unknown>;
+    setCommandResult: (result: ICommandResult<unknown>) => void;
+    getFieldError: (propertyName: string) => string | undefined;
+    isValid: boolean;
+    setFieldValidity: (fieldName: string, isValid: boolean) => void;
+    onFieldValidate?: (command: TCommand, fieldName: string, oldValue: unknown, newValue: unknown) => string | undefined;
+    onFieldChange?: (command: TCommand, fieldName: string, oldValue: unknown, newValue: unknown) => void;
+    onBeforeExecute?: BeforeExecuteCallback<TCommand>;
+    customFieldErrors: Record<string, string>;
+    setCustomFieldError: (fieldName: string, error: string | undefined) => void;
+}
+export declare const useCommandFormContext: <TCommand>() => CommandFormContextValue<TCommand>;
+export declare const useCommandInstance: <TCommand = any>() => TCommand;
+export declare const useSetCommandResult: () => (result: ICommandResult<unknown>) => void;
+export declare const CommandForm: {
+    <TCommand extends object = any>(props: CommandFormProps<TCommand>): import("react/jsx-runtime").JSX.Element;
+    Fields: {
+        (props: {
+            children: React.ReactNode;
+        }): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Column: {
+        (_props: {
+            children: React.ReactNode;
+        }): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+};
+export {};
+//# sourceMappingURL=CommandForm.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CommandForm.d.ts","sourceRoot":"","sources":["../../../CommandForm/CommandForm.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACnD,OAAO,EAAc,gBAAgB,EAAE,MAAM,4BAA4B,CAAC;AAC1E,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AACtD,OAAO,KAAoE,MAAM,OAAO,CAAC;AAIzF,MAAM,MAAM,qBAAqB,CAAC,QAAQ,IAAI,CAAC,MAAM,EAAE,QAAQ,KAAK,QAAQ,CAAC;AAE7E,MAAM,WAAW,gBAAgB,CAAC,QAAQ,SAAS,MAAM;IACrD,OAAO,EAAE,WAAW,CAAC,QAAQ,CAAC,CAAC;IAC/B,aAAa,CAAC,EAAE,OAAO,CAAC,QAAQ,CAAC,CAAC;IAClC,aAAa,CAAC,EAAE,OAAO,CAAC,QAAQ,CAAC,GAAG,SAAS,CAAC;IAC9C,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,KAAK,MAAM,GAAG,SAAS,CAAC;IACrH,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IACrG,eAAe,CAAC,EAAE,qBAAqB,CAAC,QAAQ,CAAC,CAAC;IAClD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC9B;AAED,UAAU,uBAAuB,CAAC,QAAQ;IACtC,OAAO,EAAE,WAAW,CAAC,QAAQ,CAAC,CAAC;IAC/B,eAAe,EAAE,QAAQ,CAAC;IAC1B,gBAAgB,EAAE,gBAAgB,CAAC,QAAQ,CAAC,CAAC;IAC7C,aAAa,CAAC,EAAE,cAAc,CAAC,OAAO,CAAC,CAAC;IACxC,gBAAgB,EAAE,CAAC,MAAM,EAAE,cAAc,CAAC,OAAO,CAAC,KAAK,IAAI,CAAC;IAC5D,aAAa,EAAE,CAAC,YAAY,EAAE,MAAM,KAAK,MAAM,GAAG,SAAS,CAAC;IAC5D,OAAO,EAAE,OAAO,CAAC;IACjB,gBAAgB,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAChE,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,KAAK,MAAM,GAAG,SAAS,CAAC;IACrH,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IACrG,eAAe,CAAC,EAAE,qBAAqB,CAAC,QAAQ,CAAC,CAAC;IAClD,iBAAiB,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC1C,mBAAmB,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI,CAAC;CAC/E;AAID,eAAO,MAAM,qBAAqB,GAAI,QAAQ,OAKxB,uBAAuB,CAAC,QAAQ,CACrD,CAAC;AAGF,eAAO,MAAM,kBAAkB,GAAI,QAAQ,GAAG,GAAG,OAEnB,QAC7B,CAAC;AAGF,eAAO,MAAM,mBAAmB,iBA5BD,cAAc,CAAC,OAAO,CAAC,KAAK,IA+B1D,CAAC;AA8MF,eAAO,MAAM,WAAW;KA5GM,QAAQ,SAAS,MAAM,eAAe,gBAAgB,CAAC,QAAQ,CAAC;;gBAhGrD;YAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;SAAE;;;;iBAkM1B;YAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;SAAE;;;CAU1B,CAAC"}