From 8dd9a7af94e810e7d1f3ef5a0d4d5d7afabe8f4a Mon Sep 17 00:00:00 2001
From: woksin <sindrewilting@gmail.com>
Date: Wed, 20 May 2026 10:05:25 +0200
Subject: [PATCH] refactor: improve theme handling and styling across
 components

---
 Source/.storybook/preview.css                 |  3 +-
 Source/.storybook/preview.js                  | 57 ++++++++++++++++---
 Source/CommandDialog/CommandStepper.tsx       |  2 +-
 Source/CommandDialog/StepperCommandDialog.tsx |  9 ++-
 Source/Common/FormElement.tsx                 |  2 +-
 Source/DataPage/DataPage.tsx                  | 14 ++++-
 Source/Dialogs/Dialog.tsx                     | 11 ++--
 .../ObjectContentEditor.tsx                   | 22 +++----
 Source/PivotViewer/PivotViewer.css            |  5 +-
 Source/SchemaEditor/TypeCell.tsx              |  6 +-
 Source/TimeMachine/EventsView.css             | 34 +++++------
 Source/TimeMachine/Properties.css             | 57 +++++++++++++++++++
 Source/TimeMachine/Properties.tsx             | 47 +++++----------
 Source/TimeMachine/TimeMachine.css            | 56 ++++++++++++------
 Source/package.json                           |  7 ---
 15 files changed, 214 insertions(+), 118 deletions(-)
 create mode 100644 Source/TimeMachine/Properties.css

diff --git a/Source/.storybook/preview.css b/Source/.storybook/preview.css
index 8934873..50215c6 100644
--- a/Source/.storybook/preview.css
+++ b/Source/.storybook/preview.css
@@ -1,7 +1,6 @@
 /* 1. Tailwind (includes preflight reset) — must come first */
 @import "tailwindcss";
