fix: make kumo adapters server safe

components/ui/card.tsx

@@ -1,19 +1,21 @@
 import * as React from "react";
-import { LayerCard } from "@cloudflare/kumo/components/layer-card";
 
 import { cn } from "@/lib/utils";
 
 export function Card({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): React.ReactElement {
   return (
-    <LayerCard
-      className={cn("rounded-lg border border-kumo-line bg-kumo-base text-card-foreground shadow-sm", className)}
+    <div
+      className={cn(
+        "overflow-hidden rounded-lg border border-kumo-line bg-kumo-base text-card-foreground shadow-sm",
+        className,
+      )}
       {...props}
     />
   );
 }
 
 export function CardHeader({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): React.ReactElement {
-  return <LayerCard.Secondary className={cn("flex flex-col gap-1.5 p-5", className)} {...props} />;
+  return <div className={cn("flex flex-col gap-1.5 bg-kumo-elevated p-5", className)} {...props} />;
 }
 
 export function CardTitle({ className, ...props }: React.HTMLAttributes<HTMLHeadingElement>): React.ReactElement {
@@ -25,5 +27,5 @@ export function CardDescription({ className, ...props }: React.HTMLAttributes<HT
 }
 
 export function CardContent({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): React.ReactElement {
-  return <LayerCard.Primary className={cn("p-5 pt-0", className)} {...props} />;
+  return <div className={cn("bg-kumo-base p-5 pt-0", className)} {...props} />;
 }

components/ui/table.tsx

@@ -1 +1,154 @@
-export { Table, type KumoTableLayout, type KumoTableRowVariant } from "@cloudflare/kumo/components/table";
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+export type KumoTableLayout = "auto" | "fixed";
+export type KumoTableRowVariant = "default" | "selected";
+
+type TableProps = React.TableHTMLAttributes<HTMLTableElement> & {
+  layout?: KumoTableLayout;
+};
+
+type TableHeaderProps = React.HTMLAttributes<HTMLTableSectionElement> & {
+  sticky?: boolean;
+  variant?: "default" | "compact";
+};
+
+type StickyColumn = "left" | "right";
+
+type TableHeadProps = React.ThHTMLAttributes<HTMLTableCellElement> & {
+  sticky?: StickyColumn;
+};
+
+type TableRowProps = React.HTMLAttributes<HTMLTableRowElement> & {
+  variant?: KumoTableRowVariant;
+};
+
+type TableCellProps = React.TdHTMLAttributes<HTMLTableCellElement> & {
+  sticky?: StickyColumn;
+};
+
+function stickyClass(sticky?: StickyColumn): string | undefined {
+  if (sticky === "left") {
+    return "sticky left-0 z-10 bg-kumo-base";
+  }
+
+  if (sticky === "right") {
+    return "sticky right-0 z-10 bg-kumo-base";
+  }
+
+  return undefined;
+}
+
+const TableRoot = React.forwardRef<HTMLTableElement, TableProps>(function Table(
+  { className, layout = "auto", ...props },
+  ref,
+): React.ReactElement {
+  return (
+    <table
+      ref={ref}
+      className={cn("border-collapse text-kumo-default", layout === "fixed" && "table-fixed", className)}
+      {...props}
+    />
+  );
+});
+
+const TableHeader = React.forwardRef<HTMLTableSectionElement, TableHeaderProps>(function TableHeader(
+  { className, sticky, variant, ...props },
+  ref,
+): React.ReactElement {
+  return (
+    <thead
+      ref={ref}
+      className={cn(
+        "border-b border-kumo-line",
+        sticky && "sticky top-0 z-20",
+        variant === "compact" && "text-xs",
+        className,
+      )}
+      {...props}
+    />
+  );
+});
+
+const TableHead = React.forwardRef<HTMLTableCellElement, TableHeadProps>(function TableHead(
+  { className, sticky, ...props },
+  ref,
+): React.ReactElement {
+  return (
+    <th
+      ref={ref}
+      className={cn("text-left font-medium text-kumo-subtle", stickyClass(sticky), className)}
+      {...props}
+    />
+  );
+});
+
+const TableBody = React.forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>(
+  function TableBody({ className, ...props }, ref): React.ReactElement {
+    return <tbody ref={ref} className={cn("divide-y divide-kumo-line", className)} {...props} />;
+  },
+);
+
+const TableRow = React.forwardRef<HTMLTableRowElement, TableRowProps>(function TableRow(
+  { className, variant = "default", ...props },
+  ref,
+): React.ReactElement {
+  return (
+    <tr
+      ref={ref}
+      className={cn(
+        "transition-colors",
+        variant === "selected" && "bg-kumo-tint",
+        className,
+      )}
+      {...props}
+    />
+  );
+});
+
+const TableCell = React.forwardRef<HTMLTableCellElement, TableCellProps>(function TableCell(
+  { className, sticky, ...props },
+  ref,
+): React.ReactElement {
+  return <td ref={ref} className={cn("text-kumo-default", stickyClass(sticky), className)} {...props} />;
+});
+
+const TableFooter = React.forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>(
+  function TableFooter({ className, ...props }, ref): React.ReactElement {
+    return <tfoot ref={ref} className={cn("border-t border-kumo-line bg-kumo-recessed", className)} {...props} />;
+  },
+);
+
+const TableResizeHandle = React.forwardRef<HTMLButtonElement, React.ButtonHTMLAttributes<HTMLButtonElement>>(
+  function TableResizeHandle({ className, type = "button", ...props }, ref): React.ReactElement {
+    return (
+      <button
+        ref={ref}
+        className={cn("h-full w-1 cursor-col-resize bg-transparent hover:bg-kumo-line", className)}
+        type={type}
+        {...props}
+      />
+    );
+  },
+);
+
+type TableComponent = typeof TableRoot & {
+  Header: typeof TableHeader;
+  Head: typeof TableHead;
+  Row: typeof TableRow;
+  Body: typeof TableBody;
+  Cell: typeof TableCell;
+  Footer: typeof TableFooter;
+  ResizeHandle: typeof TableResizeHandle;
+};
+
+export const Table = Object.assign(TableRoot, {
+  Header: TableHeader,
+  Head: TableHead,
+  Row: TableRow,
+  Body: TableBody,
+  Cell: TableCell,
+  Footer: TableFooter,
+  ResizeHandle: TableResizeHandle,
+}) satisfies TableComponent;