@cratis/components 1.10.0 → 1.10.2

package/dist/esm/SchemaEditor/TypeCell.js

@@ -67,14 +67,14 @@ const TypeCell = ({ rowData, isEditMode, typeFormats, onUpdateProperty, onUpdate
         if (rowData.type === 'array') {
             const itemType = rowData.items?.type || 'string';
             const isNavigable = itemType === 'object';
-            return (jsxs("div", { className: "flex align-items-center gap-2 w-full", style: { height: '100%' }, "data-pr-tooltip": isNavigable ? 'Click to navigate to item definition' : undefined, "data-pr-position": "top", children: [jsxs("span", { children: ["Array of ", itemType] }), isNavigable && (jsxs(Fragment, { children: [jsx("div", { style: { flex: 1 } }), jsx("span", { style: { display: 'flex', alignItems: 'center' }, children: jsx(faIcons.FaArrowRight, { style: { fontSize: '1rem', color: 'var(--primary-color)' } }) })] }))] }));
+            return (jsxs("div", { 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", children: [jsxs("span", { children: ["Array of ", itemType] }), isNavigable && (jsxs(Fragment, { children: [jsx("div", { style: { flex: 1 } }), jsx("span", { style: { display: 'flex', alignItems: 'center' }, children: jsx(faIcons.FaArrowRight, { style: { fontSize: '1rem', color: 'var(--primary-color)' } }) })] }))] }));
         }
         else if (rowData.type === 'object') {
-            return (jsxs("div", { className: "flex align-items-center gap-2 w-full", style: { height: '100%' }, "data-pr-tooltip": "Click to navigate to object properties", "data-pr-position": "top", children: [jsx("span", { children: "Object" }), jsx("div", { style: { flex: 1 } }), jsx("span", { style: { display: 'flex', alignItems: 'center' }, children: jsx(faIcons.FaArrowRight, { style: { fontSize: '1rem', color: 'var(--primary-color)' } }) })] }));
+            return (jsxs("div", { className: "flex items-center gap-2 w-full", style: { height: '100%' }, "data-pr-tooltip": "Click to navigate to object properties", "data-pr-position": "top", children: [jsx("span", { children: "Object" }), jsx("div", { style: { flex: 1 } }), jsx("span", { style: { display: 'flex', alignItems: 'center' }, children: jsx(faIcons.FaArrowRight, { style: { fontSize: '1rem', color: 'var(--primary-color)' } }) })] }));
         }
         return displayValue;
     }
-    return (jsxs("div", { className: "flex align-items-center gap-2 w-full", style: { minHeight: '2.5rem' }, children: [jsx(Dropdown, { value: currentValue, options: allTypeOptions, onChange: (e) => handleTypeChange(e.value, rowData.name || ''), className: "flex-1" }), rowData.type === 'array' && rowData.items && (jsxs(Fragment, { children: [jsx("span", { style: { whiteSpace: 'nowrap', display: 'flex', alignItems: 'center' }, children: "of" }), jsx(Dropdown, { value: rowData.items.type || 'string', options: allTypeOptions, onChange: (e) => handleTypeChange(e.value, rowData.name || '', true), className: "flex-1" })] })), jsxs("div", { style: { marginLeft: 'auto', display: 'flex', alignItems: 'center', gap: '0.5rem' }, children: [rowData.type === 'array' && rowData.items?.type === 'object' && rowData.name && (jsx(Button, { icon: jsx(faIcons.FaArrowRight, {}), className: "p-button-text p-button-sm", onClick: () => onNavigateToArrayItems(rowData.name), tooltip: "Navigate to item definition", tooltipOptions: { position: 'top' } })), rowData.type === 'object' && rowData.name && (jsx(Button, { icon: jsx(faIcons.FaArrowRight, {}), className: "p-button-text p-button-sm", onClick: () => onNavigateToProperty(rowData.name), tooltip: "Navigate to object properties", tooltipOptions: { position: 'top' } })), rowData.name && (jsx(Button, { icon: jsx(faIcons.FaTrash, {}), className: "p-button-text p-button-danger p-button-sm", onClick: () => onRemoveProperty(rowData.name), tooltip: "Delete property", tooltipOptions: { position: 'top' } }))] })] }));
+    return (jsxs("div", { className: "flex items-center gap-2 w-full", style: { minHeight: '2.5rem' }, children: [jsx(Dropdown, { value: currentValue, options: allTypeOptions, onChange: (e) => handleTypeChange(e.value, rowData.name || ''), className: "flex-1" }), rowData.type === 'array' && rowData.items && (jsxs(Fragment, { children: [jsx("span", { style: { whiteSpace: 'nowrap', display: 'flex', alignItems: 'center' }, children: "of" }), jsx(Dropdown, { value: rowData.items.type || 'string', options: allTypeOptions, onChange: (e) => handleTypeChange(e.value, rowData.name || '', true), className: "flex-1" })] })), jsxs("div", { style: { marginLeft: 'auto', display: 'flex', alignItems: 'center', gap: '0.5rem' }, children: [rowData.type === 'array' && rowData.items?.type === 'object' && rowData.name && (jsx(Button, { icon: jsx(faIcons.FaArrowRight, {}), className: "p-button-text p-button-sm", onClick: () => onNavigateToArrayItems(rowData.name), tooltip: "Navigate to item definition", tooltipOptions: { position: 'top' } })), rowData.type === 'object' && rowData.name && (jsx(Button, { icon: jsx(faIcons.FaArrowRight, {}), className: "p-button-text p-button-sm", onClick: () => onNavigateToProperty(rowData.name), tooltip: "Navigate to object properties", tooltipOptions: { position: 'top' } })), rowData.name && (jsx(Button, { icon: jsx(faIcons.FaTrash, {}), className: "p-button-text p-button-danger p-button-sm", onClick: () => onRemoveProperty(rowData.name), tooltip: "Delete property", tooltipOptions: { position: 'top' } }))] })] }));
 };
 
 export { TypeCell };

package/dist/esm/SchemaEditor/TypeCell.js.map

@@ -1 +1 @@
-{"version":3,"file":"TypeCell.js","sources":["../../../SchemaEditor/TypeCell.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx","_Fragment"],"mappings":"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"}
+{"version":3,"file":"TypeCell.js","sources":["../../../SchemaEditor/TypeCell.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx","_Fragment"],"mappings":"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"}

package/dist/esm/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 {

package/dist/esm/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));
+}

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

@@ -1,4 +1,5 @@
 import React from 'react';
+import './Properties.css';
 interface PropertiesProps {
     data: Record<string, unknown>;
     className?: string;

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

@@ -1 +1 @@
-{"version":3,"file":"Properties.d.ts","sourceRoot":"","sources":["../../../TimeMachine/Properties.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,UAAU,eAAe;IACrB,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAE9B,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;CAC5B;AAED,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CA4EhD,CAAC"}
+{"version":3,"file":"Properties.d.ts","sourceRoot":"","sources":["../../../TimeMachine/Properties.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,kBAAkB,CAAC;AAE1B,UAAU,eAAe;IACrB,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAE9B,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;CAC5B;AAED,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAqDhD,CAAC"}

package/dist/esm/TimeMachine/Properties.js

@@ -1,50 +1,31 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { formatPropertyName } from './propertiesHelpers.js';
+import './Properties.css';
 
 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 isRight = align === 'right';
     const renderValue = (value) => {
         if (value === null || value === undefined) {
-            return jsx("span", { style: { color: 'rgba(255,255,255,0.4)' }, children: "null" });
+            return jsx("span", { className: "tm-properties-null", children: "null" });
         }
         if (typeof value === 'boolean') {
-            return jsx("span", { style: { color: value ? '#4ade80' : '#f87171' }, children: value.toString() });
+            return jsx("span", { className: value ? 'tm-properties-boolean-true' : 'tm-properties-boolean-false', children: value.toString() });
         }
         if (typeof value === 'number') {
-            return jsx("span", { style: { color: '#fbbf24' }, children: value });
+            return jsx("span", { className: "tm-properties-number", children: value });
         }
         if (value instanceof Date) {
-            return jsx("span", { style: { color: '#60a5fa' }, children: value.toLocaleString() });
+            return jsx("span", { className: "tm-properties-date", children: value.toLocaleString() });
         }
         if (Array.isArray(value)) {
-            return (jsxs("span", { style: { color: 'rgba(255,255,255,0.7)' }, children: ["Array[", value.length, "]"] }));
+            return (jsxs("span", { className: "tm-properties-complex", children: ["Array[", value.length, "]"] }));
         }
         if (typeof value === 'object') {
-            return (jsxs("span", { style: { color: 'rgba(255,255,255,0.7)' }, children: ['{', "...", '}'] }));
+            return (jsxs("span", { className: "tm-properties-complex", children: ['{', "...", '}'] }));
         }
         return jsx("span", { children: String(value) });
     };
-    return (jsx("div", { className: className, children: jsx("table", { style: tableStyle, children: jsx("tbody", { children: data && Object.entries(data).map(([key, value], index) => (jsxs("tr", { style: rowStyle, children: [jsx("td", { style: labelStyle, children: formatPropertyName(key) }), jsx("td", { style: valueStyle, children: renderValue(value) })] }, `${key}-${index}`))) }) }) }));
+    return (jsx("div", { className: className, children: jsx("table", { className: "tm-properties-table", children: jsx("tbody", { children: data && Object.entries(data).map(([key, value], index) => (jsxs("tr", { className: "tm-properties-row", children: [jsx("td", { className: `tm-properties-label${isRight ? ' tm-properties-label--right' : ''}`, children: formatPropertyName(key) }), jsx("td", { className: `tm-properties-value${isRight ? ' tm-properties-value--right' : ''}`, children: renderValue(value) })] }, `${key}-${index}`))) }) }) }));
 };
 
 export { Properties };

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

@@ -1 +1 @@
-{"version":3,"file":"Properties.js","sources":["../../../TimeMachine/Properties.tsx"],"sourcesContent":[null],"names":["_jsx","_jsxs"],"mappings":"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"}
+{"version":3,"file":"Properties.js","sources":["../../../TimeMachine/Properties.tsx"],"sourcesContent":[null],"names":["_jsx","_jsxs"],"mappings":";;;;AAeO,MAAM,UAAU,GAA8B,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,KAAK,GAAG,MAAM,EAAE,KAAI;AACzF,IAAA,MAAM,OAAO,GAAG,KAAK,KAAK,OAAO;AAEjC,IAAA,MAAM,WAAW,GAAG,CAAC,KAAc,KAAqB;QACpD,IAAI,KAAK,KAAK,IAAI,IAAI,KAAK,KAAK,SAAS,EAAE;AACvC,YAAA,OAAOA,GAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAC,oBAAoB,qBAAY;QAC3D;AAEA,QAAA,IAAI,OAAO,KAAK,KAAK,SAAS,EAAE;AAC5B,YAAA,OAAOA,cAAM,SAAS,EAAE,KAAK,GAAG,4BAA4B,GAAG,6BAA6B,EAAA,QAAA,EAAG,KAAK,CAAC,QAAQ,EAAE,GAAQ;QAC3H;AAEA,QAAA,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE;AAC3B,YAAA,OAAOA,cAAM,SAAS,EAAC,sBAAsB,EAAA,QAAA,EAAE,KAAK,GAAQ;QAChE;AAEA,QAAA,IAAI,KAAK,YAAY,IAAI,EAAE;YACvB,OAAOA,GAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAC,oBAAoB,EAAA,QAAA,EAAE,KAAK,CAAC,cAAc,EAAE,EAAA,CAAQ;QAC/E;AAEA,QAAA,IAAI,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE;YACtB,QACIC,IAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAC,uBAAuB,EAAA,QAAA,EAAA,CAAA,QAAA,EAC5B,KAAK,CAAC,MAAM,EAAA,GAAA,CAAA,EAAA,CAChB;QAEf;AAEA,QAAA,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE;YAC3B,QACIA,IAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAC,uBAAuB,EAAA,QAAA,EAAA,CAClC,GAAG,EAAA,KAAA,EAAK,GAAG,CAAA,EAAA,CACT;QAEf;AAEA,QAAA,OAAOD,wBAAO,MAAM,CAAC,KAAK,CAAC,GAAQ;AACvC,IAAA,CAAC;IAED,QACIA,aAAK,SAAS,EAAE,SAAS,EAAA,QAAA,EACrBA,GAAA,CAAA,OAAA,EAAA,EAAO,SAAS,EAAC,qBAAqB,YAClCA,GAAA,CAAA,OAAA,EAAA,EAAA,QAAA,EACK,IAAI,IAAI,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,EAAE,KAAK,CAAC,EAAE,KAAK,MAClDC,IAAA,CAAA,IAAA,EAAA,EAA4B,SAAS,EAAC,mBAAmB,EAAA,QAAA,EAAA,CACrDD,YAAI,SAAS,EAAE,CAAA,mBAAA,EAAsB,OAAO,GAAG,6BAA6B,GAAG,EAAE,EAAE,EAAA,QAAA,EAAG,kBAAkB,CAAC,GAAG,CAAC,GAAM,EACnHA,GAAA,CAAA,IAAA,EAAA,EAAI,SAAS,EAAE,CAAA,mBAAA,EAAsB,OAAO,GAAG,6BAA6B,GAAG,EAAE,EAAE,EAAA,QAAA,EAAG,WAAW,CAAC,KAAK,CAAC,GAAM,CAAA,EAAA,EAFzG,CAAA,EAAG,GAAG,CAAA,CAAA,EAAI,KAAK,EAAE,CAGrB,CACR,CAAC,EAAA,CACE,EAAA,CACJ,EAAA,CACN;AAEd;;;;"}

package/dist/esm/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);
 }
 

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

@@ -20,8 +20,7 @@ export declare const FolderGridVsList: Story;
 export declare const WithSlotInGroup: Story;
 export declare const WithSlotInContext: Story;
 export declare const WithMultipleSlotContributors: Story;
-export declare const LayoutWithDefaultContent: Story;
-export declare const LayoutWithInjectedContent: Story;
-export declare const LayoutWithMultipleContributors: Story;
-export declare const LayoutWithContextSensitiveContent: Story;
+export declare const LayoutForEditorModules: Story;
+export declare const LayoutWithSmoothEditorTransitions: Story;
+export declare const LayoutWithGlobalAndEditorRegions: Story;
 //# sourceMappingURL=Toolbar.stories.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Toolbar.stories.d.ts","sourceRoot":"","sources":["../../../Toolbar/Toolbar.stories.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAEvD,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAWpC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,OAAO,CAM9B,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,OAAO,CAAC,CAAC;AAgCtC,eAAO,MAAM,kBAAkB,EAAE,KAyChC,CAAC;AAGF,eAAO,MAAM,OAAO,EAAE,KAUrB,CAAC;AAGF,eAAO,MAAM,gBAAgB,EAAE,KAqC9B,CAAC;AASF,eAAO,MAAM,YAAY,EAAE,KAoD1B,CAAC;AASF,eAAO,MAAM,cAAc,EAAE,KAW5B,CAAC;AAMF,eAAO,MAAM,OAAO,EAAE,KAwBrB,CAAC;AAQF,eAAO,MAAM,UAAU,EAAE,KA+CxB,CAAC;AAGF,eAAO,MAAM,mBAAmB,EAAE,KAUjC,CAAC;AAGF,eAAO,MAAM,qBAAqB,EAAE,KAYnC,CAAC;AAGF,eAAO,MAAM,uBAAuB,EAAE,KAYrC,CAAC;AAWF,eAAO,MAAM,WAAW,EAAE,KAgDzB,CAAC;AAWF,eAAO,MAAM,UAAU,EAAE,KAmBxB,CAAC;AAWF,eAAO,MAAM,kBAAkB,EAAE,KAahC,CAAC;AAKF,eAAO,MAAM,gBAAgB,EAAE,KA+B9B,CAAC;AAeF,eAAO,MAAM,eAAe,EAAE,KA+D7B,CAAC;AAUF,eAAO,MAAM,iBAAiB,EAAE,KA6E/B,CAAC;AAMF,eAAO,MAAM,4BAA4B,EAAE,KAsC1C,CAAC;AAUE,eAAO,MAAM,wBAAwB,EAAE,KAatC,CAAC;AAQF,eAAO,MAAM,yBAAyB,EAAE,KAkEvC,CAAC;AAQF,eAAO,MAAM,8BAA8B,EAAE,KAkF5C,CAAC;AAQF,eAAO,MAAM,iCAAiC,EAAE,KAyF/C,CAAC"}
+{"version":3,"file":"Toolbar.stories.d.ts","sourceRoot":"","sources":["../../../Toolbar/Toolbar.stories.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAEvD,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAWpC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,OAAO,CAM9B,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,OAAO,CAAC,CAAC;AAgCtC,eAAO,MAAM,kBAAkB,EAAE,KAyChC,CAAC;AAGF,eAAO,MAAM,OAAO,EAAE,KAUrB,CAAC;AAGF,eAAO,MAAM,gBAAgB,EAAE,KAqC9B,CAAC;AASF,eAAO,MAAM,YAAY,EAAE,KAoD1B,CAAC;AASF,eAAO,MAAM,cAAc,EAAE,KAW5B,CAAC;AAMF,eAAO,MAAM,OAAO,EAAE,KAwBrB,CAAC;AAQF,eAAO,MAAM,UAAU,EAAE,KA+CxB,CAAC;AAGF,eAAO,MAAM,mBAAmB,EAAE,KAUjC,CAAC;AAGF,eAAO,MAAM,qBAAqB,EAAE,KAYnC,CAAC;AAGF,eAAO,MAAM,uBAAuB,EAAE,KAYrC,CAAC;AAWF,eAAO,MAAM,WAAW,EAAE,KAgDzB,CAAC;AAWF,eAAO,MAAM,UAAU,EAAE,KAmBxB,CAAC;AAWF,eAAO,MAAM,kBAAkB,EAAE,KAahC,CAAC;AAKF,eAAO,MAAM,gBAAgB,EAAE,KA+B9B,CAAC;AAeF,eAAO,MAAM,eAAe,EAAE,KA+D7B,CAAC;AAUF,eAAO,MAAM,iBAAiB,EAAE,KA6E/B,CAAC;AAMF,eAAO,MAAM,4BAA4B,EAAE,KAsC1C,CAAC;AASF,eAAO,MAAM,sBAAsB,EAAE,KAmFpC,CAAC;AASF,eAAO,MAAM,iCAAiC,EAAE,KA8F/C,CAAC;AAMF,eAAO,MAAM,gCAAgC,EAAE,KAiF9C,CAAC"}

package/dist/esm/Toolbar/Toolbar.stories.js

@@ -185,51 +185,56 @@ export const WithMultipleSlotContributors = {
         return (_jsx(ToolbarSlotProvider, { children: _jsxs("div", { className: 'flex gap-6 items-start', children: [_jsx(Toolbar, { children: _jsx(ToolbarGroup, { slotName: 'shared', children: _jsx(ToolbarButton, { icon: 'pi pi-pencil', title: 'Draw (always first)' }) }) }), _jsxs("div", { className: 'flex flex-col gap-1 p-4 rounded-lg border text-sm', style: { borderColor: 'var(--surface-border)', background: 'var(--surface-ground)', color: 'var(--text-color-secondary)' }, children: [_jsx("strong", { style: { color: 'var(--text-color)' }, children: "Three independent contributors" }), _jsx("p", { children: "Rendered order: B (5) \u2192 A (10) \u2192 C (20)" }), _jsx(ButtonA, {}), _jsx(ButtonB, {}), _jsx(ButtonC, {})] })] }) }));
     },
 };
-export const LayoutWithDefaultContent = {
-    render: () => (_jsxs(Toolbar, { children: [_jsx(ToolbarButton, { icon: 'pi pi-arrow-up-left', title: 'Select' }), _jsx(ToolbarLayout, { name: 'feature-tools', children: _jsxs(ToolbarGroup, { children: [_jsx(ToolbarButton, { icon: 'pi pi-pencil', title: 'Draw (default)' }), _jsx(ToolbarButton, { icon: 'pi pi-stop', title: 'Rectangle (default)' })] }) }), _jsx(ToolbarButton, { icon: 'pi pi-undo', title: 'Undo' })] })),
-};
-export const LayoutWithInjectedContent = {
+export const LayoutForEditorModules = {
     render: () => {
-        const LayoutWithInjectedContentDemo = () => {
-            const [featureMounted, setFeatureMounted] = useState(true);
-            const featureContent = useMemo(() => (_jsxs(_Fragment, { children: [_jsxs(ToolbarGroup, { children: [_jsx(ToolbarButton, { icon: 'pi pi-star', title: 'Favorite' }), _jsx(ToolbarButton, { icon: 'pi pi-heart', title: 'Like' })] }), _jsx(ToolbarSeparator, {}), _jsx(ToolbarGroup, { children: _jsx(ToolbarButton, { icon: 'pi pi-bolt', title: 'Quick action' }) })] })), []);
-            return (_jsx(ToolbarSlotProvider, { children: _jsxs("div", { className: 'flex flex-col items-center gap-6', children: [_jsxs(Toolbar, { orientation: 'horizontal', children: [_jsx(ToolbarButton, { icon: 'pi pi-arrow-up-left', title: 'Select', tooltipPosition: 'bottom' }), _jsx(ToolbarSeparator, { orientation: 'horizontal' }), _jsx(ToolbarLayout, { name: 'feature-tools', orientation: 'horizontal', children: _jsxs(ToolbarGroup, { orientation: 'horizontal', children: [_jsx(ToolbarButton, { icon: 'pi pi-pencil', title: 'Draw (default)', tooltipPosition: 'bottom' }), _jsx(ToolbarButton, { icon: 'pi pi-stop', title: 'Rectangle (default)', tooltipPosition: 'bottom' })] }) }), _jsx(ToolbarSeparator, { orientation: 'horizontal' }), _jsx(ToolbarButton, { icon: 'pi pi-undo', title: 'Undo', tooltipPosition: 'bottom' })] }), featureMounted && (_jsx(ToolbarSlot, { slotName: 'feature-tools', order: 0, children: featureContent })), _jsxs("div", { className: 'flex flex-col items-center gap-2', children: [_jsx("span", { className: 'text-xs', style: { color: 'var(--text-color-secondary)' }, children: "Feature mounted" }), _jsx("button", { type: 'button', onClick: () => setFeatureMounted(m => !m), className: `px-3 py-1 rounded text-sm transition-colors ${featureMounted
-                                        ? 'bg-blue-600 text-white'
-                                        : 'bg-gray-600 text-gray-200 hover:bg-gray-500'}`, children: featureMounted ? 'Unmount feature' : 'Mount feature' })] })] }) }));
+        const LayoutForEditorModulesDemo = () => {
+            const [assetToolsEnabled, setAssetToolsEnabled] = useState(true);
+            const [reviewToolsEnabled, setReviewToolsEnabled] = useState(true);
+            const assetTools = useMemo(() => (_jsxs(ToolbarGroup, { children: [_jsx(ToolbarButton, { icon: 'pi pi-image', title: 'Asset Browser' }), _jsx(ToolbarButton, { icon: 'pi pi-upload', title: 'Upload Asset' })] })), []);
+            const reviewTools = useMemo(() => (_jsxs(_Fragment, { children: [_jsx(ToolbarSeparator, {}), _jsxs(ToolbarGroup, { children: [_jsx(ToolbarButton, { icon: 'pi pi-comment', title: 'Comments' }), _jsx(ToolbarButton, { icon: 'pi pi-check-square', title: 'Approval Checks' })] })] })), []);
+            return (_jsx(ToolbarSlotProvider, { children: _jsxs("div", { className: 'flex flex-col items-center gap-6', children: [_jsxs(Toolbar, { orientation: 'horizontal', children: [_jsx(ToolbarButton, { icon: 'pi pi-file-edit', title: 'Open Editor', tooltipPosition: 'bottom' }), _jsx(ToolbarSeparator, { orientation: 'horizontal' }), _jsx(ToolbarLayout, { name: 'editor-modules', orientation: 'horizontal', children: _jsxs(ToolbarGroup, { orientation: 'horizontal', children: [_jsx(ToolbarButton, { icon: 'pi pi-save', title: 'Save', tooltipPosition: 'bottom' }), _jsx(ToolbarButton, { icon: 'pi pi-refresh', title: 'Reload', tooltipPosition: 'bottom' })] }) }), _jsx(ToolbarSeparator, { orientation: 'horizontal' }), _jsx(ToolbarButton, { icon: 'pi pi-cog', title: 'Settings', tooltipPosition: 'bottom' })] }), assetToolsEnabled && (_jsx(ToolbarSlot, { slotName: 'editor-modules', order: 10, children: assetTools })), reviewToolsEnabled && (_jsx(ToolbarSlot, { slotName: 'editor-modules', order: 20, children: reviewTools })), _jsx("div", { className: 'flex gap-6', children: [
+                                { label: 'Asset tools', enabled: assetToolsEnabled, toggle: () => setAssetToolsEnabled(v => !v) },
+                                { label: 'Review tools', enabled: reviewToolsEnabled, toggle: () => setReviewToolsEnabled(v => !v) },
+                            ].map(({ label, enabled, toggle }) => (_jsxs("div", { className: 'flex flex-col items-center gap-2', children: [_jsx("span", { className: 'text-xs', style: { color: 'var(--text-color-secondary)' }, children: label }), _jsx("button", { type: 'button', onClick: toggle, className: `px-3 py-1 rounded text-sm transition-colors ${enabled ? 'bg-blue-600 text-white' : 'bg-gray-600 text-gray-200 hover:bg-gray-500'}`, children: enabled ? 'Disable' : 'Enable' })] }, label))) })] }) }));
         };
-        return _jsx(LayoutWithInjectedContentDemo, {});
+        return _jsx(LayoutForEditorModulesDemo, {});
     },
 };
-export const LayoutWithMultipleContributors = {
+export const LayoutWithSmoothEditorTransitions = {
     render: () => {
-        const LayoutWithMultipleContributorsDemo = () => {
-            const [featureAMounted, setFeatureAMounted] = useState(true);
-            const [featureBMounted, setFeatureBMounted] = useState(true);
-            const featureAContent = useMemo(() => (_jsxs(ToolbarGroup, { children: [_jsx(ToolbarButton, { icon: 'pi pi-star', title: 'Feature A \u2014 Favorite (order 10)' }), _jsx(ToolbarButton, { icon: 'pi pi-heart', title: 'Feature A \u2014 Like (order 10)' })] })), []);
-            const featureBContent = useMemo(() => (_jsxs(_Fragment, { children: [_jsx(ToolbarSeparator, {}), _jsxs(ToolbarGroup, { children: [_jsx(ToolbarButton, { icon: 'pi pi-bolt', title: 'Feature B \u2014 Quick action (order 20)' }), _jsx(ToolbarButton, { icon: 'pi pi-cog', title: 'Feature B \u2014 Settings (order 20)' })] })] })), []);
-            return (_jsx(ToolbarSlotProvider, { children: _jsxs("div", { className: 'flex flex-col items-center gap-6', children: [_jsxs(Toolbar, { children: [_jsx(ToolbarButton, { icon: 'pi pi-arrow-up-left', title: 'Select' }), _jsx(ToolbarLayout, { name: 'shared-region', children: _jsx(ToolbarGroup, { children: _jsx(ToolbarButton, { icon: 'pi pi-pencil', title: 'Draw (default)' }) }) }), _jsx(ToolbarButton, { icon: 'pi pi-undo', title: 'Undo' })] }), featureAMounted && (_jsx(ToolbarSlot, { slotName: 'shared-region', order: 10, children: featureAContent })), featureBMounted && (_jsx(ToolbarSlot, { slotName: 'shared-region', order: 20, children: featureBContent })), _jsx("div", { className: 'flex gap-6', children: [
-                                { label: 'Feature A', mounted: featureAMounted, toggle: () => setFeatureAMounted(m => !m) },
-                                { label: 'Feature B', mounted: featureBMounted, toggle: () => setFeatureBMounted(m => !m) },
-                            ].map(({ label, mounted, toggle }) => (_jsxs("div", { className: 'flex flex-col items-center gap-2', children: [_jsx("span", { className: 'text-xs', style: { color: 'var(--text-color-secondary)' }, children: label }), _jsx("button", { type: 'button', onClick: toggle, className: `px-3 py-1 rounded text-sm transition-colors ${mounted
+        const LayoutWithSmoothEditorTransitionsDemo = () => {
+            const [activeEditor, setActiveEditor] = useState('canvas');
+            const canvasTools = useMemo(() => (_jsxs(ToolbarGroup, { orientation: 'horizontal', children: [_jsx(ToolbarButton, { icon: 'pi pi-pencil', title: 'Draw', tooltipPosition: 'bottom' }), _jsx(ToolbarButton, { icon: 'pi pi-stop', title: 'Rectangle', tooltipPosition: 'bottom' }), _jsx(ToolbarButton, { icon: 'pi pi-circle', title: 'Circle', tooltipPosition: 'bottom' })] })), []);
+            const textTools = useMemo(() => (_jsxs(ToolbarGroup, { orientation: 'horizontal', children: [_jsx(ToolbarButton, { icon: 'pi pi-align-left', title: 'Align Left', tooltipPosition: 'bottom' }), _jsx(ToolbarButton, { icon: 'pi pi-bold', title: 'Bold', tooltipPosition: 'bottom' }), _jsx(ToolbarButton, { icon: 'pi pi-underline', title: 'Underline', tooltipPosition: 'bottom' })] })), []);
+            const schemaTools = useMemo(() => (_jsxs(_Fragment, { children: [_jsxs(ToolbarGroup, { orientation: 'horizontal', children: [_jsx(ToolbarButton, { icon: 'pi pi-table', title: 'Add Table', tooltipPosition: 'bottom' }), _jsx(ToolbarButton, { icon: 'pi pi-link', title: 'Relationship', tooltipPosition: 'bottom' })] }), _jsx(ToolbarSeparator, { orientation: 'horizontal' }), _jsx(ToolbarGroup, { orientation: 'horizontal', children: _jsx(ToolbarButton, { icon: 'pi pi-check-square', title: 'Validate Schema', tooltipPosition: 'bottom' }) })] })), []);
+            const editorTools = {
+                canvas: canvasTools,
+                text: textTools,
+                schema: schemaTools,
+            };
+            return (_jsx(ToolbarSlotProvider, { children: _jsxs("div", { className: 'flex flex-col items-center gap-6', children: [_jsxs(Toolbar, { orientation: 'horizontal', children: [_jsx(ToolbarButton, { icon: 'pi pi-home', title: 'Workspace Home', tooltipPosition: 'bottom' }), _jsx(ToolbarSeparator, { orientation: 'horizontal' }), _jsx(ToolbarLayout, { name: 'active-editor-tools', orientation: 'horizontal', children: _jsx(ToolbarGroup, { orientation: 'horizontal', children: _jsx(ToolbarButton, { icon: 'pi pi-folder-open', title: 'Open', tooltipPosition: 'bottom' }) }) }), _jsx(ToolbarSeparator, { orientation: 'horizontal' }), _jsx(ToolbarButton, { icon: 'pi pi-history', title: 'History', tooltipPosition: 'bottom' })] }), _jsx(ToolbarSlot, { slotName: 'active-editor-tools', order: 0, children: editorTools[activeEditor] }), _jsxs("div", { className: 'flex flex-col items-center gap-3', children: [_jsx("span", { className: 'text-xs', style: { color: 'var(--text-color-secondary)' }, children: "Active editor" }), _jsx("div", { className: 'flex gap-2', children: ['canvas', 'text', 'schema'].map(editor => (_jsx("button", { type: 'button', onClick: () => setActiveEditor(editor), className: `px-3 py-1 rounded text-sm capitalize transition-colors ${activeEditor === editor
                                             ? 'bg-blue-600 text-white'
-                                            : 'bg-gray-600 text-gray-200 hover:bg-gray-500'}`, children: mounted ? 'Unmount' : 'Mount' })] }, label))) })] }) }));
+                                            : 'bg-gray-600 text-gray-200 hover:bg-gray-500'}`, children: editor }, editor))) })] })] }) }));
         };
-        return _jsx(LayoutWithMultipleContributorsDemo, {});
+        return _jsx(LayoutWithSmoothEditorTransitionsDemo, {});
     },
 };
-export const LayoutWithContextSensitiveContent = {
+export const LayoutWithGlobalAndEditorRegions = {
     render: () => {
-        const LayoutWithContextSensitiveContentDemo = () => {
-            const [activeMode, setActiveMode] = useState('draw');
-            const drawContent = useMemo(() => (_jsxs(_Fragment, { children: [_jsxs(ToolbarGroup, { children: [_jsx(ToolbarButton, { icon: 'pi pi-pencil', title: 'Freehand' }), _jsx(ToolbarButton, { icon: 'pi pi-minus', title: 'Line' })] }), _jsx(ToolbarSeparator, {}), _jsx(ToolbarGroup, { children: _jsx(ToolbarButton, { icon: 'pi pi-eraser', title: 'Erase' }) })] })), []);
-            const textContent = useMemo(() => (_jsxs(ToolbarGroup, { children: [_jsx(ToolbarButton, { icon: 'pi pi-align-left', title: 'Align left' }), _jsx(ToolbarButton, { icon: 'pi pi-align-center', title: 'Center' }), _jsx(ToolbarButton, { icon: 'pi pi-align-right', title: 'Align right' })] })), []);
-            const shapeContent = useMemo(() => (_jsxs(_Fragment, { children: [_jsxs(ToolbarGroup, { children: [_jsx(ToolbarButton, { icon: 'pi pi-stop', title: 'Rectangle' }), _jsx(ToolbarButton, { icon: 'pi pi-circle', title: 'Circle' })] }), _jsx(ToolbarSeparator, {}), _jsx(ToolbarGroup, { children: _jsx(ToolbarButton, { icon: 'pi pi-clone', title: 'Duplicate' }) })] })), []);
-            const modeContent = { draw: drawContent, text: textContent, shape: shapeContent };
-            return (_jsx(ToolbarSlotProvider, { children: _jsxs("div", { className: 'flex flex-col items-center gap-6', children: [_jsxs(Toolbar, { children: [_jsx(ToolbarButton, { icon: 'pi pi-arrow-up-left', title: 'Select' }), _jsx(ToolbarLayout, { name: 'mode-tools' }), _jsx(ToolbarButton, { icon: 'pi pi-undo', title: 'Undo' })] }), _jsx(ToolbarSlot, { slotName: 'mode-tools', order: 0, children: modeContent[activeMode] }), _jsxs("div", { className: 'flex flex-col items-center gap-2', children: [_jsx("span", { className: 'text-xs', style: { color: 'var(--text-color-secondary)' }, children: "Active mode" }), _jsx("div", { className: 'flex gap-2', children: ['draw', 'text', 'shape'].map(mode => (_jsx("button", { type: 'button', onClick: () => setActiveMode(mode), className: `px-3 py-1 rounded text-sm capitalize transition-colors ${activeMode === mode
-                                            ? 'bg-blue-600 text-white'
-                                            : 'bg-gray-600 text-gray-200 hover:bg-gray-500'}`, children: mode }, mode))) })] })] }) }));
+        const LayoutWithGlobalAndEditorRegionsDemo = () => {
+            const [activeEditor, setActiveEditor] = useState('page');
+            const globalActions = useMemo(() => (_jsxs(ToolbarGroup, { orientation: 'horizontal', children: [_jsx(ToolbarButton, { icon: 'pi pi-save', title: 'Save Workspace', tooltipPosition: 'bottom' }), _jsx(ToolbarButton, { icon: 'pi pi-share-alt', title: 'Share', tooltipPosition: 'bottom' })] })), []);
+            const pageEditorTools = useMemo(() => (_jsxs(ToolbarGroup, { orientation: 'horizontal', children: [_jsx(ToolbarButton, { icon: 'pi pi-clone', title: 'Duplicate Block', tooltipPosition: 'bottom' }), _jsx(ToolbarButton, { icon: 'pi pi-palette', title: 'Theme', tooltipPosition: 'bottom' })] })), []);
+            const workflowEditorTools = useMemo(() => (_jsxs(ToolbarGroup, { orientation: 'horizontal', children: [_jsx(ToolbarButton, { icon: 'pi pi-sitemap', title: 'Add Node', tooltipPosition: 'bottom' }), _jsx(ToolbarButton, { icon: 'pi pi-play', title: 'Run Flow', tooltipPosition: 'bottom' }), _jsx(ToolbarButton, { icon: 'pi pi-stopwatch', title: 'Debug Step', tooltipPosition: 'bottom' })] })), []);
+            const editorRegionTools = {
+                page: pageEditorTools,
+                workflow: workflowEditorTools,
+            };
+            return (_jsx(ToolbarSlotProvider, { children: _jsxs("div", { className: 'flex flex-col items-center gap-6', children: [_jsxs(Toolbar, { orientation: 'horizontal', children: [_jsx(ToolbarLayout, { name: 'global-region', orientation: 'horizontal' }), _jsx(ToolbarSeparator, { orientation: 'horizontal' }), _jsx(ToolbarLayout, { name: 'editor-region', orientation: 'horizontal' })] }), _jsx(ToolbarSlot, { slotName: 'global-region', order: 0, children: globalActions }), _jsx(ToolbarSlot, { slotName: 'editor-region', order: 0, children: editorRegionTools[activeEditor] }), _jsx("div", { className: 'flex gap-2', children: ['page', 'workflow'].map(editor => (_jsxs("button", { type: 'button', onClick: () => setActiveEditor(editor), className: `px-3 py-1 rounded text-sm capitalize transition-colors ${activeEditor === editor
+                                    ? 'bg-blue-600 text-white'
+                                    : 'bg-gray-600 text-gray-200 hover:bg-gray-500'}`, children: [editor, " editor"] }, editor))) })] }) }));
         };
-        return _jsx(LayoutWithContextSensitiveContentDemo, {});
+        return _jsx(LayoutWithGlobalAndEditorRegionsDemo, {});
     },
 };
 //# sourceMappingURL=Toolbar.stories.js.map