-/* 2. PrimeReact theme — must come AFTER Tailwind so it overrides the preflight reset */
-@import 'primereact/resources/themes/lara-dark-blue/theme.css';
+/* 2. PrimeReact theme is injected dynamically by the Storybook theme decorator */
 
 html, body {
   background-color: var(--surface-ground);
diff --git a/Source/.storybook/preview.js b/Source/.storybook/preview.js
index 06e72d8..80b4556 100644
--- a/Source/.storybook/preview.js
+++ b/Source/.storybook/preview.js
@@ -1,17 +1,56 @@
 // Copyright (c) Cratis. All rights reserved.
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
+import React from 'react';
 import 'primeicons/primeicons.css';
 import './preview.css';
+import darkThemeUrl from 'primereact/resources/themes/lara-dark-blue/theme.css?url';
+import lightThemeUrl from 'primereact/resources/themes/lara-light-blue/theme.css?url';
+
+export const globalTypes = {
+    theme: {
+        name: 'Theme',
+        description: 'PrimeReact theme',
+        defaultValue: 'dark',
+        toolbar: {
+            icon: 'paintbrush',
+            items: [
+                { value: 'dark', title: 'Lara Dark Blue' },
+                { value: 'light', title: 'Lara Light Blue' },
+            ],
+            showName: true,
+        },
+    },
+};
+
+function applyThemeLink(href) {
+    let link = document.getElementById('primereact-theme');
+    if (!link) {
+        link = document.createElement('link');
+        link.id = 'primereact-theme';
+        link.rel = 'stylesheet';
+        document.head.appendChild(link);
+    }
+    if (link.href !== href) link.href = href;
+}
+
+export const decorators = [
+    (Story, context) => {
+        applyThemeLink(context.globals.theme === 'light' ? lightThemeUrl : darkThemeUrl);
+        return React.createElement(Story);
+    },
+];
 
 export const parameters = {
-  actions: { argTypesRegex: '^on[A-Z].*' },
-  controls: { expanded: true },
-  backgrounds: {
-    default: 'dark',
-    values: [
-      { name: 'dark', value: '#111827' },
-      { name: 'surface-card', value: '#1f2937' },
-    ],
-  },
+    actions: { argTypesRegex: '^on[A-Z].*' },
+    controls: { expanded: true },
+    backgrounds: {
+        default: 'dark',
+        values: [
+            { name: 'dark', value: '#111827' },
+            { name: 'surface-card', value: '#1f2937' },
+            { name: 'light', value: '#ffffff' },
+            { name: 'surface-light', value: '#f8f9fa' },
+        ],
+    },
 };
diff --git a/Source/CommandDialog/CommandStepper.tsx b/Source/CommandDialog/CommandStepper.tsx
index c65bee5..f246fb0 100644
--- a/Source/CommandDialog/CommandStepper.tsx
+++ b/Source/CommandDialog/CommandStepper.tsx
@@ -196,7 +196,7 @@ export const CommandStepperContent = ({
                     const existingStyle = existing.style as Record<string, unknown> | undefined;
                     return {
                         ...existing,
-                        style: { ...existingStyle, backgroundColor: bgColor, color: '#fff' }
+                        style: { ...existingStyle, backgroundColor: bgColor, color: 'var(--primary-color-text)' }
                     };
                 }
             }
diff --git a/Source/CommandDialog/StepperCommandDialog.tsx b/Source/CommandDialog/StepperCommandDialog.tsx
index 341376b..407e081 100644
--- a/Source/CommandDialog/StepperCommandDialog.tsx
+++ b/Source/CommandDialog/StepperCommandDialog.tsx
@@ -103,6 +103,9 @@ const StepperCommandDialogWrapper = <TCommand extends object, TResponse = object
     const [visitedSteps, setVisitedSteps] = useState<Set<number>>(new Set([0]));
     const [stepErrors, setStepErrors] = useState<boolean[]>([]);
 
+    // useDialogContext() is called unconditionally on every render — the try/catch only suppresses
+    // the exception when the dialog is used standalone (outside a provider). React's Rules of Hooks
+    // are not violated because the hook is always called; the try/catch never skips the call.
     let contextCloseDialog: ((result: DialogResult) => void) | undefined;
     try {
         const context = useDialogContext();
@@ -174,13 +177,13 @@ const StepperCommandDialogWrapper = <TCommand extends object, TResponse = object
     };
 
     const headerElement = (
-        <div className="inline-flex align-items-center justify-content-center gap-2">
-            <span className="font-bold white-space-nowrap">{title}</span>
+        <div className="inline-flex items-center justify-center gap-2">
+            <span className="font-bold whitespace-nowrap">{title}</span>
         </div>
     );
 
     const footer = (
-        <div className="flex align-items-center w-full gap-3">
+        <div className="flex items-center w-full gap-3">
             {!isFirstStep && (
                 <Button
                     label={previousLabel}
diff --git a/Source/Common/FormElement.tsx b/Source/Common/FormElement.tsx
index a54294b..e4c0b10 100644
--- a/Source/Common/FormElement.tsx
+++ b/Source/Common/FormElement.tsx
@@ -8,7 +8,7 @@ export interface FormElementProps {
 
 export const FormElement = (props: FormElementProps) => {
     return (
-        <div className="card flex flex-column md:flex-row gap-3">
+        <div className="flex flex-col md:flex-row gap-3">
             <div className="p-inputgroup flex-1">
                 <span className="p-inputgroup-addon">
                     {props.icon}
diff --git a/Source/DataPage/DataPage.tsx b/Source/DataPage/DataPage.tsx
index 999b5ce..8835fd9 100644
--- a/Source/DataPage/DataPage.tsx
+++ b/Source/DataPage/DataPage.tsx
@@ -33,7 +33,7 @@ export interface ColumnProps {
 }
 
 export const MenuItems = ({ children }: MenuItemsProps) => {
-    const context = React.useContext(DataPageContext);
+    const context = useDataPageContext();
 
     const isDisabled = useMemo(() => {
         return !context.selectedItem;
@@ -62,7 +62,7 @@ export const MenuItems = ({ children }: MenuItemsProps) => {
 
 export const Columns = ({ children }: ColumnProps) => {
 
-    const context = React.useContext(DataPageContext);
+    const context = useDataPageContext();
 
     if (context.query.prototype instanceof QueryFor) {
         return (
@@ -96,7 +96,15 @@ interface IDataPageContext extends DataPageProps<any, any, any> {
     onSelectionChanged: (e: DataTableSelectionSingleChangeEvent<any>) => void;
 }
 
-const DataPageContext = React.createContext<IDataPageContext>(null as any);
+const DataPageContext = React.createContext<IDataPageContext | null>(null);
+
+function useDataPageContext(): IDataPageContext {
+    const context = React.useContext(DataPageContext);
+    if (!context) {
+        throw new Error('useDataPageContext must be used within a DataPage component');
+    }
+    return context;
+}
 
 /**
  * Props for the DataPage component
diff --git a/Source/Dialogs/Dialog.tsx b/Source/Dialogs/Dialog.tsx
index 3e5abfb..b25627c 100644
--- a/Source/Dialogs/Dialog.tsx
+++ b/Source/Dialogs/Dialog.tsx
@@ -49,20 +49,21 @@ export const Dialog = ({
     yesLabel = 'Yes',
     noLabel = 'No'
 }: DialogProps) => {
-    // Try to get dialog context, but allow it to be undefined for standalone usage
+    // useDialogContext() is called unconditionally on every render — the try/catch only suppresses
+    // the exception when Dialog is used standalone (outside a provider). React's Rules of Hooks
+    // are not violated because the hook is always called; the try/catch never skips the call.
     let contextCloseDialog: ((result: DialogResult) => void) | undefined;
     try {
         const context = useDialogContext();
         contextCloseDialog = context?.closeDialog;
     } catch {
-        // No context available - dialog is being used standalone
         contextCloseDialog = undefined;
     }
     
     const isDialogValid = isValid !== false;
     const headerElement = (
-        <div className="inline-flex align-items-center justify-content-center gap-2">
-            <span className="font-bold white-space-nowrap">{title}</span>
+        <div className="inline-flex items-center justify-center gap-2">
+            <span className="font-bold whitespace-nowrap">{title}</span>
         </div>
     );
 
@@ -142,7 +143,7 @@ export const Dialog = ({
     };
 
     const footer = (
-        <div className="flex flex-wrap justify-content-start gap-3">
+        <div className="flex flex-wrap justify-start gap-3">
             {getFooterInterior()}
         </div>
     );
diff --git a/Source/ObjectContentEditor/ObjectContentEditor.tsx b/Source/ObjectContentEditor/ObjectContentEditor.tsx
index 901dd2d..a23955a 100644
--- a/Source/ObjectContentEditor/ObjectContentEditor.tsx
+++ b/Source/ObjectContentEditor/ObjectContentEditor.tsx
@@ -144,12 +144,12 @@ export const ObjectContentEditor = ({ object, timestamp, schema, editMode = fals
     };
 
     const rowStyle: React.CSSProperties = {
-        borderBottom: '1px solid rgba(255,255,255,0.1)',
+        borderBottom: '1px solid var(--surface-border)',
     };
 
     const labelStyle: React.CSSProperties = {
         padding: '8px 12px',
-        color: 'rgba(255,255,255,0.6)',
+        color: 'var(--text-color-secondary)',
         textAlign: 'left',
         fontWeight: 500,
         width: '140px',
@@ -158,7 +158,7 @@ export const ObjectContentEditor = ({ object, timestamp, schema, editMode = fals
 
     const valueStyle: React.CSSProperties = {
         padding: '8px 12px',
-        color: '#fff',
+        color: 'var(--text-color)',
         textAlign: 'left',
     };
 
@@ -258,7 +258,7 @@ export const ObjectContentEditor = ({ object, timestamp, schema, editMode = fals
 
         if (property.type === 'array') {
             return (
-                <div className="flex align-items-center gap-2" style={{ color: 'rgba(255,255,255,0.6)', fontStyle: 'italic' }}>
+                <div className="flex items-center gap-2" style={{ color: 'var(--text-color-secondary)', fontStyle: 'italic' }}>
                     <span>Array editing not yet supported</span>
                 </div>
             );
@@ -266,7 +266,7 @@ export const ObjectContentEditor = ({ object, timestamp, schema, editMode = fals
 
         if (property.type === 'object') {
             return (
-                <div className="flex align-items-center gap-2" style={{ color: 'rgba(255,255,255,0.6)', fontStyle: 'italic' }}>
+                <div className="flex items-center gap-2" style={{ color: 'var(--text-color-secondary)', fontStyle: 'italic' }}>
                     <span>Object editing not yet supported</span>
                 </div>
             );
@@ -306,7 +306,7 @@ export const ObjectContentEditor = ({ object, timestamp, schema, editMode = fals
         if (Array.isArray(value)) {
             return (
                 <div
-                    className="flex align-items-center gap-2 cursor-pointer"
+                    className="flex items-center gap-2 cursor-pointer"
                     onClick={() => navigateToProperty(propertyName)}
                     style={{ color: 'var(--primary-color)', display: 'flex', alignItems: 'center' }}
                 >
@@ -319,7 +319,7 @@ export const ObjectContentEditor = ({ object, timestamp, schema, editMode = fals
         if (typeof value === 'object') {
             return (
                 <div
-                    className="flex align-items-center gap-2 cursor-pointer"
+                    className="flex items-center gap-2 cursor-pointer"
                     onClick={() => navigateToProperty(propertyName)}
                     style={{ color: 'var(--primary-color)', display: 'flex', alignItems: 'center' }}
                 >
@@ -334,7 +334,7 @@ export const ObjectContentEditor = ({ object, timestamp, schema, editMode = fals
 
     const renderTable = () => {
         if (Array.isArray(currentData)) {
-            if (currentData.length === 0) return <div style={{ padding: '12px', color: 'rgba(255,255,255,0.6)' }}>Empty array</div>;
+            if (currentData.length === 0) return <div style={{ padding: '12px', color: 'var(--text-color-secondary)' }}>Empty array</div>;
 
             const firstItem = currentData[0];
             if (typeof firstItem === 'object' && firstItem !== null && !Array.isArray(firstItem)) {
@@ -346,7 +346,7 @@ export const ObjectContentEditor = ({ object, timestamp, schema, editMode = fals
                             {currentData.map((item, index) => (
                                 <React.Fragment key={index}>
                                     {index > 0 && (
-                                        <tr style={{ height: '8px', background: 'rgba(255,255,255,0.05)' }}>
+                                        <tr style={{ height: '8px', background: 'var(--surface-hover)' }}>
                                             <td colSpan={2}></td>
                                         </tr>
                                     )}
@@ -433,10 +433,10 @@ export const ObjectContentEditor = ({ object, timestamp, schema, editMode = fals
                 <div style={{
                     marginTop: '20px',
                     padding: '12px',
-                    background: 'rgba(100, 150, 255, 0.1)',
+                    background: 'var(--highlight-bg)',
                     borderRadius: '8px',
                     fontSize: '12px',
-                    color: 'rgba(255,255,255,0.6)'
+                    color: 'var(--text-color-secondary)'
                 }}>
                     Snapshot captured: {timestamp.toLocaleString()}
                 </div>
diff --git a/Source/PivotViewer/PivotViewer.css b/Source/PivotViewer/PivotViewer.css
index e74e78a..762d50d 100644
--- a/Source/PivotViewer/PivotViewer.css
+++ b/Source/PivotViewer/PivotViewer.css
@@ -1,8 +1,5 @@
-:root {
-  color-scheme: dark;
-}
-
 .pivot-viewer {
+  color-scheme: dark;
   position: relative;
   /* CRITICAL: Don't set explicit height - let parent control it via container constraints */
   display: flex;
diff --git a/Source/SchemaEditor/TypeCell.tsx b/Source/SchemaEditor/TypeCell.tsx
index 71309ab..652c961 100644
--- a/Source/SchemaEditor/TypeCell.tsx
+++ b/Source/SchemaEditor/TypeCell.tsx
@@ -94,7 +94,7 @@ export const TypeCell = ({
             const isNavigable = itemType === 'object';
             return (
                 <div
-                    className="flex align-items-center gap-2 w-full"
+                    className="flex items-center gap-2 w-full"
                     style={{ height: '100%' }}
                     data-pr-tooltip={isNavigable ? 'Click to navigate to item definition' : undefined}
                     data-pr-position="top"
@@ -113,7 +113,7 @@ export const TypeCell = ({
         } else if (rowData.type === 'object') {
             return (
                 <div
-                    className="flex align-items-center gap-2 w-full"
+                    className="flex items-center gap-2 w-full"
                     style={{ height: '100%' }}
                     data-pr-tooltip="Click to navigate to object properties"
                     data-pr-position="top"
@@ -130,7 +130,7 @@ export const TypeCell = ({
     }
 
     return (
-        <div className="flex align-items-center gap-2 w-full" style={{ minHeight: '2.5rem' }}>
+        <div className="flex items-center gap-2 w-full" style={{ minHeight: '2.5rem' }}>
             <Dropdown
                 value={currentValue}
                 options={allTypeOptions}
diff --git a/Source/TimeMachine/EventsView.css b/Source/TimeMachine/EventsView.css
index f92f253..67afa4d 100644
--- a/Source/TimeMachine/EventsView.css
+++ b/Source/TimeMachine/EventsView.css
@@ -26,9 +26,9 @@
     width: 44px;
     height: 44px;
     border-radius: 50%;
-    border: 1px solid rgba(255, 255, 255, 0.15);
-    background: rgba(15, 23, 42, 0.75);
-    color: #fff;
+    border: 1px solid var(--tm-border-subtle);
+    background: var(--tm-dark-surface);
+    color: var(--tm-text);
     display: flex;
     align-items: center;
     justify-content: center;
@@ -77,8 +77,8 @@
 
 /* Event Card */
 .events-view-event-card {
-    background: rgba(255, 255, 255, 0.05);
-    border: 1px solid rgba(255, 255, 255, 0.1);
+    background: var(--tm-surface);
+    border: 1px solid var(--tm-border);
     border-radius: 12px;
     padding: 1.5rem;
     backdrop-filter: blur(10px);
@@ -87,8 +87,8 @@
 }
 
 .events-view-event-card:hover {
-    background: rgba(255, 255, 255, 0.08);
-    border-color: rgba(100, 150, 255, 0.3);
+    background: var(--tm-surface-hover);
+    border-color: var(--tm-accent-border);
     transform: translateY(-2px);
     box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
 }
@@ -97,20 +97,20 @@
 .events-view-event-header {
     margin-bottom: 1rem;
     padding-bottom: 1rem;
-    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+    border-bottom: 1px solid var(--tm-border);
 }
 
 .events-view-event-name {
     font-size: 1.25rem;
     font-weight: 600;
-    color: #fff;
+    color: var(--tm-text);
     margin: 0 0 0.5rem 0;
     font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, sans-serif;
 }
 
 .events-view-event-timestamp {
     font-size: 0.875rem;
-    color: rgba(255, 255, 255, 0.6);
+    color: var(--tm-text-muted);
     font-family: -apple-system, BlinkMacSystemFont, 'SF Mono', monospace;
 }
 
@@ -135,8 +135,8 @@
     justify-content: center;
     width: 2.5rem;
     height: 2.5rem;
-    background: linear-gradient(135deg, rgba(100, 150, 255, 0.2), rgba(100, 150, 255, 0.1));
-    border: 2px solid rgba(100, 150, 255, 0.5);
+    background: linear-gradient(135deg, var(--tm-accent-bg), rgba(100, 150, 255, 0.1));
+    border: 2px solid var(--tm-accent-border);
     border-radius: 50%;
     position: relative;
     backdrop-filter: blur(5px);
@@ -144,22 +144,22 @@
 }
 
 .events-view-marker:hover {
-    background: linear-gradient(135deg, rgba(100, 150, 255, 0.4), rgba(100, 150, 255, 0.2));
-    border-color: rgba(100, 150, 255, 0.8);
+    background: linear-gradient(135deg, var(--tm-accent-bg-hover), var(--tm-accent-bg));
+    border-color: var(--tm-accent-border-hover);
     transform: scale(1.1);
 }
 
 .events-view-marker-dot {
     width: 0.75rem;
     height: 0.75rem;
-    background: rgba(100, 150, 255, 0.9);
+    background: var(--tm-accent);
     border-radius: 50%;
-    box-shadow: 0 0 10px rgba(100, 150, 255, 0.5);
+    box-shadow: 0 0 10px var(--tm-accent-glow);
 }
 
 /* PrimeReact Timeline connector styling */
 .events-view-timeline .p-timeline-event-connector {
-    background: linear-gradient(to bottom, rgba(100, 150, 255, 0.6), rgba(100, 150, 255, 0.4));
+    background: linear-gradient(to bottom, var(--tm-accent-border), var(--tm-accent-bg));
 }
 
 .events-view-timeline .p-timeline-event:last-child .p-timeline-event-connector {
diff --git a/Source/TimeMachine/Properties.css b/Source/TimeMachine/Properties.css
new file mode 100644
index 0000000..6ef815e
--- /dev/null
+++ b/Source/TimeMachine/Properties.css
@@ -0,0 +1,57 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+.tm-properties-table {
+    width: 100%;
+    border-collapse: collapse;
+    font-family: -apple-system, BlinkMacSystemFont, 'SF Mono', monospace;
+    font-size: 13px;
+}
+
+.tm-properties-row {
+    border-bottom: 1px solid var(--tm-border, rgba(255, 255, 255, 0.1));
+}
+
+.tm-properties-label {
+    padding: 8px 12px;
+    color: var(--tm-text-muted, rgba(255, 255, 255, 0.6));
+    font-weight: 500;
+    width: 40%;
+}
+
+.tm-properties-label--right {
+    text-align: right;
+}
+
+.tm-properties-value {
+    padding: 8px 12px;
+    color: var(--tm-text, rgba(255, 255, 255, 0.9));
+}
+
+.tm-properties-value--right {
+    text-align: right;
+}
+
+.tm-properties-null {
+    color: var(--tm-text-faint, rgba(255, 255, 255, 0.4));
+}
+
+.tm-properties-boolean-true {
+    color: #4ade80;
+}
+
+.tm-properties-boolean-false {
+    color: #f87171;
+}
+
+.tm-properties-number {
+    color: #fbbf24;
+}
+
+.tm-properties-date {
+    color: #60a5fa;
+}
+
+.tm-properties-complex {
+    color: var(--tm-text-dim, rgba(255, 255, 255, 0.7));
+}
diff --git a/Source/TimeMachine/Properties.tsx b/Source/TimeMachine/Properties.tsx
index e2b94e6..7729bd6 100644
--- a/Source/TimeMachine/Properties.tsx
+++ b/Source/TimeMachine/Properties.tsx
@@ -3,6 +3,7 @@
 
 import React from 'react';
 import { formatPropertyName } from './propertiesHelpers';
+import './Properties.css';
 
 interface PropertiesProps {
     data: Record<string, unknown>;
@@ -13,51 +14,28 @@ interface PropertiesProps {
 }
 
 export const Properties: React.FC<PropertiesProps> = ({ data, className, align = 'left' }) => {
-    const tableStyle: React.CSSProperties = {
-        width: '100%',
-        borderCollapse: 'collapse',
-        fontFamily: '-apple-system, BlinkMacSystemFont, "SF Mono", monospace',
-        fontSize: '13px',
-    };
-
-    const rowStyle: React.CSSProperties = {
-        borderBottom: '1px solid rgba(255,255,255,0.1)',
-    };
-
-    const labelStyle: React.CSSProperties = {
-        padding: '8px 12px',
-        color: 'rgba(255,255,255,0.6)',
-        textAlign: align,
-        fontWeight: 500,
-        width: '40%',
-    };
-
-    const valueStyle: React.CSSProperties = {
-        padding: '8px 12px',
-        color: '#fff',
-        textAlign: align,
-    };
+    const isRight = align === 'right';
 
     const renderValue = (value: unknown): React.ReactNode => {
         if (value === null || value === undefined) {
-            return <span style={{ color: 'rgba(255,255,255,0.4)' }}>null</span>;
+            return <span className="tm-properties-null">null</span>;
         }
 
         if (typeof value === 'boolean') {
-            return <span style={{ color: value ? '#4ade80' : '#f87171' }}>{value.toString()}</span>;
+            return <span className={value ? 'tm-properties-boolean-true' : 'tm-properties-boolean-false'}>{value.toString()}</span>;
         }
 
         if (typeof value === 'number') {
-            return <span style={{ color: '#fbbf24' }}>{value}</span>;
+            return <span className="tm-properties-number">{value}</span>;
         }
 
         if (value instanceof Date) {
-            return <span style={{ color: '#60a5fa' }}>{value.toLocaleString()}</span>;
+            return <span className="tm-properties-date">{value.toLocaleString()}</span>;
         }
 
         if (Array.isArray(value)) {
             return (
-                <span style={{ color: 'rgba(255,255,255,0.7)' }}>
+                <span className="tm-properties-complex">
                     Array[{value.length}]
                 </span>
             );
@@ -65,7 +43,7 @@ export const Properties: React.FC<PropertiesProps> = ({ data, className, align =
 
         if (typeof value === 'object') {
             return (
-                <span style={{ color: 'rgba(255,255,255,0.7)' }}>
+                <span className="tm-properties-complex">
                     {'{'}...{'}'}
                 </span>
             );
@@ -76,12 +54,12 @@ export const Properties: React.FC<PropertiesProps> = ({ data, className, align =
 
     return (
         <div className={className}>
-            <table style={tableStyle}>
+            <table className="tm-properties-table">
                 <tbody>
                     {data && Object.entries(data).map(([key, value], index) => (
-                        <tr key={`${key}-${index}`} style={rowStyle}>
-                            <td style={labelStyle}>{formatPropertyName(key)}</td>
-                            <td style={valueStyle}>{renderValue(value)}</td>
+                        <tr key={`${key}-${index}`} className="tm-properties-row">
+                            <td className={`tm-properties-label${isRight ? ' tm-properties-label--right' : ''}`}>{formatPropertyName(key)}</td>
+                            <td className={`tm-properties-value${isRight ? ' tm-properties-value--right' : ''}`}>{renderValue(value)}</td>
                         </tr>
                     ))}
                 </tbody>
@@ -89,3 +67,4 @@ export const Properties: React.FC<PropertiesProps> = ({ data, className, align =
         </div>
     );
 };
+
diff --git a/Source/TimeMachine/TimeMachine.css b/Source/TimeMachine/TimeMachine.css
index 78b1629..5086e42 100644
--- a/Source/TimeMachine/TimeMachine.css
+++ b/Source/TimeMachine/TimeMachine.css
@@ -1,10 +1,30 @@
 /* Time Machine Container */
 .time-machine {
+  /* Color tokens — intentional dark space theme. Override to customize. */
+  --tm-bg-deep: #0a0a1a;
+  --tm-bg-deepest: #000005;
+  --tm-text: rgba(255, 255, 255, 0.9);
+  --tm-text-muted: rgba(255, 255, 255, 0.6);
+  --tm-text-dim: rgba(255, 255, 255, 0.7);
+  --tm-text-faint: rgba(255, 255, 255, 0.4);
+  --tm-surface: rgba(255, 255, 255, 0.05);
+  --tm-surface-hover: rgba(255, 255, 255, 0.08);
+  --tm-surface-active: rgba(255, 255, 255, 0.1);
+  --tm-border: rgba(255, 255, 255, 0.1);
+  --tm-border-subtle: rgba(255, 255, 255, 0.15);
+  --tm-accent: rgba(100, 150, 255, 1);
+  --tm-accent-bg: rgba(100, 150, 255, 0.2);
+  --tm-accent-bg-hover: rgba(100, 150, 255, 0.4);
+  --tm-accent-border: rgba(100, 150, 255, 0.3);
+  --tm-accent-border-hover: rgba(100, 150, 255, 0.8);
+  --tm-accent-glow: rgba(100, 150, 255, 0.3);
+  --tm-dark-surface: rgba(15, 23, 42, 0.75);
+
   position: relative;
   width: 100%;
   height: 100vh;
   overflow: hidden;
-  background: radial-gradient(ellipse at center, #0a0a1a 0%, #000005 100%);
+  background: radial-gradient(ellipse at center, var(--tm-bg-deep) 0%, var(--tm-bg-deepest) 100%);
   font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, sans-serif;
 }
 
@@ -16,11 +36,11 @@
   transform: translateX(-50%);
   display: flex;
   gap: 8px;
-  background: rgba(255, 255, 255, 0.05);
+  background: var(--tm-surface);
   padding: 6px;
   border-radius: 12px;
   backdrop-filter: blur(10px);
-  border: 1px solid rgba(255, 255, 255, 0.1);
+  border: 1px solid var(--tm-border);
   z-index: 100;
 }
 
@@ -30,7 +50,7 @@
   border: none;
   border-radius: 8px;
   background: transparent;
-  color: rgba(255, 255, 255, 0.6);
+  color: var(--tm-text-muted);
   font-size: 20px;
   cursor: pointer;
   display: flex;
@@ -40,14 +60,14 @@
 }
 
 .view-button:hover {
-  background: rgba(255, 255, 255, 0.1);
-  color: rgba(255, 255, 255, 0.9);
+  background: var(--tm-surface-active);
+  color: var(--tm-text);
 }
 
 .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);
+  background: var(--tm-accent-bg);
+  color: var(--tm-accent);
+  box-shadow: 0 0 15px var(--tm-accent-glow);
 }
 
 .view-button i {
@@ -323,9 +343,9 @@
   width: 28px;
   height: 28px;
   border-radius: 6px;
-  border: 1px solid rgba(255, 255, 255, 0.15);
+  border: 1px solid var(--tm-border-subtle);
   background: linear-gradient(180deg, rgba(120, 130, 220, 0.25) 0%, rgba(60, 70, 140, 0.25) 100%);
-  color: #fff;
+  color: var(--tm-text);
   cursor: pointer;
   transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
 }
@@ -375,8 +395,8 @@
 }
 
 .snapshot-event {
-  background: rgba(255, 255, 255, 0.05);
-  border: 1px solid rgba(255, 255, 255, 0.1);
+  background: var(--tm-surface);
+  border: 1px solid var(--tm-border);
   border-radius: 10px;
   padding: 1rem 1.25rem;
   box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
@@ -398,7 +418,7 @@
 
 .snapshot-event-timestamp {
   font-size: 0.75rem;
-  color: rgba(255, 255, 255, 0.65);
+  color: var(--tm-text-muted);
   font-family: -apple-system, BlinkMacSystemFont, 'SF Mono', monospace;
 }
 
@@ -441,7 +461,7 @@
 .timeline-tick {
   width: calc(20px * var(--magnification, 1));
   height: calc(2px * var(--magnification, 1));
-  background: rgba(255, 255, 255, 0.4);
+  background: var(--tm-text-faint);
   border-radius: 1px;
   transition:
     width 0.15s ease,
@@ -455,8 +475,8 @@
 }
 
 .timeline-entry.hovered .timeline-tick {
-  background: rgba(255, 255, 255, 0.9);
-  box-shadow: 0 0 6px rgba(255, 255, 255, 0.4);
+  background: var(--tm-text);
+  box-shadow: 0 0 6px var(--tm-surface-active);
 }
 
 .timeline-label {
@@ -487,7 +507,7 @@
 
 .timeline-time {
   font-size: 10px;
-  color: rgba(255, 255, 255, 0.7);
+  color: var(--tm-text-dim);
   text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
 }
 
diff --git a/Source/package.json b/Source/package.json
index 5a1b0db..a1adc46 100644
--- a/Source/package.json
+++ b/Source/package.json
@@ -69,11 +69,6 @@
             "require": "./dist/cjs/Dropdown/index.js",
             "import": "./dist/esm/Dropdown/index.js"
         },
-        "./EventModeling": {
-            "types": "./dist/esm/EventModeling/index.d.ts",
-            "require": "./dist/cjs/EventModeling/index.js",
-            "import": "./dist/esm/EventModeling/index.js"
-        },
         "./PivotViewer": {
             "types": "./dist/esm/PivotViewer/index.d.ts",
             "require": "./dist/cjs/PivotViewer/index.js",
@@ -116,9 +111,7 @@
         "pixi.js": "^8.17.1",
         "primeicons": "7.0.0",
         "primereact": "10.9.8",
-        "quill": "^2.0.3",
         "react-icons": "5.6.0",
-        "react-leaflet": "^5.0.0",
         "react-router-dom": "7.15.1",
         "ts-deepmerge": "7.0.3",
         "usehooks-ts": "3.1.1"