refactor(ui): remove translucent internals from datahub tactical canvas

Normalize DataHub overlays, headers, and interaction chrome to opaque surfaces, and keep design-system dependencies explicit for consistent rendering across environments.

Author: k8-benetis

package.json

@@ -16,6 +16,9 @@
   },
   "dependencies": {
     "@microsoft/fetch-event-source": "^2.0.1",
+    "@nekazari/design-tokens": "^0.1.0-alpha",
+    "@nekazari/ui-kit": "^1.0.2-alpha.4",
+    "@nekazari/viewer-kit": "^0.1.0-alpha",
     "@tanstack/react-query": "^5.0.0",
     "lucide-react": "^0.424.0",
     "react-grid-layout": "^2.2.2",

src/DataHubPage.tsx

@@ -116,7 +116,7 @@ const DataHubPageInner: React.FC = () => {
           {/* Overlay */}
           {sidebarOpen && (
             <div
-              className="fixed inset-0 z-40 bg-black/60 backdrop-blur-sm transition-opacity"
+              className="fixed inset-0 z-40 bg-black/70 transition-opacity"
               onClick={closeSidebar}
               aria-hidden
             />

src/components/DataTree.tsx

@@ -150,7 +150,7 @@ export const DataTree: React.FC<DataTreeProps> = ({
                           }}
                           className={`py-1 rounded px-1.5 cursor-grab active:cursor-grabbing transition-colors ${
                             selectedAttribute === attr.name
-                              ? 'bg-emerald-900/40 text-emerald-300 ring-1 ring-emerald-500/30'
+                              ? 'bg-emerald-900 text-emerald-200 ring-1 ring-emerald-500/40'
                               : 'text-slate-400 hover:bg-slate-800 hover:text-slate-200'
                           }`}
                         >
@@ -164,7 +164,7 @@ export const DataTree: React.FC<DataTreeProps> = ({
                             </span>
                           )}
                           {hasActivePanel && (
-                            <span className="ml-auto text-[10px] text-emerald-400 bg-emerald-400/10 px-1.5 py-0.5 rounded-full opacity-0 group-hover:opacity-100 transition-opacity">
+                            <span className="ml-auto text-[10px] text-emerald-300 bg-emerald-900 px-1.5 py-0.5 rounded-full opacity-0 group-hover:opacity-100 transition-opacity">
                               + {t('tree.addToPanel')}
                             </span>
                           )}

src/slots/DataHubDashboard.tsx

@@ -678,7 +678,7 @@ export const DataHubDashboard = forwardRef<DataHubDashboardHandle, DataHubDashbo
         </div>
       </div>
       {mainView === 'canvas' && (
-        <div className="flex flex-wrap items-center gap-2 px-4 py-2 border-t border-slate-800/80 bg-slate-950/80">
+        <div className="flex flex-wrap items-center gap-2 px-4 py-2 border-t border-slate-800 bg-slate-950">
           <span className="text-[10px] uppercase tracking-wide text-slate-500 shrink-0">
             {t('dashboard.timeRange')}
           </span>
@@ -739,7 +739,7 @@ export const DataHubDashboard = forwardRef<DataHubDashboardHandle, DataHubDashbo
       <div className="flex-1 min-h-0 p-2 flex flex-col">
         {panels.length === 0 ? (
           <div
-            className="flex-1 flex items-center justify-center rounded-lg border border-dashed border-slate-700 bg-slate-900/40 p-6 min-h-[min(420px,50vh)]"
+            className="flex-1 flex items-center justify-center rounded-lg border border-dashed border-slate-700 bg-slate-900 p-6 min-h-[min(420px,50vh)]"
             role="region"
             aria-label={t('dashboard.emptyCanvasTitle')}
             onDragOver={onEmptyCanvasDragOver}
@@ -782,7 +782,7 @@ export const DataHubDashboard = forwardRef<DataHubDashboardHandle, DataHubDashbo
               <div key={panel.id} className="relative h-full" onMouseDown={() => setActivePanelId(panel.id)}>
                 {/* Floating actions — top right pill */}
                 <div className="absolute top-2 right-2 z-20 flex gap-0.5 pointer-events-none">
-                  <div className="pointer-events-auto flex items-center gap-0.5 bg-slate-950/70 backdrop-blur-md rounded-full px-1.5 py-1 ring-1 ring-white/10 shadow-sm">
+                  <div className="pointer-events-auto flex items-center gap-0.5 bg-slate-950 rounded-full px-1.5 py-1 ring-1 ring-white/10 shadow-sm">
                     {panel.series.length === 1 && (
                       <button
                         type="button"

src/slots/panel/DataCanvasPanel.tsx

@@ -781,7 +781,7 @@ export const DataCanvasPanel: React.FC<DataCanvasPanelProps> = ({
           <div className="pointer-events-auto px-2 pb-1"
             onMouseDown={(e) => e.stopPropagation()}
           >
-            <div className="bg-slate-950/95 backdrop-blur-sm rounded-md border border-slate-700/40 shadow-2xl max-h-[80vh] overflow-y-auto">
+            <div className="bg-slate-950 rounded-md border border-slate-700/40 shadow-2xl max-h-[80vh] overflow-y-auto">
               <PanelToolbar
                 appearance={appearance}
                 onAppearanceChange={patchAppearance}

src/slots/panel/PanelHeader.tsx

@@ -25,7 +25,7 @@ export const PanelHeader: React.FC<PanelHeaderProps> = ({
   return (
     <div
       className={[
-        'h-9 flex items-center gap-2 px-3 border-b border-slate-800/80 bg-slate-950/50 backdrop-blur-sm',
+        'h-9 flex items-center gap-2 px-3 border-b border-slate-800 bg-slate-950',
         dragHandleClass ?? '',
       ].join(' ')}
     >