@cratis/components 0.1.9 → 0.1.12

package/dist/cjs/TimeMachine/TimeMachine.css

@@ -0,0 +1,567 @@
+/* Time Machine Container */
+.time-machine {
+  position: relative;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+  background: radial-gradient(ellipse at center, #0a0a1a 0%, #000005 100%);
+  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, sans-serif;
+}
+
+/* View Switcher */
+.view-switcher {
+  position: absolute;
+  top: 20px;
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  gap: 8px;
+  background: rgba(255, 255, 255, 0.05);
+  padding: 6px;
+  border-radius: 12px;
+  backdrop-filter: blur(10px);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  z-index: 100;
+}
+
+.view-button {
+  width: 48px;
+  height: 48px;
+  border: none;
+  border-radius: 8px;
+  background: transparent;
+  color: rgba(255, 255, 255, 0.6);
+  font-size: 20px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.2s ease;
+}
+
+.view-button:hover {
+  background: rgba(255, 255, 255, 0.1);
+  color: rgba(255, 255, 255, 0.9);
+}
+
+.view-button.active {
+  background: rgba(100, 150, 255, 0.2);
+  color: rgba(100, 150, 255, 1);
+  box-shadow: 0 0 15px rgba(100, 150, 255, 0.3);
+}
+
+.view-button i {
+  font-size: 20px;
+}
+
+
+/* Starfield Background */
+.time-machine-background {
+  position: absolute;
+  inset: 0;
+  overflow: hidden;
+  z-index: 0;
+  perspective: 500px;
+  perspective-origin: 50% 50%;
+}
+
+.stars {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 2px;
+  height: 2px;
+  background: transparent;
+  transform-style: preserve-3d;
+  animation: starfield 16s linear infinite;
+  box-shadow:
+    /* Layer 1 - close stars */
+    24vw -15vh 0 0px rgba(255,255,255,0.9),
+    -32vw 28vh 0 0px rgba(255,255,255,0.8),
+    45vw 35vh 0 0px rgba(255,255,255,0.7),
+    -18vw -40vh 0 0px rgba(255,255,255,0.9),
+    38vw -25vh 0 0px rgba(255,255,255,0.8),
+    -42vw 15vh 0 0px rgba(255,255,255,0.7),
+    12vw 42vh 0 0px rgba(255,255,255,0.9),
+    -28vw -18vh 0 0px rgba(255,255,255,0.8),
+    48vw 8vh 0 0px rgba(255,255,255,0.7),
+    -15vw 38vh 0 0px rgba(255,255,255,0.9),
+    32vw -42vh 0 0px rgba(255,255,255,0.8),
+    -45vw -8vh 0 0px rgba(255,255,255,0.7),
+    8vw -35vh 0 0px rgba(255,255,255,0.9),
+    -38vw 42vh 0 0px rgba(255,255,255,0.8),
+    42vw 18vh 0 0px rgba(255,255,255,0.7),
+    -8vw -28vh 0 0px rgba(255,255,255,0.9),
+    28vw 45vh 0 0px rgba(255,255,255,0.8),
+    -48vw 25vh 0 0px rgba(255,255,255,0.7),
+    15vw -8vh 0 0px rgba(255,255,255,0.9),
+    -22vw 12vh 0 0px rgba(255,255,255,0.8);
+}
+
+.stars-2 {
+  animation: starfield 16s linear infinite;
+  animation-delay: -5.33s;
+  box-shadow:
+    /* Layer 2 - medium stars */
+    -12vw 22vh 0 0px rgba(255,255,255,0.9),
+    35vw -32vh 0 0px rgba(255,255,255,0.8),
+    -40vw -15vh 0 0px rgba(255,255,255,0.7),
+    22vw 40vh 0 0px rgba(255,255,255,0.9),
+    -25vw -35vh 0 0px rgba(255,255,255,0.8),
+    40vw 12vh 0 0px rgba(255,255,255,0.7),
+    -35vw 32vh 0 0px rgba(255,255,255,0.9),
+    18vw -22vh 0 0px rgba(255,255,255,0.8),
+    -10vw 45vh 0 0px rgba(255,255,255,0.7),
+    45vw -10vh 0 0px rgba(255,255,255,0.9),
+    -30vw -42vh 0 0px rgba(255,255,255,0.8),
+    5vw 30vh 0 0px rgba(255,255,255,0.7),
+    -45vw 5vh 0 0px rgba(255,255,255,0.9),
+    30vw 22vh 0 0px rgba(255,255,255,0.8),
+    -20vw -12vh 0 0px rgba(255,255,255,0.7),
+    48vw -38vh 0 0px rgba(255,255,255,0.9),
+    -5vw 18vh 0 0px rgba(255,255,255,0.8),
+    25vw -45vh 0 0px rgba(255,255,255,0.7),
+    -48vw 38vh 0 0px rgba(255,255,255,0.9),
+    10vw -5vh 0 0px rgba(255,255,255,0.8);
+}
+
+.stars-3 {
+  animation: starfield 16s linear infinite;
+  animation-delay: -10.66s;
+  box-shadow:
+    /* Layer 3 - far stars */
+    18vw -28vh 0 0px rgba(255,255,255,0.9),
+    -28vw 35vh 0 0px rgba(255,255,255,0.8),
+    42vw 25vh 0 0px rgba(255,255,255,0.7),
+    -15vw -45vh 0 0px rgba(255,255,255,0.9),
+    35vw -18vh 0 0px rgba(255,255,255,0.8),
+    -42vw 8vh 0 0px rgba(255,255,255,0.7),
+    8vw 48vh 0 0px rgba(255,255,255,0.9),
+    -35vw -25vh 0 0px rgba(255,255,255,0.8),
+    48vw -5vh 0 0px rgba(255,255,255,0.7),
+    -8vw 28vh 0 0px rgba(255,255,255,0.9),
+    25vw -48vh 0 0px rgba(255,255,255,0.8),
+    -48vw -18vh 0 0px rgba(255,255,255,0.7),
+    5vw -38vh 0 0px rgba(255,255,255,0.9),
+    -25vw 48vh 0 0px rgba(255,255,255,0.8),
+    38vw 5vh 0 0px rgba(255,255,255,0.7),
+    -18vw -32vh 0 0px rgba(255,255,255,0.9),
+    32vw 38vh 0 0px rgba(255,255,255,0.8),
+    -38vw 18vh 0 0px rgba(255,255,255,0.7),
+    12vw -15vh 0 0px rgba(255,255,255,0.9),
+    -32vw 5vh 0 0px rgba(255,255,255,0.8);
+}
+
+@keyframes starfield {
+  0% {
+    transform: translateZ(-600px);
+    opacity: 0;
+  }
+  5% {
+    opacity: 1;
+  }
+  90% {
+    opacity: 1;
+  }
+  100% {
+    transform: translateZ(500px);
+    opacity: 0;
+  }
+}
+
+/* Viewport for 3D Windows */
+.time-machine-viewport {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  perspective: 1200px;
+  perspective-origin: center 25%;
+  z-index: 1;
+  box-sizing: border-box;
+}
+
+.windows-container {
+  position: relative;
+  width: 60%;
+  max-width: 700px;
+  height: 55%;
+  max-height: 500px;
+  transform-style: preserve-3d;
+}
+
+/* Individual Version Window */
+.version-window {
+  position: absolute;
+  inset: 0;
+  background: transparent;
+  overflow: visible;
+  cursor: pointer;
+  transform:
+    translateZ(calc(var(--z-offset) * 1px))
+    translateY(calc(var(--depth) * -35px))
+    scale(var(--scale));
+  opacity: var(--opacity);
+  transition:
+    transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
+    opacity 0.4s ease;
+  transform-style: preserve-3d;
+  will-change: transform, opacity;
+  perspective: 1500px;
+}
+
+.version-window-inner {
+  position: absolute;
+  inset: 0;
+  border-radius: 12px;
+  transform-style: preserve-3d;
+  transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+  box-shadow:
+    0 0 0 1px rgba(255, 255, 255, 0.1),
+    0 20px 60px rgba(0, 0, 0, 0.5),
+    0 0 40px rgba(100, 100, 255, 0.1);
+}
+
+.version-window.flipped .version-window-inner {
+  transform: rotateY(180deg);
+}
+
+.version-window-face {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  border-radius: inherit;
+  background: linear-gradient(180deg, #3a3a4a 0%, #2a2a3a 2%, #1e1e28 100%);
+  backface-visibility: hidden;
+  overflow: hidden;
+  pointer-events: auto;
+}
+
+.version-window-face--back {
+  transform: rotateY(180deg);
+  background: linear-gradient(180deg, #262638 0%, #1b1b27 100%);
+}
+
+.version-window.flipped .version-window-face--front {
+  pointer-events: none;
+}
+
+.version-window:not(.flipped) .version-window-face--back {
+  pointer-events: none;
+}
+
+.version-window.active .version-window-inner {
+  box-shadow:
+    0 0 0 2px rgba(100, 150, 255, 0.5),
+    0 20px 60px rgba(0, 0, 0, 0.5),
+    0 0 60px rgba(100, 150, 255, 0.2);
+}
+
+.version-window:hover:not(.active) .version-window-inner {
+  box-shadow:
+    0 0 0 1px rgba(255, 255, 255, 0.2),
+    0 25px 70px rgba(0, 0, 0, 0.6),
+    0 0 50px rgba(100, 100, 255, 0.15);
+}
+
+/* Window Chrome (Title Bar) */
+.window-chrome {
+  display: grid;
+  grid-template-columns: auto 1fr auto;
+  align-items: center;
+  height: 36px;
+  padding: 0 12px;
+  background: linear-gradient(180deg, #4a4a5a 0%, #3a3a4a 100%);
+  border-bottom: 1px solid rgba(0, 0, 0, 0.3);
+  gap: 12px;
+}
+
+.window-controls {
+  display: flex;
+  gap: 8px;
+}
+
+.control {
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  background: #666;
+}
+
+.control.close {
+  background: #ff5f57;
+}
+
+.control.minimize {
+  background: #ffbd2e;
+}
+
+.control.maximize {
+  background: #28ca41;
+}
+
+.window-title {
+  text-align: center;
+  font-size: 13px;
+  font-weight: 500;
+  color: rgba(255, 255, 255, 0.85);
+  margin: 0;
+}
+
+.window-actions {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+}
+
+.window-flip-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border-radius: 6px;
+  border: 1px solid rgba(255, 255, 255, 0.15);
+  background: linear-gradient(180deg, rgba(120, 130, 220, 0.25) 0%, rgba(60, 70, 140, 0.25) 100%);
+  color: #fff;
+  cursor: pointer;
+  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
+}
+
+.window-flip-button:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.35);
+  border-color: rgba(120, 160, 255, 0.4);
+}
+
+.window-flip-button:active {
+  transform: translateY(0);
+}
+
+.window-flip-button:focus-visible {
+  outline: 2px solid rgba(120, 160, 255, 0.85);
+  outline-offset: 2px;
+}
+
+.window-flip-button i {
+  font-size: 14px;
+}
+
+.window-chrome--back {
+  background: linear-gradient(180deg, #35354a 0%, #2b2b3c 100%);
+}
+
+/* Window Content */
+.window-content {
+  height: calc(100% - 36px);
+  padding: 20px;
+  overflow: auto;
+  background: linear-gradient(180deg, #1e1e28 0%, #16161e 100%);
+  color: #e0e0e0;
+}
+
+.window-content--events {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+}
+
+.snapshot-event-list {
+  display: flex;
+  flex-direction: column;
+  gap: 1.25rem;
+}
+
+.snapshot-event {
+  background: rgba(255, 255, 255, 0.05);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 10px;
+  padding: 1rem 1.25rem;
+  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
+}
+
+.snapshot-event-header {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 0.75rem;
+  margin-bottom: 0.75rem;
+}
+
+.snapshot-event-name {
+  font-size: 1rem;
+  font-weight: 600;
+  color: #ffffff;
+}
+
+.snapshot-event-timestamp {
+  font-size: 0.75rem;
+  color: rgba(255, 255, 255, 0.65);
+  font-family: -apple-system, BlinkMacSystemFont, 'SF Mono', monospace;
+}
+
+/* Timeline */
+.timeline {
+  position: absolute;
+  right: 20px;
+  top: 50%;
+  transform: translateY(-50%);
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  z-index: 10;
+}
+
+.timeline-track {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding: 20px 0;
+}
+
+.timeline-track::-webkit-scrollbar {
+  display: none;
+}
+
+/* Timeline Entry */
+.timeline-entry {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 10px;
+  padding: 4px 0;
+  cursor: pointer;
+  transform-origin: right center;
+  transform: scale(var(--magnification, 1));
+  transition: transform 0.15s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+}
+
+.timeline-tick {
+  width: calc(20px * var(--magnification, 1));
+  height: calc(2px * var(--magnification, 1));
+  background: rgba(255, 255, 255, 0.4);
+  border-radius: 1px;
+  transition:
+    width 0.15s ease,
+    height 0.15s ease,
+    background 0.15s ease;
+}
+
+.timeline-entry.selected .timeline-tick {
+  background: #6a9fff;
+  box-shadow: 0 0 8px rgba(106, 159, 255, 0.6);
+}
+
+.timeline-entry.hovered .timeline-tick {
+  background: rgba(255, 255, 255, 0.9);
+  box-shadow: 0 0 6px rgba(255, 255, 255, 0.4);
+}
+
+.timeline-label {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  opacity: 0;
+  transform: translateX(10px);
+  transition:
+    opacity 0.2s ease,
+    transform 0.2s ease;
+  pointer-events: none;
+  white-space: nowrap;
+}
+
+.timeline-entry.hovered .timeline-label,
+.timeline-entry.selected .timeline-label {
+  opacity: 1;
+  transform: translateX(0);
+}
+
+.timeline-date {
+  font-size: 11px;
+  font-weight: 600;
+  color: #fff;
+  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
+}
+
+.timeline-time {
+  font-size: 10px;
+  color: rgba(255, 255, 255, 0.7);
+  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
+}
+
+/* Navigation Controls */
+.navigation-controls {
+  position: absolute;
+  bottom: 30px;
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  gap: 20px;
+  z-index: 10;
+}
+
+.nav-button {
+  width: 60px;
+  height: 60px;
+  border: none;
+  border-radius: 50%;
+  background: linear-gradient(180deg, rgba(100, 100, 130, 0.8) 0%, rgba(60, 60, 90, 0.8) 100%);
+  color: white;
+  font-size: 28px;
+  font-weight: 300;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 1;
+  padding: 0;
+  box-shadow:
+    0 4px 20px rgba(0, 0, 0, 0.4),
+    inset 0 1px 0 rgba(255, 255, 255, 0.2);
+  transition:
+    transform 0.2s ease,
+    box-shadow 0.2s ease,
+    opacity 0.2s ease;
+  backdrop-filter: blur(10px);
+}
+
+.nav-button:hover:not(:disabled) {
+  transform: scale(1.1);
+  box-shadow:
+    0 6px 25px rgba(0, 0, 0, 0.5),
+    inset 0 1px 0 rgba(255, 255, 255, 0.3),
+    0 0 20px rgba(100, 150, 255, 0.3);
+}
+
+.nav-button:active:not(:disabled) {
+  transform: scale(0.95);
+}
+
+.nav-button:disabled {
+  opacity: 0.3;
+  cursor: not-allowed;
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+  .time-machine-viewport {
+    width: calc(100% - 120px);
+  }
+
+  .timeline {
+    width: 100px;
+  }
+
+  .windows-container {
+    width: 85%;
+    height: 60%;
+  }
+
+  .nav-button {
+    width: 50px;
+    height: 50px;
+    font-size: 24px;
+  }
+}

package/dist/cjs/TimeMachine/TimeMachine.js

@@ -8,11 +8,16 @@ var ReadModelView = require('./ReadModelView.js');
 var EventsView = require('./EventsView.js');
 require('./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] = React.useState(currentVersionIndex);
     const [hoveredIndex, setHoveredIndex] = React.useState(null);
     const [isHoveringCard, setIsHoveringCard] = React.useState(false);
-    const [viewMode, setViewMode] = React.useState('readmodel');
+    const [viewMode, setViewMode] = React.useState(ViewModes.ReadModel);
     const containerRef = React.useRef(null);
     const scrollAccumulatorRef = React.useRef(0);
     const handleVersionSelect = React.useCallback((index) => {
@@ -23,7 +28,7 @@ const TimeMachine = ({ versions, currentVersionIndex = 0, onVersionChange, scrol
         setHoveredIndex(index);
     }, []);
     React.useEffect(() => {
-        if (viewMode !== 'readmodel') {
+        if (viewMode !== ViewModes.ReadModel) {
             return;
         }
         const container = containerRef.current;
@@ -52,7 +57,7 @@ const TimeMachine = ({ versions, currentVersionIndex = 0, onVersionChange, scrol
         };
     }, [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" })] }))] }));
+    return (jsxRuntime.jsxs("div", { className: "time-machine", ref: containerRef, children: [jsxRuntime.jsxs("div", { className: "view-switcher", children: [jsxRuntime.jsx("button", { className: `view-button ${viewMode === ViewModes.ReadModel ? 'active' : ''}`, onClick: () => setViewMode(ViewModes.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 === ViewModes.Events ? 'active' : ''}`, onClick: () => setViewMode(ViewModes.Events), "aria-label": "Events View", title: "Events View", children: jsxRuntime.jsx("i", { className: "pi pi-list" }) })] }), viewMode === ViewModes.ReadModel ? (jsxRuntime.jsx(ReadModelView.ReadModelView, { versions: versions, selectedIndex: selectedIndex, hoveredIndex: hoveredIndex, onVersionSelect: handleVersionSelect, onHoveringCardChange: setIsHoveringCard })) : (jsxRuntime.jsx(EventsView.EventsView, { events: allEvents })), viewMode === ViewModes.ReadModel && (jsxRuntime.jsx(Timeline, { versions: versions, selectedIndex: selectedIndex, hoveredIndex: hoveredIndex, onSelect: handleVersionSelect, onHover: handleTimelineHover })), viewMode === ViewModes.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) => {

package/dist/cjs/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":["useState","useRef","useCallback","useEffect","_jsxs","_jsx","ReadModelView","EventsView"],"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":["useState","useRef","useCallback","useEffect","_jsxs","_jsx","ReadModelView","EventsView"],"mappings":"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"}

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

@@ -4,4 +4,5 @@ declare const meta: Meta<typeof CommandForm>;
 export default meta;
 type Story = StoryObj<typeof CommandForm>;
 export declare const Default: Story;
+export declare const UserRegistration: Story;
 //# sourceMappingURL=CommandForm.stories.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"CommandForm.stories.d.ts","sourceRoot":"","sources":["../../../CommandForm/CommandForm.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAE5C,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,WAAW,CAGlC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,WAAW,CAAC,CAAC;AAC1C,eAAO,MAAM,OAAO,EAAE,KASrB,CAAC"}
+{"version":3,"file":"CommandForm.stories.d.ts","sourceRoot":"","sources":["../../../CommandForm/CommandForm.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAa5C,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,WAAW,CAGlC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,WAAW,CAAC,CAAC;AAQ1C,eAAO,MAAM,OAAO,EAAE,KAOrB,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAwF9B,CAAC"}