@syncular/ui 0.0.6-56 → 0.0.6-66

package/dist/console/api-keys-table.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"api-keys-table.d.ts","sourceRoot":"","sources":["../../src/console/api-keys-table.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,wBAAwB,EAAc,MAAM,OAAO,CAAC;AAElE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAIhD,MAAM,MAAM,iBAAiB,GAAG,wBAAwB,CAAC,KAAK,CAAC,GAAG;IAChE,IAAI,EAAE,WAAW,EAAE,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CACtC,CAAC;AAQF,QAAA,MAAM,YAAY;;;;;kDA6EjB,CAAC;AAGF,OAAO,EAAE,YAAY,EAAE,CAAC"}
+{"version":3,"file":"api-keys-table.d.ts","sourceRoot":"","sources":["../../src/console/api-keys-table.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,wBAAwB,EAAc,MAAM,OAAO,CAAC;AAElE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAWhD,MAAM,MAAM,iBAAiB,GAAG,wBAAwB,CAAC,KAAK,CAAC,GAAG;IAChE,IAAI,EAAE,WAAW,EAAE,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CACtC,CAAC;AAQF,QAAA,MAAM,YAAY;;;;;kDA+DjB,CAAC;AAGF,OAAO,EAAE,YAAY,EAAE,CAAC"}

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

@@ -3,19 +3,18 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 import { cn } from '../lib/cn.js';
 import { Badge } from '../primitives/badge.js';
-import { Button } from '../primitives/button.js';
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, } from '../primitives/table.js';
 const typeBadgeMap = {
     relay: 'relay',
     admin: 'flow',
     proxy: 'ghost',
 };
