@syncular/ui 0.0.4-25 → 0.0.4-26

package/dist/console/api-keys-table.js

@@ -15,7 +15,7 @@ const ApiKeysTable = forwardRef(({ className, keys, onCreateKey, onRotateKey, on
                 _jsx("span", { className: "w-[140px]", children: "Name" }), _jsx("span", { className: "w-[70px]", children: "Type" }), _jsx("span", { className: "flex-1", children: "Prefix" }), _jsx("span", { className: "w-[90px]", children: "Created" }), _jsx("span", { className: "w-[80px] text-right", children: "Actions" })
             ] }), keys.map((k, i) => (_jsxs("div", { className: cn('font-mono text-[11px] leading-7 px-4 flex items-center gap-4 hover:bg-white/[0.015] transition-colors cursor-default', i < keys.length - 1 && 'border-b border-[#141414]'), children: [
                 _jsx("span", { className: "w-[140px] text-white truncate", children: k.name }), _jsx("span", { className: "w-[70px]", children: _jsx(Badge, { variant: typeBadgeMap[k.type] ?? 'ghost', children: k.type }) }), _jsx("span", { className: "flex-1 text-neutral-500 truncate", children: k.prefix }), _jsx("span", { className: "w-[90px] text-neutral-600 truncate", children: k.created }), _jsxs("span", { className: "w-[80px] flex gap-2 justify-end", children: [onRotateKey && (_jsx(Button, { variant: "default", size: "sm", className: "text-[9px] px-1.5 py-0.5", onClick: () => onRotateKey(k.name), children: "Rotate" })), onRevokeKey && (_jsx(Button, { variant: "destructive", size: "sm", className: "text-[9px] px-1.5 py-0.5", onClick: () => onRevokeKey(k.name), children: "Revoke" }))] })
-            ] }, k.name)))] })));
+            ] }, `${k.name}:${k.prefix}:${i}`)))] })));
 ApiKeysTable.displayName = 'ApiKeysTable';
 export { ApiKeysTable };
 //# sourceMappingURL=api-keys-table.js.map

package/dist/console/api-keys-table.js.map

@@ -1 +1 @@
-{"version":3,"file":"api-keys-table.js","sourceRoot":"","sources":["../../src/console/api-keys-table.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAiC,UAAU,EAAE,MAAM,OAAO,CAAC;AAClE,OAAO,EAAE,EAAE,EAAE,MAAM,WAAW,CAAC;AAE/B,OAAO,EAAE,KAAK,EAAmB,MAAM,qBAAqB,CAAC;AAC7D,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAS9C,MAAM,YAAY,GAA0C;IAC1D,KAAK,EAAE,OAAO;IACd,KAAK,EAAE,MAAM;IACb,KAAK,EAAE,OAAO;CACf,CAAC;AAEF,MAAM,YAAY,GAAG,UAAU,CAC7B,CACE,EAAE,SAAS,EAAE,IAAI,EAAE,WAAW,EAAE,WAAW,EAAE,WAAW,EAAE,GAAG,KAAK,EAAE,EACpE,GAAG,EACH,EAAE,CAAC,CACH,eACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CACX,gFAAgF,EAChF,SAAS,CACV,KACG,KAAK;QAGT,eAAK,SAAS,EAAC,sEAAsE;gBACnF,eAAM,SAAS,EAAC,kEAAkE,yBAE3E,EACN,WAAW,IAAI,CACd,KAAC,MAAM,IAAC,OAAO,EAAC,SAAS,EAAC,IAAI,EAAC,IAAI,EAAC,OAAO,EAAE,WAAW,6BAE/C,CACV,IACG,EAGN,eAAK,SAAS,EAAC,8HAA8H;gBAC3I,eAAM,SAAS,EAAC,WAAW,qBAAY,EACvC,eAAM,SAAS,EAAC,UAAU,qBAAY,EACtC,eAAM,SAAS,EAAC,QAAQ,uBAAc,EACtC,eAAM,SAAS,EAAC,UAAU,wBAAe,EACzC,eAAM,SAAS,EAAC,qBAAqB,wBAAe;gBAChD,EAGL,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAClB,eAEE,SAAS,EAAE,EAAE,CACX,sHAAsH,EACtH,CAAC,GAAG,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,2BAA2B,CACnD;gBAED,eAAM,SAAS,EAAC,+BAA+B,YAAE,CAAC,CAAC,IAAI,GAAQ,EAC/D,eAAM,SAAS,EAAC,UAAU,YACxB,KAAC,KAAK,IAAC,OAAO,EAAE,YAAY,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,OAAO,YAAG,CAAC,CAAC,IAAI,GAAS,GAC5D,EACP,eAAM,SAAS,EAAC,kCAAkC,YAAE,CAAC,CAAC,MAAM,GAAQ,EACpE,eAAM,SAAS,EAAC,oCAAoC,YACjD,CAAC,CAAC,OAAO,GACL,EACP,gBAAM,SAAS,EAAC,iCAAiC,aAC9C,WAAW,IAAI,CACd,KAAC,MAAM,IACL,OAAO,EAAC,SAAS,EACjB,IAAI,EAAC,IAAI,EACT,SAAS,EAAC,0BAA0B,EACpC,OAAO,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC,uBAG3B,CACV,EACA,WAAW,IAAI,CACd,KAAC,MAAM,IACL,OAAO,EAAC,aAAa,EACrB,IAAI,EAAC,IAAI,EACT,SAAS,EAAC,0BAA0B,EACpC,OAAO,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC,uBAG3B,CACV,IACI;iBAnCF,CAAC,CAAC,IAAI,CAoCP,CACP,CAAC,IACE,CACP,CACF,CAAC;AACF,YAAY,CAAC,WAAW,GAAG,cAAc,CAAC;AAE1C,OAAO,EAAE,YAAY,EAAE,CAAC"}
+{"version":3,"file":"api-keys-table.js","sourceRoot":"","sources":["../../src/console/api-keys-table.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAiC,UAAU,EAAE,MAAM,OAAO,CAAC;AAClE,OAAO,EAAE,EAAE,EAAE,MAAM,WAAW,CAAC;AAE/B,OAAO,EAAE,KAAK,EAAmB,MAAM,qBAAqB,CAAC;AAC7D,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAS9C,MAAM,YAAY,GAA0C;IAC1D,KAAK,EAAE,OAAO;IACd,KAAK,EAAE,MAAM;IACb,KAAK,EAAE,OAAO;CACf,CAAC;AAEF,MAAM,YAAY,GAAG,UAAU,CAC7B,CACE,EAAE,SAAS,EAAE,IAAI,EAAE,WAAW,EAAE,WAAW,EAAE,WAAW,EAAE,GAAG,KAAK,EAAE,EACpE,GAAG,EACH,EAAE,CAAC,CACH,eACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CACX,gFAAgF,EAChF,SAAS,CACV,KACG,KAAK;QAGT,eAAK,SAAS,EAAC,sEAAsE;gBACnF,eAAM,SAAS,EAAC,kEAAkE,yBAE3E,EACN,WAAW,IAAI,CACd,KAAC,MAAM,IAAC,OAAO,EAAC,SAAS,EAAC,IAAI,EAAC,IAAI,EAAC,OAAO,EAAE,WAAW,6BAE/C,CACV,IACG,EAGN,eAAK,SAAS,EAAC,8HAA8H;gBAC3I,eAAM,SAAS,EAAC,WAAW,qBAAY,EACvC,eAAM,SAAS,EAAC,UAAU,qBAAY,EACtC,eAAM,SAAS,EAAC,QAAQ,uBAAc,EACtC,eAAM,SAAS,EAAC,UAAU,wBAAe,EACzC,eAAM,SAAS,EAAC,qBAAqB,wBAAe;gBAChD,EAGL,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAClB,eAEE,SAAS,EAAE,EAAE,CACX,sHAAsH,EACtH,CAAC,GAAG,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,2BAA2B,CACnD;gBAED,eAAM,SAAS,EAAC,+BAA+B,YAAE,CAAC,CAAC,IAAI,GAAQ,EAC/D,eAAM,SAAS,EAAC,UAAU,YACxB,KAAC,KAAK,IAAC,OAAO,EAAE,YAAY,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,OAAO,YAAG,CAAC,CAAC,IAAI,GAAS,GAC5D,EACP,eAAM,SAAS,EAAC,kCAAkC,YAAE,CAAC,CAAC,MAAM,GAAQ,EACpE,eAAM,SAAS,EAAC,oCAAoC,YACjD,CAAC,CAAC,OAAO,GACL,EACP,gBAAM,SAAS,EAAC,iCAAiC,aAC9C,WAAW,IAAI,CACd,KAAC,MAAM,IACL,OAAO,EAAC,SAAS,EACjB,IAAI,EAAC,IAAI,EACT,SAAS,EAAC,0BAA0B,EACpC,OAAO,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC,uBAG3B,CACV,EACA,WAAW,IAAI,CACd,KAAC,MAAM,IACL,OAAO,EAAC,aAAa,EACrB,IAAI,EAAC,IAAI,EACT,SAAS,EAAC,0BAA0B,EACpC,OAAO,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC,uBAG3B,CACV,IACI;iBAnCF,GAAG,CAAC,CAAC,IAAI,IAAI,CAAC,CAAC,MAAM,IAAI,CAAC,EAAE,CAoC7B,CACP,CAAC,IACE,CACP,CACF,CAAC;AACF,YAAY,CAAC,WAAW,GAAG,cAAc,CAAC;AAE1C,OAAO,EAAE,YAAY,EAAE,CAAC"}

package/dist/console/handlers-table.js

@@ -14,7 +14,7 @@ const HandlersTable = forwardRef(({ className, handlers, tableCount, ...props },
                     _jsx("span", { className: "flex-1", children: "Table" }), _jsx("span", { className: "w-[100px]", children: "Depends On" }), _jsx("span", { className: "w-[70px] text-right", children: "Chunk TTL" })
                 ] }), handlers.map((h, i) => (_jsxs("div", { className: cn('font-mono text-[11px] leading-7 px-4 flex items-center gap-4 hover:bg-white/[0.015] transition-colors cursor-default', i < handlers.length - 1 && 'border-b border-[#141414]'), children: [
                     _jsx("span", { className: "flex-1 text-white truncate", children: h.table }), _jsx("span", { className: "w-[100px] truncate", children: h.dependsOn ? (_jsx(Badge, { variant: "ghost", children: h.dependsOn })) : (_jsx("span", { className: "text-neutral-600", children: "\u2014" })) }), _jsx("span", { className: "w-[70px] text-right text-neutral-500 truncate", children: h.chunkTtl })
-                ] }, h.table)))] }));
+                ] }, `${h.table}:${i}`)))] }));
 });
 HandlersTable.displayName = 'HandlersTable';
 export { HandlersTable };