-const ApiKeysTable = forwardRef(({ className, keys, onCreateKey, onRotateKey, onRevokeKey, ...props }, ref) => (_jsxs("div", { ref: ref, className: cn('bg-panel border border-border rounded-lg hover:border-border-bright transition', className), ...props, children: [
-        _jsxs("div", { className: "px-4 py-2.5 border-b border-border flex items-center justify-between", children: [
-                _jsx("span", { className: "font-mono text-[10px] text-neutral-500 uppercase tracking-widest", children: "API Keys" }), onCreateKey && (_jsx(Button, { variant: "primary", size: "sm", onClick: onCreateKey, children: "+ Create Key" }))] }), _jsxs("div", { className: "font-mono text-[9px] tracking-wider uppercase text-neutral-600 flex items-center gap-4 px-4 leading-6 border-b border-border", children: [
-                _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.prefix}:${i}`)))] })));
+const ApiKeysTable = forwardRef(({ className, keys, onCreateKey, onRotateKey, onRevokeKey, ...props }, ref) => (_jsx("div", { ref: ref, className: cn('w-full', className), ...props, children: _jsxs(Table, { children: [
+            _jsx(TableHeader, { children: _jsxs(TableRow, { children: [
+                        _jsx(TableHead, { children: "Name" }), _jsx(TableHead, { children: "Type" }), _jsx(TableHead, { children: "Prefix" }), _jsx(TableHead, { children: "Created" })
+                    ] }) }), _jsx(TableBody, { children: keys.map((k, i) => (_jsxs(TableRow, { className: "group relative", children: [
+                        _jsx(TableCell, { children: _jsx("span", { className: "text-white truncate", children: k.name }) }), _jsx(TableCell, { children: _jsx(Badge, { variant: typeBadgeMap[k.type] ?? 'ghost', children: k.type }) }), _jsx(TableCell, { children: _jsx("span", { className: "text-neutral-500 truncate", children: k.prefix }) }), _jsx(TableCell, { children: _jsx("span", { className: "text-neutral-600 truncate", children: k.created }) }), (onRotateKey || onRevokeKey) && (_jsxs("div", { className: "absolute right-2 top-1/2 -translate-y-1/2 flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity", children: [onRotateKey && (_jsx("button", { type: "button", onClick: () => onRotateKey(k.name), className: "flex items-center gap-1 px-1.5 py-0.5 rounded text-[9px] text-neutral-600 hover:text-white hover:bg-white/[0.05] cursor-pointer transition-colors", children: "rotate" })), onRevokeKey && (_jsx("button", { type: "button", onClick: () => onRevokeKey(k.name), className: "flex items-center gap-1 px-1.5 py-0.5 rounded text-[9px] text-neutral-600 hover:text-offline hover:bg-offline/10 cursor-pointer transition-colors", children: "revoke" }))] }))] }, `${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,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"}
+{"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,EACL,KAAK,EACL,SAAS,EACT,SAAS,EACT,SAAS,EACT,WAAW,EACX,QAAQ,GACT,MAAM,qBAAqB,CAAC;AAS7B,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,cAAK,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,EAAE,CAAC,QAAQ,EAAE,SAAS,CAAC,KAAM,KAAK,YAC1D,MAAC,KAAK;YACJ,KAAC,WAAW,cACV,MAAC,QAAQ;wBACP,KAAC,SAAS,uBAAiB,EAC3B,KAAC,SAAS,uBAAiB,EAC3B,KAAC,SAAS,yBAAmB,EAC7B,KAAC,SAAS,0BAAoB;wBACrB,GACC,EACd,KAAC,SAAS,cACP,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAClB,MAAC,QAAQ,IAEP,SAAS,EAAC,gBAAgB;wBAE1B,KAAC,SAAS,cACR,eAAM,SAAS,EAAC,qBAAqB,YAAE,CAAC,CAAC,IAAI,GAAQ,GAC3C,EACZ,KAAC,SAAS,cACR,KAAC,KAAK,IAAC,OAAO,EAAE,YAAY,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,OAAO,YAC5C,CAAC,CAAC,IAAI,GACD,GACE,EACZ,KAAC,SAAS,cACR,eAAM,SAAS,EAAC,2BAA2B,YAAE,CAAC,CAAC,MAAM,GAAQ,GACnD,EACZ,KAAC,SAAS,cACR,eAAM,SAAS,EAAC,2BAA2B,YAAE,CAAC,CAAC,OAAO,GAAQ,GACpD,EACX,CAAC,WAAW,IAAI,WAAW,CAAC,IAAI,CAC/B,eAAK,SAAS,EAAC,wHAAwH,aACpI,WAAW,IAAI,CACd,iBACE,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC,EAClC,SAAS,EAAC,mJAAmJ,uBAGtJ,CACV,EACA,WAAW,IAAI,CACd,iBACE,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC,EAClC,SAAS,EAAC,mJAAmJ,uBAGtJ,CACV,IACG,CACP,KAtCI,GAAG,CAAC,CAAC,IAAI,IAAI,CAAC,CAAC,MAAM,IAAI,CAAC,EAAE,CAuCxB,CACZ,CAAC,GACQ;YACN,GACJ,CACP,CACF,CAAC;AACF,YAAY,CAAC,WAAW,GAAG,cAAc,CAAC;AAE1C,OAAO,EAAE,YAAY,EAAE,CAAC"}

package/dist/console/danger-action-card.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"danger-action-card.d.ts","sourceRoot":"","sources":["../../src/console/danger-action-card.tsx"],"names":[],"mappings":"AAMA,MAAM,WAAW,qBAAqB;IACpC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,KAAK,EAAE,MAAM,CAAC;CACf;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,WAAuB,EACvB,SAAS,EACT,WAAW,EACX,QAAQ,EACR,KAAK,EACL,KAAK,EACN,EAAE,qBAAqB,2CAqBvB"}
+{"version":3,"file":"danger-action-card.d.ts","sourceRoot":"","sources":["../../src/console/danger-action-card.tsx"],"names":[],"mappings":"AAMA,MAAM,WAAW,qBAAqB;IACpC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,KAAK,EAAE,MAAM,CAAC;CACf;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,WAAuB,EACvB,SAAS,EACT,WAAW,EACX,QAAQ,EACR,KAAK,EACL,KAAK,EACN,EAAE,qBAAqB,2CAyBvB"}

package/dist/console/danger-action-card.js

@@ -5,6 +5,6 @@ import { Button } from '../primitives/button.js';
 import { Card, CardContent } from '../primitives/card.js';
 export function DangerActionCard({ actionLabel = 'Confirm', className, description, onAction, stats, title, }) {
     return (_jsx(Card, { className: cn('border-offline/20', className), children: _jsxs(CardContent, { className: "flex flex-col gap-3", children: [
-                _jsx("h3", { className: "font-mono text-[10px] text-offline uppercase tracking-widest", children: title }), description ? (_jsx("p", { className: "font-mono text-[10px] text-neutral-500", children: description })) : null, stats ? _jsx("div", { children: stats }) : null, onAction ? (_jsx(Button, { variant: "destructive", onClick: onAction, children: actionLabel })) : null] }) }));
+                _jsx("h3", { className: "font-mono text-[10px] text-offline uppercase tracking-widest", children: title }), description ? (_jsx("p", { className: "font-mono text-[10px] text-neutral-500", children: description })) : null, stats ? _jsx("div", { children: stats }) : null, onAction ? (_jsx(Button, { variant: "destructive", className: "self-start", onClick: onAction, children: actionLabel })) : null] }) }));
 }
 //# sourceMappingURL=danger-action-card.js.map

package/dist/console/danger-action-card.js.map

@@ -1 +1 @@
-{"version":3,"file":"danger-action-card.js","sourceRoot":"","sources":["../../src/console/danger-action-card.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,EAAE,EAAE,MAAM,WAAW,CAAC;AAC/B,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAC9C,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAWvD,MAAM,UAAU,gBAAgB,CAAC,EAC/B,WAAW,GAAG,SAAS,EACvB,SAAS,EACT,WAAW,EACX,QAAQ,EACR,KAAK,EACL,KAAK,GACiB,EAAE;IACxB,OAAO,CACL,KAAC,IAAI,IAAC,SAAS,EAAE,EAAE,CAAC,mBAAmB,EAAE,SAAS,CAAC,YACjD,MAAC,WAAW,IAAC,SAAS,EAAC,qBAAqB;gBAC1C,aAAI,SAAS,EAAC,8DAA8D,YACzE,KAAK,GACH,EACJ,WAAW,CAAC,CAAC,CAAC,CACb,YAAG,SAAS,EAAC,wCAAwC,YAClD,WAAW,GACV,CACL,CAAC,CAAC,CAAC,IAAI,EACP,KAAK,CAAC,CAAC,CAAC,wBAAM,KAAK,GAAO,CAAC,CAAC,CAAC,IAAI,EACjC,QAAQ,CAAC,CAAC,CAAC,CACV,KAAC,MAAM,IAAC,OAAO,EAAC,aAAa,EAAC,OAAO,EAAE,QAAQ,YAC5C,WAAW,GACL,CACV,CAAC,CAAC,CAAC,IAAI,IACI,GACT,CACR,CAAC;AAAA,CACH"}
+{"version":3,"file":"danger-action-card.js","sourceRoot":"","sources":["../../src/console/danger-action-card.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,EAAE,EAAE,MAAM,WAAW,CAAC;AAC/B,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAC9C,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAWvD,MAAM,UAAU,gBAAgB,CAAC,EAC/B,WAAW,GAAG,SAAS,EACvB,SAAS,EACT,WAAW,EACX,QAAQ,EACR,KAAK,EACL,KAAK,GACiB,EAAE;IACxB,OAAO,CACL,KAAC,IAAI,IAAC,SAAS,EAAE,EAAE,CAAC,mBAAmB,EAAE,SAAS,CAAC,YACjD,MAAC,WAAW,IAAC,SAAS,EAAC,qBAAqB;gBAC1C,aAAI,SAAS,EAAC,8DAA8D,YACzE,KAAK,GACH,EACJ,WAAW,CAAC,CAAC,CAAC,CACb,YAAG,SAAS,EAAC,wCAAwC,YAClD,WAAW,GACV,CACL,CAAC,CAAC,CAAC,IAAI,EACP,KAAK,CAAC,CAAC,CAAC,wBAAM,KAAK,GAAO,CAAC,CAAC,CAAC,IAAI,EACjC,QAAQ,CAAC,CAAC,CAAC,CACV,KAAC,MAAM,IACL,OAAO,EAAC,aAAa,EACrB,SAAS,EAAC,YAAY,EACtB,OAAO,EAAE,QAAQ,YAEhB,WAAW,GACL,CACV,CAAC,CAAC,CAAC,IAAI,IACI,GACT,CACR,CAAC;AAAA,CACH"}

package/dist/console/fleet-table.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"fleet-table.d.ts","sourceRoot":"","sources":["../../src/console/fleet-table.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,wBAAwB,EAAc,MAAM,OAAO,CAAC;AAElE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAWnD,MAAM,MAAM,eAAe,GAAG,wBAAwB,CAAC,KAAK,CAAC,GAAG;IAC9D,OAAO,EAAE,cAAc,EAAE,CAAC;IAC1B,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;CACtC,CAAC;AAeF,QAAA,MAAM,UAAU;;;;kDA6Gf,CAAC;AAGF,OAAO,EAAE,UAAU,EAAE,CAAC"}
+{"version":3,"file":"fleet-table.d.ts","sourceRoot":"","sources":["../../src/console/fleet-table.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,wBAAwB,EAAc,MAAM,OAAO,CAAC;AAElE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAWnD,MAAM,MAAM,eAAe,GAAG,wBAAwB,CAAC,KAAK,CAAC,GAAG;IAC9D,OAAO,EAAE,cAAc,EAAE,CAAC;IAC1B,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;CACtC,CAAC;AAeF,QAAA,MAAM,UAAU;;;;kDA4Gf,CAAC;AAGF,OAAO,EAAE,UAAU,EAAE,CAAC"}

package/dist/console/fleet-table.js

@@ -1,5 +1,6 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { UserX } from 'lucide-react';
 import { forwardRef } from 'react';
 import { cn } from '../lib/cn.js';
 import { Badge } from '../primitives/badge.js';
@@ -21,23 +22,26 @@ const statusBadgeVariant = {
 const FleetTable = forwardRef(({ className, clients, headSeq, onEvict, ...props }, ref) => {
     return (_jsx("div", { ref: ref, className: cn('w-full', className), ...props, children: _jsxs(Table, { children: [
                 _jsx(TableHeader, { children: _jsxs(TableRow, { children: [
-                            _jsx(TableHead, { children: "Client" }), _jsx(TableHead, { children: "Status" }), _jsx(TableHead, { children: "Type" }), _jsx(TableHead, { children: "Cursor" }), _jsx(TableHead, { children: "Lag" }), _jsx(TableHead, { children: "Dialect" }), _jsx(TableHead, { children: "Mode" }), onEvict && _jsx(TableHead, { children: "Actions" })] }) }), _jsx(TableBody, { children: clients.map((client) => {
+                            _jsx(TableHead, { className: "w-[160px]", children: "Client" }), _jsx(TableHead, { className: "w-[70px]", children: "Status" }), _jsx(TableHead, { className: "w-[60px]", children: "Type" }), _jsx(TableHead, { className: "w-[80px]", children: "Cursor" }), _jsx(TableHead, { className: "w-[110px]", children: "Lag" }), _jsx(TableHead, { className: "w-[60px]", children: "Dialect" }), _jsx(TableHead, { className: "flex-1", children: "Mode" })
+                        ] }) }), _jsx(TableBody, { children: clients.map((client) => {
                         const lag = Math.max(0, headSeq - client.cursor);
                         const pct = headSeq > 0
                             ? Math.min(100, (client.cursor / headSeq) * 100)
                             : 100;
                         const lagColor = getLagColor(lag);
-                        return (_jsxs(TableRow, { children: [
-                                _jsx(TableCell, { children: _jsxs("div", { className: "flex items-center gap-2", children: [
+                        return (_jsxs(TableRow, { className: "group relative", children: [
+                                _jsx(TableCell, { className: "w-[160px]", children: _jsxs("div", { className: "flex items-center gap-2", children: [
                                             _jsx("span", { className: "w-1.5 h-1.5 rounded-full flex-shrink-0", style: {
                                                     background: lagColor,
                                                     boxShadow: `0 0 4px ${lagColor}`,
                                                 } }), _jsx("span", { className: "font-mono text-[11px] text-white truncate", title: client.id, children: client.id.length > 18
                                                     ? `${client.id.substring(0, 18)}\u2026`
                                                     : client.id })
-                                        ] }) }), _jsx(TableCell, { children: _jsx(Badge, { variant: statusBadgeVariant[client.status], children: client.status }) }), _jsx(TableCell, { children: _jsx("span", { className: "font-mono text-[10px] text-neutral-400", children: client.type }) }), _jsx(TableCell, { children: _jsxs("span", { className: "font-mono text-[11px] text-white font-medium", children: ["#", client.cursor.toLocaleString()] }) }), _jsx(TableCell, { children: _jsxs("div", { className: "flex items-center gap-2", children: [
+                                        ] }) }), _jsx(TableCell, { className: "w-[70px]", children: _jsx(Badge, { variant: statusBadgeVariant[client.status], children: client.status }) }), _jsx(TableCell, { className: "w-[60px]", children: _jsx("span", { className: "font-mono text-[10px] text-neutral-400", children: client.type }) }), _jsx(TableCell, { className: "w-[80px]", children: _jsxs("span", { className: "font-mono text-[11px] text-white font-medium", children: ["#", client.cursor.toLocaleString()] }) }), _jsx(TableCell, { className: "w-[110px]", children: _jsxs("div", { className: "flex items-center gap-2", children: [
                                             _jsx("div", { className: "w-[60px] h-[3px] rounded-full bg-surface overflow-hidden", children: _jsx("div", { className: "h-full rounded-full transition-all", style: { width: `${pct}%`, background: lagColor } }) }), _jsx("span", { className: "font-mono text-[10px] font-medium", style: { color: lagColor }, children: lag === 0 ? '0' : `${lag}` })
-                                        ] }) }), _jsx(TableCell, { children: _jsx("span", { className: "font-mono text-[10px] text-neutral-400", children: client.dialect }) }), _jsx(TableCell, { children: _jsx(Badge, { variant: client.mode === 'realtime' ? 'flow' : 'ghost', children: client.mode }) }), onEvict && (_jsx(TableCell, { children: _jsx("button", { type: "button", onClick: () => onEvict(client.id), className: "inline-flex items-center gap-1 rounded-md font-mono text-[9px] px-2 py-1 border border-transparent text-neutral-600 hover:border-offline/50 hover:text-offline hover:bg-offline/[0.06] cursor-pointer transition-all opacity-0 group-hover:opacity-100", children: "evict" }) }))] }, client.id));
+                                        ] }) }), _jsx(TableCell, { className: "w-[60px]", children: _jsx("span", { className: "font-mono text-[10px] text-neutral-400", children: client.dialect }) }), _jsx(TableCell, { className: "flex-1", children: _jsx(Badge, { variant: client.mode === 'realtime' ? 'flow' : 'ghost', children: client.mode }) }), onEvict && (_jsxs("button", { type: "button", title: "Evict client", onClick: () => onEvict(client.id), className: "absolute right-2 top-1/2 -translate-y-1/2 flex items-center gap-1 px-1.5 py-0.5 rounded text-[9px] text-neutral-600 hover:text-offline hover:bg-offline/10 cursor-pointer transition-colors opacity-0 group-hover:opacity-100", children: [
+                                        _jsx(UserX, { size: 10 }),
+                                        "evict"] }))] }, client.id));
                     }) })
             ] }) }));
 });

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

@@ -1 +1 @@
-{"version":3,"file":"fleet-table.js","sourceRoot":"","sources":["../../src/console/fleet-table.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"fleet-table.js","sourceRoot":"","sources":["../../src/console/fleet-table.tsx"],"names":[],"mappings":"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"}

package/dist/primitives/badge.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"badge.d.ts","sourceRoot":"","sources":["../../src/primitives/badge.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAE,KAAK,wBAAwB,EAAc,MAAM,OAAO,CAAC;AAGlE,QAAA,MAAM,aAAa;;8EAqBlB,CAAC;AAEF,KAAK,UAAU,GAAG,wBAAwB,CAAC,MAAM,CAAC,GAChD,YAAY,CAAC,OAAO,aAAa,CAAC,CAAC;AAErC,QAAA,MAAM,KAAK;;iIAQV,CAAC;AAGF,OAAO,EAAE,KAAK,EAAE,aAAa,EAAE,CAAC;AAChC,YAAY,EAAE,UAAU,EAAE,CAAC"}
+{"version":3,"file":"badge.d.ts","sourceRoot":"","sources":["../../src/primitives/badge.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAE,KAAK,wBAAwB,EAAc,MAAM,OAAO,CAAC;AAGlE,QAAA,MAAM,aAAa;;8EAqBlB,CAAC;AAEF,KAAK,UAAU,GAAG,wBAAwB,CAAC,MAAM,CAAC,GAChD,YAAY,CAAC,OAAO,aAAa,CAAC,CAAC;AAErC,QAAA,MAAM,KAAK;;iIASV,CAAC;AAGF,OAAO,EAAE,KAAK,EAAE,aAAa,EAAE,CAAC;AAChC,YAAY,EAAE,UAAU,EAAE,CAAC"}

package/dist/primitives/badge.js

@@ -3,7 +3,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { cva } from 'class-variance-authority';
 import { forwardRef } from 'react';
 import { cn } from '../lib/cn.js';
-const badgeVariants = cva('inline-flex items-center gap-1 px-2 py-0.5 rounded-sm font-mono text-[9px] uppercase tracking-wider', {
+const badgeVariants = cva('inline-flex items-center gap-1 px-2 py-0.5 rounded-sm font-mono text-[9px] leading-normal uppercase tracking-wider', {
     variants: {
         variant: {
             default: 'bg-white/[0.05] text-neutral-300 border border-border-bright',
@@ -22,7 +22,7 @@ const badgeVariants = cva('inline-flex items-center gap-1 px-2 py-0.5 rounded-sm
         variant: 'default',
     },
 });
-const Badge = forwardRef(({ className, variant, ...props }, ref) => (_jsx("span", { ref: ref, className: cn(badgeVariants({ variant, className })), ...props })));
+const Badge = forwardRef(({ className, variant, style, ...props }, ref) => (_jsx("span", { ref: ref, className: cn(badgeVariants({ variant, className })), style: { lineHeight: 1, ...style }, ...props })));
 Badge.displayName = 'Badge';
 export { Badge, badgeVariants };
 //# sourceMappingURL=badge.js.map

package/dist/primitives/badge.js.map

@@ -1 +1 @@
-{"version":3,"file":"badge.js","sourceRoot":"","sources":["../../src/primitives/badge.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,GAAG,EAAqB,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAiC,UAAU,EAAE,MAAM,OAAO,CAAC;AAClE,OAAO,EAAE,EAAE,EAAE,MAAM,WAAW,CAAC;AAE/B,MAAM,aAAa,GAAG,GAAG,CACvB,qGAAqG,EACrG;IACE,QAAQ,EAAE;QACR,OAAO,EAAE;YACP,OAAO,EAAE,8DAA8D;YACvE,WAAW,EAAE,qDAAqD;YAClE,KAAK,EAAE,6DAA6D;YACpE,OAAO,EAAE,6DAA6D;YACtE,SAAS,EAAE,gDAAgD;YAC3D,OAAO,EAAE,qDAAqD;YAC9D,OAAO,EAAE,qDAAqD;YAC9D,OAAO,EAAE,qDAAqD;YAC9D,IAAI,EAAE,4CAA4C;YAClD,KAAK,EAAE,+CAA+C;SACvD;KACF;IACD,eAAe,EAAE;QACf,OAAO,EAAE,SAAS;KACnB;CACF,CACF,CAAC;AAKF,MAAM,KAAK,GAAG,UAAU,CACtB,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE,CAAC,CACzC,eACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,aAAa,CAAC,EAAE,OAAO,EAAE,SAAS,EAAE,CAAC,CAAC,KAChD,KAAK,GACT,CACH,CACF,CAAC;AACF,KAAK,CAAC,WAAW,GAAG,OAAO,CAAC;AAE5B,OAAO,EAAE,KAAK,EAAE,aAAa,EAAE,CAAC"}
+{"version":3,"file":"badge.js","sourceRoot":"","sources":["../../src/primitives/badge.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,GAAG,EAAqB,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAiC,UAAU,EAAE,MAAM,OAAO,CAAC;AAClE,OAAO,EAAE,EAAE,EAAE,MAAM,WAAW,CAAC;AAE/B,MAAM,aAAa,GAAG,GAAG,CACvB,oHAAoH,EACpH;IACE,QAAQ,EAAE;QACR,OAAO,EAAE;YACP,OAAO,EAAE,8DAA8D;YACvE,WAAW,EAAE,qDAAqD;YAClE,KAAK,EAAE,6DAA6D;YACpE,OAAO,EAAE,6DAA6D;YACtE,SAAS,EAAE,gDAAgD;YAC3D,OAAO,EAAE,qDAAqD;YAC9D,OAAO,EAAE,qDAAqD;YAC9D,OAAO,EAAE,qDAAqD;YAC9D,IAAI,EAAE,4CAA4C;YAClD,KAAK,EAAE,+CAA+C;SACvD;KACF;IACD,eAAe,EAAE;QACf,OAAO,EAAE,SAAS;KACnB;CACF,CACF,CAAC;AAKF,MAAM,KAAK,GAAG,UAAU,CACtB,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE,CAAC,CAChD,eACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,aAAa,CAAC,EAAE,OAAO,EAAE,SAAS,EAAE,CAAC,CAAC,EACpD,KAAK,EAAE,EAAE,UAAU,EAAE,CAAC,EAAE,GAAG,KAAK,EAAE,KAC9B,KAAK,GACT,CACH,CACF,CAAC;AACF,KAAK,CAAC,WAAW,GAAG,OAAO,CAAC;AAE5B,OAAO,EAAE,KAAK,EAAE,aAAa,EAAE,CAAC"}

package/dist/primitives/table.d.ts

@@ -1,8 +1,8 @@
-declare const Table: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>, "ref"> & import("react").RefAttributes<HTMLTableElement>>;
-declare const TableHeader: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, "ref"> & import("react").RefAttributes<HTMLTableSectionElement>>;
-declare const TableBody: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, "ref"> & import("react").RefAttributes<HTMLTableSectionElement>>;
-declare const TableRow: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement>, "ref"> & import("react").RefAttributes<HTMLTableRowElement>>;
-declare const TableHead: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").ThHTMLAttributes<HTMLTableHeaderCellElement>, HTMLTableHeaderCellElement>, "ref"> & import("react").RefAttributes<HTMLTableCellElement>>;
-declare const TableCell: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement>, "ref"> & import("react").RefAttributes<HTMLTableCellElement>>;
+declare const Table: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+declare const TableHeader: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+declare const TableBody: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+declare const TableRow: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+declare const TableHead: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+declare const TableCell: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 export { Table, TableHeader, TableBody, TableRow, TableHead, TableCell };
 //# sourceMappingURL=table.d.ts.map

package/dist/primitives/table.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"table.d.ts","sourceRoot":"","sources":["../../src/primitives/table.tsx"],"names":[],"mappings":"AAKA,QAAA,MAAM,KAAK,sNAIV,CAAC;AAGF,QAAA,MAAM,WAAW,sOAKf,CAAC;AAGH,QAAA,MAAM,SAAS,sOAKb,CAAC;AAGH,QAAA,MAAM,QAAQ,0NAYZ,CAAC;AAGH,QAAA,MAAM,SAAS,2OAYb,CAAC;AAGH,QAAA,MAAM,SAAS,uOASb,CAAC;AAGH,OAAO,EAAE,KAAK,EAAE,WAAW,EAAE,SAAS,EAAE,QAAQ,EAAE,SAAS,EAAE,SAAS,EAAE,CAAC"}
+{"version":3,"file":"table.d.ts","sourceRoot":"","sources":["../../src/primitives/table.tsx"],"names":[],"mappings":"AAKA,QAAA,MAAM,KAAK,2MAUV,CAAC;AAGF,QAAA,MAAM,WAAW,2MAKhB,CAAC;AAGF,QAAA,MAAM,SAAS,2MAKd,CAAC;AAGF,QAAA,MAAM,QAAQ,2MAcb,CAAC;AAGF,QAAA,MAAM,SAAS,2MAcd,CAAC;AAGF,QAAA,MAAM,SAAS,2MAad,CAAC;AAGF,OAAO,EAAE,KAAK,EAAE,WAAW,EAAE,SAAS,EAAE,QAAQ,EAAE,SAAS,EAAE,SAAS,EAAE,CAAC"}

package/dist/primitives/table.js

@@ -2,17 +2,17 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 import { cn } from '../lib/cn.js';
-const Table = forwardRef(({ className, ...props }, ref) => (_jsx("table", { ref: ref, className: cn('w-full', className), ...props })));
+const Table = forwardRef(({ className, ...props }, ref) => (_jsx("div", { ref: ref, role: "table", className: cn('w-full', className), ...props })));
 Table.displayName = 'Table';
-const TableHeader = forwardRef(({ className, ...props }, ref) => (_jsx("thead", { ref: ref, className: cn(className), ...props })));
+const TableHeader = forwardRef(({ className, ...props }, ref) => (_jsx("div", { ref: ref, role: "rowgroup", className: cn(className), ...props })));
 TableHeader.displayName = 'TableHeader';
-const TableBody = forwardRef(({ className, ...props }, ref) => (_jsx("tbody", { ref: ref, className: cn(className), ...props })));
+const TableBody = forwardRef(({ className, ...props }, ref) => (_jsx("div", { ref: ref, role: "rowgroup", className: cn(className), ...props })));
 TableBody.displayName = 'TableBody';
-const TableRow = forwardRef(({ className, ...props }, ref) => (_jsx("tr", { ref: ref, className: cn('font-mono text-[11px] leading-7 px-4 flex items-center gap-4 border-b border-[#141414] hover:bg-white/[0.015] transition-colors cursor-default', className), ...props })));
+const TableRow = forwardRef(({ className, ...props }, ref) => (_jsx("div", { ref: ref, role: "row", className: cn('font-mono text-[11px] leading-6 px-4 flex items-center gap-4 border-b border-[#141414] hover:bg-white/[0.015] transition-colors cursor-default', className), ...props })));
 TableRow.displayName = 'TableRow';
-const TableHead = forwardRef(({ className, ...props }, ref) => (_jsx("th", { ref: ref, className: cn('font-mono text-[9px] text-neutral-600 uppercase tracking-wider leading-6 bg-white/[0.01] text-left', className), ...props })));
+const TableHead = forwardRef(({ className, ...props }, ref) => (_jsx("div", { ref: ref, role: "columnheader", className: cn('min-w-0 font-mono text-[9px] text-neutral-600 uppercase tracking-wider leading-6 bg-white/[0.01] text-left truncate', className), ...props })));
 TableHead.displayName = 'TableHead';
-const TableCell = forwardRef(({ className, ...props }, ref) => (_jsx("td", { ref: ref, className: cn('whitespace-nowrap overflow-hidden text-ellipsis', className), ...props })));
+const TableCell = forwardRef(({ className, ...props }, ref) => (_jsx("div", { ref: ref, role: "cell", className: cn('min-w-0 whitespace-nowrap overflow-hidden text-ellipsis', className), ...props })));
 TableCell.displayName = 'TableCell';
 export { Table, TableHeader, TableBody, TableRow, TableHead, TableCell };
 //# sourceMappingURL=table.js.map

package/dist/primitives/table.js.map

@@ -1 +1 @@
-{"version":3,"file":"table.js","sourceRoot":"","sources":["../../src/primitives/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,MAAM,KAAK,GAAG,UAAU,CACtB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE,CAAC,CAChC,gBAAO,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,EAAE,CAAC,QAAQ,EAAE,SAAS,CAAC,KAAM,KAAK,GAAI,CACnE,CACF,CAAC;AACF,KAAK,CAAC,WAAW,GAAG,OAAO,CAAC;AAE5B,MAAM,WAAW,GAAG,UAAU,CAG5B,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE,CAAC,CAClC,gBAAO,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,EAAE,CAAC,SAAS,CAAC,KAAM,KAAK,GAAI,CACzD,CAAC,CAAC;AACH,WAAW,CAAC,WAAW,GAAG,aAAa,CAAC;AAExC,MAAM,SAAS,GAAG,UAAU,CAG1B,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE,CAAC,CAClC,gBAAO,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,EAAE,CAAC,SAAS,CAAC,KAAM,KAAK,GAAI,CACzD,CAAC,CAAC;AACH,SAAS,CAAC,WAAW,GAAG,WAAW,CAAC;AAEpC,MAAM,QAAQ,GAAG,UAAU,CAGzB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE,CAAC,CAClC,aACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CACX,gJAAgJ,EAChJ,SAAS,CACV,KACG,KAAK,GACT,CACH,CAAC,CAAC;AACH,QAAQ,CAAC,WAAW,GAAG,UAAU,CAAC;AAElC,MAAM,SAAS,GAAG,UAAU,CAG1B,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE,CAAC,CAClC,aACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CACX,oGAAoG,EACpG,SAAS,CACV,KACG,KAAK,GACT,CACH,CAAC,CAAC;AACH,SAAS,CAAC,WAAW,GAAG,WAAW,CAAC;AAEpC,MAAM,SAAS,GAAG,UAAU,CAG1B,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE,CAAC,CAClC,aACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,iDAAiD,EAAE,SAAS,CAAC,KACvE,KAAK,GACT,CACH,CAAC,CAAC;AACH,SAAS,CAAC,WAAW,GAAG,WAAW,CAAC;AAEpC,OAAO,EAAE,KAAK,EAAE,WAAW,EAAE,SAAS,EAAE,QAAQ,EAAE,SAAS,EAAE,SAAS,EAAE,CAAC"}
+{"version":3,"file":"table.js","sourceRoot":"","sources":["../../src/primitives/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,MAAM,KAAK,GAAG,UAAU,CACtB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE,CAAC,CAEhC,cACE,GAAG,EAAE,GAAG,EACR,IAAI,EAAC,OAAO,EACZ,SAAS,EAAE,EAAE,CAAC,QAAQ,EAAE,SAAS,CAAC,KAC9B,KAAK,GACT,CACH,CACF,CAAC;AACF,KAAK,CAAC,WAAW,GAAG,OAAO,CAAC;AAE5B,MAAM,WAAW,GAAG,UAAU,CAC5B,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE,CAAC,CAEhC,cAAK,GAAG,EAAE,GAAG,EAAE,IAAI,EAAC,UAAU,EAAC,SAAS,EAAE,EAAE,CAAC,SAAS,CAAC,KAAM,KAAK,GAAI,CACvE,CACF,CAAC;AACF,WAAW,CAAC,WAAW,GAAG,aAAa,CAAC;AAExC,MAAM,SAAS,GAAG,UAAU,CAC1B,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE,CAAC,CAEhC,cAAK,GAAG,EAAE,GAAG,EAAE,IAAI,EAAC,UAAU,EAAC,SAAS,EAAE,EAAE,CAAC,SAAS,CAAC,KAAM,KAAK,GAAI,CACvE,CACF,CAAC;AACF,SAAS,CAAC,WAAW,GAAG,WAAW,CAAC;AAEpC,MAAM,QAAQ,GAAG,UAAU,CACzB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE,CAAC,CAGhC,cACE,GAAG,EAAE,GAAG,EACR,IAAI,EAAC,KAAK,EACV,SAAS,EAAE,EAAE,CACX,gJAAgJ,EAChJ,SAAS,CACV,KACG,KAAK,GACT,CACH,CACF,CAAC;AACF,QAAQ,CAAC,WAAW,GAAG,UAAU,CAAC;AAElC,MAAM,SAAS,GAAG,UAAU,CAC1B,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE,CAAC,CAGhC,cACE,GAAG,EAAE,GAAG,EACR,IAAI,EAAC,cAAc,EACnB,SAAS,EAAE,EAAE,CACX,qHAAqH,EACrH,SAAS,CACV,KACG,KAAK,GACT,CACH,CACF,CAAC;AACF,SAAS,CAAC,WAAW,GAAG,WAAW,CAAC;AAEpC,MAAM,SAAS,GAAG,UAAU,CAC1B,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE,CAAC,CAEhC,cACE,GAAG,EAAE,GAAG,EACR,IAAI,EAAC,MAAM,EACX,SAAS,EAAE,EAAE,CACX,yDAAyD,EACzD,SAAS,CACV,KACG,KAAK,GACT,CACH,CACF,CAAC;AACF,SAAS,CAAC,WAAW,GAAG,WAAW,CAAC;AAEpC,OAAO,EAAE,KAAK,EAAE,WAAW,EAAE,SAAS,EAAE,QAAQ,EAAE,SAAS,EAAE,SAAS,EAAE,CAAC"}

package/dist/styles.css

@@ -52,6 +52,7 @@
     --tracking-wider: 0.05em;
     --tracking-widest: 0.1em;
     --leading-tight: 1.25;
+    --leading-normal: 1.5;
     --leading-relaxed: 1.625;
     --ease-out: cubic-bezier(0, 0, 0.2, 1);
     --animate-spin: spin 1s linear infinite;
@@ -270,6 +271,9 @@
   .right-0 {
     right: calc(var(--spacing) * 0);
   }
+  .right-2 {
+    right: calc(var(--spacing) * 2);
+  }
   .right-5 {
     right: calc(var(--spacing) * 5);
   }
@@ -572,17 +576,17 @@
   .w-\[80px\] {
     width: 80px;
   }
-  .w-\[90px\] {
-    width: 90px;
-  }
   .w-\[100px\] {
     width: 100px;
   }
+  .w-\[110px\] {
+    width: 110px;
+  }
   .w-\[120px\] {
     width: 120px;
   }
-  .w-\[140px\] {
-    width: 140px;
+  .w-\[160px\] {
+    width: 160px;
   }
   .w-\[400px\] {
     width: 400px;
@@ -795,6 +799,9 @@
       margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));
     }
   }
+  .self-start {
+    align-self: flex-start;
+  }
   .truncate {
     overflow: hidden;
     text-overflow: ellipsis;
@@ -1504,6 +1511,10 @@
     --tw-leading: 1;
     line-height: 1;
   }
+  .leading-normal {
+    --tw-leading: var(--leading-normal);
+    line-height: var(--leading-normal);
+  }
   .leading-relaxed {
     --tw-leading: var(--leading-relaxed);
     line-height: var(--leading-relaxed);
@@ -1746,6 +1757,11 @@
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
+  .transition-opacity {
+    transition-property: opacity;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
   .transition-transform {
     transition-property: transform, translate, scale, rotate;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -1880,16 +1896,6 @@
       }
     }
   }
-  .hover\:border-offline\/50 {
-    &:hover {
-      @media (hover: hover) {
-        border-color: var(--syncular-color-offline);
-        @supports (color: color-mix(in lab, red, red)) {
-          border-color: color-mix(in oklab, var(--syncular-color-offline) 50%, transparent);
-        }
-      }
-    }
-  }
   .hover\:bg-blue-600 {
     &:hover {
       @media (hover: hover) {
@@ -1947,22 +1953,22 @@
       }
     }
   }
-  .hover\:bg-offline\/20 {
+  .hover\:bg-offline\/10 {
     &:hover {
       @media (hover: hover) {
         background-color: var(--syncular-color-offline);
         @supports (color: color-mix(in lab, red, red)) {
-          background-color: color-mix(in oklab, var(--syncular-color-offline) 20%, transparent);
+          background-color: color-mix(in oklab, var(--syncular-color-offline) 10%, transparent);
         }
       }
     }
   }
-  .hover\:bg-offline\/\[0\.06\] {
+  .hover\:bg-offline\/20 {
     &:hover {
       @media (hover: hover) {
         background-color: var(--syncular-color-offline);
         @supports (color: color-mix(in lab, red, red)) {
-          background-color: color-mix(in oklab, var(--syncular-color-offline) 6%, transparent);
+          background-color: color-mix(in oklab, var(--syncular-color-offline) 20%, transparent);
         }
       }
     }
@@ -2004,6 +2010,16 @@
       }
     }
   }
+  .hover\:bg-white\/\[0\.05\] {
+    &:hover {
+      @media (hover: hover) {
+        background-color: color-mix(in srgb, #fff 5%, transparent);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--color-white) 5%, transparent);
+        }
+      }
+    }
+  }
   .hover\:bg-white\/\[0\.015\] {
     &:hover {
       @media (hover: hover) {

package/package.json

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

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

@@ -4,7 +4,14 @@ import { type ComponentPropsWithoutRef, forwardRef } from 'react';
 import { cn } from '../lib/cn';
 import type { ApiKeyEntry } from '../lib/types';
 import { Badge, type BadgeProps } from '../primitives/badge';
-import { Button } from '../primitives/button';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '../primitives/table';
 
 export type ApiKeysTableProps = ComponentPropsWithoutRef<'div'> & {
   keys: ApiKeyEntry[];
@@ -24,76 +31,62 @@ const ApiKeysTable = forwardRef<HTMLDivElement, ApiKeysTableProps>(
     { className, keys, onCreateKey, onRotateKey, onRevokeKey, ...props },
     ref
   ) => (
-    <div
-      ref={ref}
-      className={cn(
-        'bg-panel border border-border rounded-lg hover:border-border-bright transition',
-        className
-      )}
-      {...props}
-    >
-      {/* Header */}
-      <div className="px-4 py-2.5 border-b border-border flex items-center justify-between">
-        <span className="font-mono text-[10px] text-neutral-500 uppercase tracking-widest">
-          API Keys
-        </span>
-        {onCreateKey && (
-          <Button variant="primary" size="sm" onClick={onCreateKey}>
-            + Create Key
-          </Button>
-        )}
-      </div>
-
-      {/* Column headers */}
-      <div className="font-mono text-[9px] tracking-wider uppercase text-neutral-600 flex items-center gap-4 px-4 leading-6 border-b border-border">
-        <span className="w-[140px]">Name</span>
-        <span className="w-[70px]">Type</span>
-        <span className="flex-1">Prefix</span>
-        <span className="w-[90px]">Created</span>
-        <span className="w-[80px] text-right">Actions</span>
-      </div>
-
-      {/* Rows */}
-      {keys.map((k, i) => (
-        <div
-          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]'
-          )}
-        >
-          <span className="w-[140px] text-white truncate">{k.name}</span>
-          <span className="w-[70px]">
-            <Badge variant={typeBadgeMap[k.type] ?? 'ghost'}>{k.type}</Badge>
-          </span>
-          <span className="flex-1 text-neutral-500 truncate">{k.prefix}</span>
-          <span className="w-[90px] text-neutral-600 truncate">
-            {k.created}
-          </span>
-          <span className="w-[80px] flex gap-2 justify-end">
-            {onRotateKey && (
-              <Button
-                variant="default"
-                size="sm"
-                className="text-[9px] px-1.5 py-0.5"
-                onClick={() => onRotateKey(k.name)}
-              >
-                Rotate
-              </Button>
-            )}
-            {onRevokeKey && (
-              <Button
-                variant="destructive"
-                size="sm"
-                className="text-[9px] px-1.5 py-0.5"
-                onClick={() => onRevokeKey(k.name)}
-              >
-                Revoke
-              </Button>
-            )}
-          </span>
-        </div>
-      ))}
+    <div ref={ref} className={cn('w-full', className)} {...props}>
+      <Table>
+        <TableHeader>
+          <TableRow>
+            <TableHead>Name</TableHead>
+            <TableHead>Type</TableHead>
+            <TableHead>Prefix</TableHead>
+            <TableHead>Created</TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {keys.map((k, i) => (
+            <TableRow
+              key={`${k.name}:${k.prefix}:${i}`}
+              className="group relative"
+            >
+              <TableCell>
+                <span className="text-white truncate">{k.name}</span>
+              </TableCell>
+              <TableCell>
+                <Badge variant={typeBadgeMap[k.type] ?? 'ghost'}>
+                  {k.type}
+                </Badge>
+              </TableCell>
+              <TableCell>
+                <span className="text-neutral-500 truncate">{k.prefix}</span>
+              </TableCell>
+              <TableCell>
+                <span className="text-neutral-600 truncate">{k.created}</span>
+              </TableCell>
+              {(onRotateKey || onRevokeKey) && (
+                <div className="absolute right-2 top-1/2 -translate-y-1/2 flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
+                  {onRotateKey && (
+                    <button
+                      type="button"
+                      onClick={() => onRotateKey(k.name)}
+                      className="flex items-center gap-1 px-1.5 py-0.5 rounded text-[9px] text-neutral-600 hover:text-white hover:bg-white/[0.05] cursor-pointer transition-colors"
+                    >
+                      rotate
+                    </button>
+                  )}
+                  {onRevokeKey && (
+                    <button
+                      type="button"
+                      onClick={() => onRevokeKey(k.name)}
+                      className="flex items-center gap-1 px-1.5 py-0.5 rounded text-[9px] text-neutral-600 hover:text-offline hover:bg-offline/10 cursor-pointer transition-colors"
+                    >
+                      revoke
+                    </button>
+                  )}
+                </div>
+              )}
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
     </div>
   )
 );

package/src/console/danger-action-card.tsx

@@ -34,7 +34,11 @@ export function DangerActionCard({
         ) : null}
         {stats ? <div>{stats}</div> : null}
         {onAction ? (
-          <Button variant="destructive" onClick={onAction}>
+          <Button
+            variant="destructive"
+            className="self-start"
+            onClick={onAction}
+          >
             {actionLabel}
           </Button>
         ) : null}

package/src/console/fleet-table.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import { UserX } from 'lucide-react';
 import { type ComponentPropsWithoutRef, forwardRef } from 'react';
 import { cn } from '../lib/cn';
 import type { SyncClientNode } from '../lib/types';
@@ -39,14 +40,13 @@ const FleetTable = forwardRef<HTMLDivElement, FleetTableProps>(
         <Table>
           <TableHeader>
             <TableRow>
-              <TableHead>Client</TableHead>
-              <TableHead>Status</TableHead>
-              <TableHead>Type</TableHead>
-              <TableHead>Cursor</TableHead>
-              <TableHead>Lag</TableHead>
-              <TableHead>Dialect</TableHead>
-              <TableHead>Mode</TableHead>
-              {onEvict && <TableHead>Actions</TableHead>}
+              <TableHead className="w-[160px]">Client</TableHead>
+              <TableHead className="w-[70px]">Status</TableHead>
+              <TableHead className="w-[60px]">Type</TableHead>
+              <TableHead className="w-[80px]">Cursor</TableHead>
+              <TableHead className="w-[110px]">Lag</TableHead>
+              <TableHead className="w-[60px]">Dialect</TableHead>
+              <TableHead className="flex-1">Mode</TableHead>
             </TableRow>
           </TableHeader>
           <TableBody>
@@ -59,8 +59,8 @@ const FleetTable = forwardRef<HTMLDivElement, FleetTableProps>(
               const lagColor = getLagColor(lag);
 
               return (
-                <TableRow key={client.id}>
-                  <TableCell>
+                <TableRow key={client.id} className="group relative">
+                  <TableCell className="w-[160px]">
                     <div className="flex items-center gap-2">
                       <span
                         className="w-1.5 h-1.5 rounded-full flex-shrink-0"
@@ -79,22 +79,22 @@ const FleetTable = forwardRef<HTMLDivElement, FleetTableProps>(
                       </span>
                     </div>
                   </TableCell>
-                  <TableCell>
+                  <TableCell className="w-[70px]">
                     <Badge variant={statusBadgeVariant[client.status]}>
                       {client.status}
                     </Badge>
                   </TableCell>
-                  <TableCell>
+                  <TableCell className="w-[60px]">
                     <span className="font-mono text-[10px] text-neutral-400">
                       {client.type}
                     </span>
                   </TableCell>
-                  <TableCell>
+                  <TableCell className="w-[80px]">
                     <span className="font-mono text-[11px] text-white font-medium">
                       #{client.cursor.toLocaleString()}
                     </span>
                   </TableCell>
-                  <TableCell>
+                  <TableCell className="w-[110px]">
                     <div className="flex items-center gap-2">
                       <div className="w-[60px] h-[3px] rounded-full bg-surface overflow-hidden">
                         <div
@@ -110,12 +110,12 @@ const FleetTable = forwardRef<HTMLDivElement, FleetTableProps>(
                       </span>
                     </div>
                   </TableCell>
-                  <TableCell>
+                  <TableCell className="w-[60px]">
                     <span className="font-mono text-[10px] text-neutral-400">
                       {client.dialect}
                     </span>
                   </TableCell>
-                  <TableCell>
+                  <TableCell className="flex-1">
                     <Badge
                       variant={client.mode === 'realtime' ? 'flow' : 'ghost'}
                     >
@@ -123,15 +123,15 @@ const FleetTable = forwardRef<HTMLDivElement, FleetTableProps>(
                     </Badge>
                   </TableCell>
                   {onEvict && (
-                    <TableCell>
-                      <button
-                        type="button"
-                        onClick={() => onEvict(client.id)}
-                        className="inline-flex items-center gap-1 rounded-md font-mono text-[9px] px-2 py-1 border border-transparent text-neutral-600 hover:border-offline/50 hover:text-offline hover:bg-offline/[0.06] cursor-pointer transition-all opacity-0 group-hover:opacity-100"
-                      >
-                        evict
-                      </button>
-                    </TableCell>
+                    <button
+                      type="button"
+                      title="Evict client"
+                      onClick={() => onEvict(client.id)}
+                      className="absolute right-2 top-1/2 -translate-y-1/2 flex items-center gap-1 px-1.5 py-0.5 rounded text-[9px] text-neutral-600 hover:text-offline hover:bg-offline/10 cursor-pointer transition-colors opacity-0 group-hover:opacity-100"
+                    >
+                      <UserX size={10} />
+                      evict
+                    </button>
                   )}
                 </TableRow>
               );

package/src/primitives/badge.tsx

@@ -5,7 +5,7 @@ import { type ComponentPropsWithoutRef, forwardRef } from 'react';
 import { cn } from '../lib/cn';
 
 const badgeVariants = cva(
-  'inline-flex items-center gap-1 px-2 py-0.5 rounded-sm font-mono text-[9px] uppercase tracking-wider',
+  'inline-flex items-center gap-1 px-2 py-0.5 rounded-sm font-mono text-[9px] leading-normal uppercase tracking-wider',
   {
     variants: {
       variant: {
@@ -31,10 +31,11 @@ type BadgeProps = ComponentPropsWithoutRef<'span'> &
   VariantProps<typeof badgeVariants>;
 
 const Badge = forwardRef<HTMLSpanElement, BadgeProps>(
-  ({ className, variant, ...props }, ref) => (
+  ({ className, variant, style, ...props }, ref) => (
     <span
       ref={ref}
       className={cn(badgeVariants({ variant, className }))}
+      style={{ lineHeight: 1, ...style }}
       {...props}
     />
   )

package/src/primitives/table.tsx

@@ -3,69 +3,83 @@
 import { type ComponentPropsWithoutRef, forwardRef } from 'react';
 import { cn } from '../lib/cn';
 
-const Table = forwardRef<HTMLTableElement, ComponentPropsWithoutRef<'table'>>(
+const Table = forwardRef<HTMLDivElement, ComponentPropsWithoutRef<'div'>>(
   ({ className, ...props }, ref) => (
-    <table ref={ref} className={cn('w-full', className)} {...props} />
+    // biome-ignore lint/a11y/useSemanticElements: using div for flex layout compatibility
+    <div
+      ref={ref}
+      role="table"
+      className={cn('w-full', className)}
+      {...props}
+    />
   )
 );
 Table.displayName = 'Table';
 
-const TableHeader = forwardRef<
-  HTMLTableSectionElement,
-  ComponentPropsWithoutRef<'thead'>
->(({ className, ...props }, ref) => (
-  <thead ref={ref} className={cn(className)} {...props} />
-));
+const TableHeader = forwardRef<HTMLDivElement, ComponentPropsWithoutRef<'div'>>(
+  ({ className, ...props }, ref) => (
+    // biome-ignore lint/a11y/useSemanticElements: using div for flex layout compatibility
+    <div ref={ref} role="rowgroup" className={cn(className)} {...props} />
+  )
+);
 TableHeader.displayName = 'TableHeader';
 
-const TableBody = forwardRef<
-  HTMLTableSectionElement,
-  ComponentPropsWithoutRef<'tbody'>
->(({ className, ...props }, ref) => (
-  <tbody ref={ref} className={cn(className)} {...props} />
-));
+const TableBody = forwardRef<HTMLDivElement, ComponentPropsWithoutRef<'div'>>(
+  ({ className, ...props }, ref) => (
+    // biome-ignore lint/a11y/useSemanticElements: using div for flex layout compatibility
+    <div ref={ref} role="rowgroup" className={cn(className)} {...props} />
+  )
+);
 TableBody.displayName = 'TableBody';
 
-const TableRow = forwardRef<
-  HTMLTableRowElement,
-  ComponentPropsWithoutRef<'tr'>
->(({ className, ...props }, ref) => (
-  <tr
-    ref={ref}
-    className={cn(
-      'font-mono text-[11px] leading-7 px-4 flex items-center gap-4 border-b border-[#141414] hover:bg-white/[0.015] transition-colors cursor-default',
-      className
-    )}
-    {...props}
-  />
-));
+const TableRow = forwardRef<HTMLDivElement, ComponentPropsWithoutRef<'div'>>(
+  ({ className, ...props }, ref) => (
+    // biome-ignore lint/a11y/useSemanticElements: using div for flex layout compatibility
+    // biome-ignore lint/a11y/useFocusableInteractive: presentational table row, not interactive
+    <div
+      ref={ref}
+      role="row"
+      className={cn(
+        'font-mono text-[11px] leading-6 px-4 flex items-center gap-4 border-b border-[#141414] hover:bg-white/[0.015] transition-colors cursor-default',
+        className
+      )}
+      {...props}
+    />
+  )
+);
 TableRow.displayName = 'TableRow';
 
-const TableHead = forwardRef<
-  HTMLTableCellElement,
-  ComponentPropsWithoutRef<'th'>
->(({ className, ...props }, ref) => (
-  <th
-    ref={ref}
-    className={cn(
-      'font-mono text-[9px] text-neutral-600 uppercase tracking-wider leading-6 bg-white/[0.01] text-left',
-      className
-    )}
-    {...props}
-  />
-));
+const TableHead = forwardRef<HTMLDivElement, ComponentPropsWithoutRef<'div'>>(
+  ({ className, ...props }, ref) => (
+    // biome-ignore lint/a11y/useSemanticElements: using div for flex layout compatibility
+    // biome-ignore lint/a11y/useFocusableInteractive: presentational column header, not interactive
+    <div
+      ref={ref}
+      role="columnheader"
+      className={cn(
+        'min-w-0 font-mono text-[9px] text-neutral-600 uppercase tracking-wider leading-6 bg-white/[0.01] text-left truncate',
+        className
+      )}
+      {...props}
+    />
+  )
+);
 TableHead.displayName = 'TableHead';
 
-const TableCell = forwardRef<
-  HTMLTableCellElement,
-  ComponentPropsWithoutRef<'td'>
->(({ className, ...props }, ref) => (
-  <td
-    ref={ref}
-    className={cn('whitespace-nowrap overflow-hidden text-ellipsis', className)}
-    {...props}
-  />
-));
+const TableCell = forwardRef<HTMLDivElement, ComponentPropsWithoutRef<'div'>>(
+  ({ className, ...props }, ref) => (
+    // biome-ignore lint/a11y/useSemanticElements: using div for flex layout compatibility
+    <div
+      ref={ref}
+      role="cell"
+      className={cn(
+        'min-w-0 whitespace-nowrap overflow-hidden text-ellipsis',
+        className
+      )}
+      {...props}
+    />
+  )
+);
 TableCell.displayName = 'TableCell';
 
 export { Table, TableHeader, TableBody, TableRow, TableHead, TableCell };