package/dist/console/handlers-table.js.map

@@ -1 +1 @@
-{"version":3,"file":"handlers-table.js","sourceRoot":"","sources":["../../src/console/handlers-table.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAiC,UAAU,EAAE,MAAM,OAAO,CAAC;AAClE,OAAO,EAAE,EAAE,EAAE,MAAM,WAAW,CAAC;AAE/B,OAAO,EAAE,KAAK,EAAE,MAAM,qBAAqB,CAAC;AAO5C,MAAM,aAAa,GAAG,UAAU,CAC9B,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,UAAU,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE,CAAC;IACtD,MAAM,KAAK,GAAG,UAAU,IAAI,QAAQ,CAAC,MAAM,CAAC;IAE5C,OAAO,CACL,eACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CACX,gFAAgF,EAChF,SAAS,CACV,KACG,KAAK;YAGT,eAAK,SAAS,EAAC,sEAAsE;oBACnF,eAAK,SAAS,EAAC,yBAAyB;4BACtC,eAAM,SAAS,EAAC,kCAAkC,GAAG,EACrD,eAAM,SAAS,EAAC,kEAAkE,yBAE3E;4BACH,EACN,gBAAM,SAAS,EAAC,wCAAwC,aACrD,KAAK,eACD;oBACH,EAGN,eAAK,SAAS,EAAC,8HAA8H;oBAC3I,eAAM,SAAS,EAAC,QAAQ,sBAAa,EACrC,eAAM,SAAS,EAAC,WAAW,2BAAkB,EAC7C,eAAM,SAAS,EAAC,qBAAqB,0BAAiB;oBAClD,EAGL,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CACtB,eAEE,SAAS,EAAE,EAAE,CACX,sHAAsH,EACtH,CAAC,GAAG,QAAQ,CAAC,MAAM,GAAG,CAAC,IAAI,2BAA2B,CACvD;oBAED,eAAM,SAAS,EAAC,4BAA4B,YAAE,CAAC,CAAC,KAAK,GAAQ,EAC7D,eAAM,SAAS,EAAC,oBAAoB,YACjC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CACb,KAAC,KAAK,IAAC,OAAO,EAAC,OAAO,YAAE,CAAC,CAAC,SAAS,GAAS,CAC7C,CAAC,CAAC,CAAC,CACF,eAAM,SAAS,EAAC,kBAAkB,uBAAe,CAClD,GACI,EACP,eAAM,SAAS,EAAC,+CAA+C,YAC5D,CAAC,CAAC,QAAQ,GACN;qBAhBF,CAAC,CAAC,KAAK,CAiBR,CACP,CAAC,IACE,CACP,CAAC;AAAA,CACH,CACF,CAAC;AACF,aAAa,CAAC,WAAW,GAAG,eAAe,CAAC;AAE5C,OAAO,EAAE,aAAa,EAAE,CAAC"}
+{"version":3,"file":"handlers-table.js","sourceRoot":"","sources":["../../src/console/handlers-table.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAiC,UAAU,EAAE,MAAM,OAAO,CAAC;AAClE,OAAO,EAAE,EAAE,EAAE,MAAM,WAAW,CAAC;AAE/B,OAAO,EAAE,KAAK,EAAE,MAAM,qBAAqB,CAAC;AAO5C,MAAM,aAAa,GAAG,UAAU,CAC9B,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,UAAU,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE,CAAC;IACtD,MAAM,KAAK,GAAG,UAAU,IAAI,QAAQ,CAAC,MAAM,CAAC;IAE5C,OAAO,CACL,eACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CACX,gFAAgF,EAChF,SAAS,CACV,KACG,KAAK;YAGT,eAAK,SAAS,EAAC,sEAAsE;oBACnF,eAAK,SAAS,EAAC,yBAAyB;4BACtC,eAAM,SAAS,EAAC,kCAAkC,GAAG,EACrD,eAAM,SAAS,EAAC,kEAAkE,yBAE3E;4BACH,EACN,gBAAM,SAAS,EAAC,wCAAwC,aACrD,KAAK,eACD;oBACH,EAGN,eAAK,SAAS,EAAC,8HAA8H;oBAC3I,eAAM,SAAS,EAAC,QAAQ,sBAAa,EACrC,eAAM,SAAS,EAAC,WAAW,2BAAkB,EAC7C,eAAM,SAAS,EAAC,qBAAqB,0BAAiB;oBAClD,EAGL,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CACtB,eAEE,SAAS,EAAE,EAAE,CACX,sHAAsH,EACtH,CAAC,GAAG,QAAQ,CAAC,MAAM,GAAG,CAAC,IAAI,2BAA2B,CACvD;oBAED,eAAM,SAAS,EAAC,4BAA4B,YAAE,CAAC,CAAC,KAAK,GAAQ,EAC7D,eAAM,SAAS,EAAC,oBAAoB,YACjC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CACb,KAAC,KAAK,IAAC,OAAO,EAAC,OAAO,YAAE,CAAC,CAAC,SAAS,GAAS,CAC7C,CAAC,CAAC,CAAC,CACF,eAAM,SAAS,EAAC,kBAAkB,uBAAe,CAClD,GACI,EACP,eAAM,SAAS,EAAC,+CAA+C,YAC5D,CAAC,CAAC,QAAQ,GACN;qBAhBF,GAAG,CAAC,CAAC,KAAK,IAAI,CAAC,EAAE,CAiBlB,CACP,CAAC,IACE,CACP,CAAC;AAAA,CACH,CACF,CAAC;AACF,aAAa,CAAC,WAAW,GAAG,eAAe,CAAC;AAE5C,OAAO,EAAE,aAAa,EAAE,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@syncular/ui",
-  "version": "0.0.4-25",
+  "version": "0.0.4-26",
   "description": "Reusable Syncular UI components and styles",
   "license": "MIT",
   "author": "Benjamin Kniffler",

package/src/console/api-keys-table.tsx

@@ -56,7 +56,7 @@ const ApiKeysTable = forwardRef<HTMLDivElement, ApiKeysTableProps>(
       {/* Rows */}
       {keys.map((k, i) => (
         <div
-          key={k.name}
+          key={`${k.name}:${k.prefix}:${i}`}
           className={cn(
             'font-mono text-[11px] leading-7 px-4 flex items-center gap-4 hover:bg-white/[0.015] transition-colors cursor-default',
             i < keys.length - 1 && 'border-b border-[#141414]'

package/src/console/handlers-table.tsx

@@ -46,7 +46,7 @@ const HandlersTable = forwardRef<HTMLDivElement, HandlersTableProps>(
         {/* Rows */}
         {handlers.map((h, i) => (
           <div
-            key={h.table}
+            key={`${h.table}:${i}`}
             className={cn(
               'font-mono text-[11px] leading-7 px-4 flex items-center gap-4 hover:bg-white/[0.015] transition-colors cursor-default',
               i < handlers.length - 1 && 'border-b border-[#141414]'

package/src/styles/styles.css

@@ -1,29 +1,31 @@
-@import 'tailwindcss';
+@import 'tailwindcss/theme.css';
+@import 'tailwindcss/utilities.css';
 @import './tokens.css';
 
 /* ── Base ── */
-body {
-  background: var(--color-background);
-  color: var(--color-foreground);
-  font-family: var(--font-display), ui-sans-serif, system-ui, sans-serif;
+:where(.syncular-console-root, .syncular-ui-root) {
+  background: var(--syncular-color-background);
+  color: var(--syncular-color-foreground);
+  font-family: var(--syncular-font-display), ui-sans-serif, system-ui,
+    sans-serif;
   margin: 0;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
-.font-mono {
-  font-family: var(--font-mono), ui-monospace, monospace;
+:where(.syncular-console-root, .syncular-ui-root) .font-mono {
+  font-family: var(--syncular-font-mono), ui-monospace, monospace;
 }
 
 /* ── Scrollbar ── */
-::-webkit-scrollbar {
+:where(.syncular-console-root, .syncular-ui-root) ::-webkit-scrollbar {
   width: 3px;
   height: 3px;
 }
-::-webkit-scrollbar-track {
+:where(.syncular-console-root, .syncular-ui-root) ::-webkit-scrollbar-track {
   background: transparent;
 }
-::-webkit-scrollbar-thumb {
+:where(.syncular-console-root, .syncular-ui-root) ::-webkit-scrollbar-thumb {
   background: #333;
   border-radius: 2px;
 }
@@ -112,16 +114,16 @@ body {
   }
 }
 
-.line-active {
+:where(.syncular-console-root, .syncular-ui-root) .line-active {
   stroke-dasharray: 4 2;
   animation: dashFlow 1s linear infinite;
 }
 
-.stream-entry {
+:where(.syncular-console-root, .syncular-ui-root) .stream-entry {
   animation: streamSlide 0.35s ease-out;
 }
 
-.dot-pulse {
+:where(.syncular-console-root, .syncular-ui-root) .dot-pulse {
   animation: dotPulse 1.4s ease-in-out infinite;
 }
 
@@ -137,7 +139,7 @@ body {
   }
 }
 
-.flow-arrow {
+:where(.syncular-console-root, .syncular-ui-root) .flow-arrow {
   animation: flowPulse 2s ease-in-out infinite;
 }
 
@@ -152,7 +154,7 @@ body {
   }
 }
 
-.dot-grid {
+:where(.syncular-console-root, .syncular-ui-root) .dot-grid {
   background-image: radial-gradient(
     circle at 1px 1px,
     #1a1a1a 1px,
@@ -161,7 +163,7 @@ body {
   background-size: 24px 24px;
 }
 
-.scan-line {
+:where(.syncular-console-root, .syncular-ui-root) .scan-line {
   position: absolute;
   left: 0;
   right: 0;

package/src/styles/tokens.css

@@ -1,47 +1,110 @@
-@theme {
+@theme inline {
+  --color-background: var(--syncular-color-background);
+  --color-surface: var(--syncular-color-surface);
+  --color-panel: var(--syncular-color-panel);
+  --color-panel-alt: var(--syncular-color-panel-alt);
+  --color-border: var(--syncular-color-border);
+  --color-border-bright: var(--syncular-color-border-bright);
+
+  --color-healthy: var(--syncular-color-healthy);
+  --color-syncing: var(--syncular-color-syncing);
+  --color-offline: var(--syncular-color-offline);
+
+  --color-flow: var(--syncular-color-flow);
+  --color-relay: var(--syncular-color-relay);
+  --color-encrypt: var(--syncular-color-encrypt);
+
+  --color-foreground: var(--syncular-color-foreground);
+  --color-foreground-muted: var(--syncular-color-foreground-muted);
+
+  --color-primary: var(--syncular-color-primary);
+  --color-destructive: var(--syncular-color-destructive);
+  --color-secondary: var(--syncular-color-secondary);
+
+  --font-display: var(--syncular-font-display);
+  --font-mono: var(--syncular-font-mono);
+
+  --radius-sm: var(--syncular-radius-sm);
+  --radius-md: var(--syncular-radius-md);
+  --radius-lg: var(--syncular-radius-lg);
+  --radius-xl: var(--syncular-radius-xl);
+}
+
+:where(.syncular-console-root, .syncular-ui-root) {
   /* ── Surface ── */
-  --color-background: #0c0c0c;
-  --color-surface: #0c0c0c;
-  --color-panel: #111111;
-  --color-panel-alt: #0e0e0e;
-  --color-border: #1e1e1e;
-  --color-border-bright: #2a2a2a;
+  --syncular-color-background: #0c0c0c;
+  --syncular-color-surface: #0c0c0c;
+  --syncular-color-panel: #111111;
+  --syncular-color-panel-alt: #0e0e0e;
+  --syncular-color-border: #1e1e1e;
+  --syncular-color-border-bright: #2a2a2a;
 
   /* ── Status ── */
-  --color-healthy: #22c55e;
-  --color-syncing: #f59e0b;
-  --color-offline: #ef4444;
+  --syncular-color-healthy: #22c55e;
+  --syncular-color-syncing: #f59e0b;
+  --syncular-color-offline: #ef4444;
 
   /* ── Flow ── */
-  --color-flow: #3b82f6;
-  --color-relay: #8b5cf6;
-  --color-encrypt: #f472b6;
+  --syncular-color-flow: #3b82f6;
+  --syncular-color-relay: #8b5cf6;
+  --syncular-color-encrypt: #f472b6;
 
   /* ── Text ── */
-  --color-foreground: #e5e5e5;
-  --color-foreground-muted: #737373;
+  --syncular-color-foreground: #e5e5e5;
+  --syncular-color-foreground-muted: #737373;
 
   /* ── Semantic ── */
-  --color-primary: #22c55e;
-  --color-destructive: #ef4444;
-  --color-secondary: #1e1e1e;
+  --syncular-color-primary: #22c55e;
+  --syncular-color-destructive: #ef4444;
+  --syncular-color-secondary: #1e1e1e;
 
   /* ── Fonts ── */
-  --font-display: 'Inter Tight', system-ui, sans-serif;
-  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco,
-    Consolas, 'Liberation Mono', 'Courier New', monospace;
+  --syncular-font-display: 'Inter Tight', system-ui, sans-serif;
+  --syncular-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo,
+    Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
 
   /* ── Radii ── */
-  --radius-sm: 4px;
-  --radius-md: 6px;
-  --radius-lg: 8px;
-  --radius-xl: 10px;
+  --syncular-radius-sm: 4px;
+  --syncular-radius-md: 6px;
+  --syncular-radius-lg: 8px;
+  --syncular-radius-xl: 10px;
 
   /* ── Glows ── */
-  --sync-glow-healthy: 0 0 6px #22c55e;
-  --sync-glow-syncing: 0 0 6px #f59e0b;
-  --sync-glow-offline: 0 0 6px #ef4444;
-  --sync-glow-flow: 0 0 6px #3b82f6;
-  --sync-glow-relay: 0 0 6px #8b5cf6;
-  --sync-glow-encrypt: 0 0 6px #f472b6;
+  --syncular-glow-healthy: 0 0 6px #22c55e;
+  --syncular-glow-syncing: 0 0 6px #f59e0b;
+  --syncular-glow-offline: 0 0 6px #ef4444;
+  --syncular-glow-flow: 0 0 6px #3b82f6;
+  --syncular-glow-relay: 0 0 6px #8b5cf6;
+  --syncular-glow-encrypt: 0 0 6px #f472b6;
+
+  /* Backward token aliases used by chart primitives */
+  --color-background: var(--syncular-color-background);
+  --color-surface: var(--syncular-color-surface);
+  --color-panel: var(--syncular-color-panel);
+  --color-panel-alt: var(--syncular-color-panel-alt);
+  --color-border: var(--syncular-color-border);
+  --color-border-bright: var(--syncular-color-border-bright);
+  --color-healthy: var(--syncular-color-healthy);
+  --color-syncing: var(--syncular-color-syncing);
+  --color-offline: var(--syncular-color-offline);
+  --color-flow: var(--syncular-color-flow);
+  --color-relay: var(--syncular-color-relay);
+  --color-encrypt: var(--syncular-color-encrypt);
+  --color-foreground: var(--syncular-color-foreground);
+  --color-foreground-muted: var(--syncular-color-foreground-muted);
+  --color-primary: var(--syncular-color-primary);
+  --color-destructive: var(--syncular-color-destructive);
+  --color-secondary: var(--syncular-color-secondary);
+  --font-display: var(--syncular-font-display);
+  --font-mono: var(--syncular-font-mono);
+  --radius-sm: var(--syncular-radius-sm);
+  --radius-md: var(--syncular-radius-md);
+  --radius-lg: var(--syncular-radius-lg);
+  --radius-xl: var(--syncular-radius-xl);
+  --sync-glow-healthy: var(--syncular-glow-healthy);
+  --sync-glow-syncing: var(--syncular-glow-syncing);
+  --sync-glow-offline: var(--syncular-glow-offline);
+  --sync-glow-flow: var(--syncular-glow-flow);
+  --sync-glow-relay: var(--syncular-glow-relay);
+  --sync-glow-encrypt: var(--syncular-glow-encrypt);
 }