@nbt-dev/components 0.0.5

package/src/table/data-table.tsx

@@ -0,0 +1,274 @@
+import React from "react";
+import { useBulkSubscription } from "../core/use-bulk-stream";
+import { cn } from "../core/utils";
+import { TYPE_DATETIME, TYPE_DOCUMENT } from "../generated/bulk-protocol";
+import ValuePopover, { type ValuePopoverData } from "./value-popover";
+
+const ROW_H = 22;
+const OVERSCAN = 6;
+const MIN_COL_W = 80;
+const GUTTER_W = 32;
+
+const READONLY_FIELDS = new Set(["id", "createdAt", "updatedAt"]);
+const READONLY_TYPES = new Set([TYPE_DATETIME, TYPE_DOCUMENT]);
+
+type DataTableProps = {
+  cart: string;
+  entity: string;
+  searchFields: readonly string[];
+  onSelectRow: (rowJson: Record<string, string>) => void;
+};
+
+function colWidth(name: string): number {
+  if (name === "id") return 220;
+  if (name === "createdAt" || name === "updatedAt") return 180;
+  if (name === "email" || name === "phone") return 180;
+  if (name.endsWith("At")) return 180;
+  return Math.max(MIN_COL_W, Math.min(240, name.length * 9 + 24));
+}
+
+const DataTable: React.FC<DataTableProps> = ({ cart, entity, searchFields, onSelectRow }) => {
+  const stream = useBulkSubscription(cart, entity);
+  const scrollerRef = React.useRef<HTMLDivElement | null>(null);
+  const [scrollTop, setScrollTop] = React.useState(0);
+  const [viewportH, setViewportH] = React.useState(0);
+  const [query, setQuery] = React.useState("");
+  const [selected, setSelected] = React.useState<{ r: number; c: number } | null>(null);
+  const [popover, setPopover] = React.useState<ValuePopoverData | null>(null);
+  // Bump on every chunk arrival without re-rendering each FRAME_DATA.
+  const [tick, setTick] = React.useState(0);
+
+  React.useEffect(() => {
+    stream.setOnRender(() => setTick((n) => n + 1));
+    return () => stream.setOnRender(null);
+  }, [stream]);
+
+  React.useEffect(() => {
+    const el = scrollerRef.current;
+    if (!el) return;
+    const ro = new ResizeObserver(() => setViewportH(el.clientHeight));
+    ro.observe(el);
+    setViewportH(el.clientHeight);
+    return () => ro.disconnect();
+  }, []);
+
+  const rows = stream.store.rows;
+  const columns = stream.columns;
+
+  const totalH = rows.length * ROW_H;
+  const start = Math.max(0, Math.floor(scrollTop / ROW_H) - OVERSCAN);
+  const visibleCount = Math.max(0, Math.ceil(viewportH / ROW_H) + OVERSCAN * 2);
+  const end = Math.min(rows.length, start + visibleCount);
+
+  const onSearchKey = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === "Enter") {
+      stream.search(query.trim());
+    } else if (e.key === "Escape") {
+      setQuery("");
+      stream.clearSearch();
+    }
+  };
+
+  const handleRowClick = (rowIdx: number) => {
+    const r = rows[rowIdx];
+    if (!r) return;
+    const out: Record<string, string> = {};
+    for (let i = 0; i < columns.length; i++) out[columns[i]!.name] = r[i] ?? "";
+    onSelectRow(out);
+  };
+
+  const searchDisabled = searchFields.length === 0;
+  const totalColW = GUTTER_W + columns.reduce((s, c) => s + colWidth(c.name), 0);
+  const idColIndex = columns.findIndex((c) => c.name === "id");
+
+  const scrollRowIntoView = (r: number) => {
+    const el = scrollerRef.current;
+    if (!el) return;
+    const top = r * ROW_H;
+    if (top < el.scrollTop) el.scrollTop = top;
+    else if (top + ROW_H > el.scrollTop + el.clientHeight)
+      el.scrollTop = top + ROW_H - el.clientHeight;
+  };
+
+  const onKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {
+    if (rows.length === 0 || columns.length === 0) return;
+    if ((e.metaKey || e.ctrlKey) && (e.key === "c" || e.key === "C")) {
+      if (!selected) return;
+      const v = rows[selected.r]?.[selected.c] ?? "";
+      void navigator.clipboard?.writeText(v);
+      e.preventDefault();
+      return;
+    }
+    const cur = selected ?? { r: start, c: 0 };
+    let { r, c } = cur;
+    if (e.key === "ArrowUp") r--;
+    else if (e.key === "ArrowDown") r++;
+    else if (e.key === "ArrowLeft") c--;
+    else if (e.key === "ArrowRight") c++;
+    else return;
+    e.preventDefault();
+    r = Math.max(0, Math.min(rows.length - 1, r));
+    c = Math.max(0, Math.min(columns.length - 1, c));
+    setSelected({ r, c });
+    setPopover(null);
+    scrollRowIntoView(r);
+  };
+
+  return (
+    <div className="flex h-full flex-col bg-background">
+      <div className="flex h-7 shrink-0 items-center gap-2 border-b border-border px-2">
+        <input
+          type="text"
+          value={query}
+          disabled={searchDisabled}
+          onChange={(e) => setQuery(e.target.value)}
+          onKeyDown={onSearchKey}
+          placeholder={
+            searchDisabled
+              ? "Search disabled (no @@search declared)"
+              : `Search ${searchFields.join(", ")}  ⏎`
+          }
+          className={cn(
+            "h-5 flex-1 rounded-sm border border-border bg-background px-2 text-[12px] outline-none",
+            "placeholder:text-muted-foreground/70 focus:border-accent-foreground/30",
+            searchDisabled && "opacity-50 cursor-not-allowed",
+          )}
+        />
+        <div className="shrink-0 text-[11px] text-muted-foreground tabular-nums">
+          {stream.error ? (
+            <span className="text-red-400">{stream.error}</span>
+          ) : !stream.connected ? (
+            <span>connecting…</span>
+          ) : (
+            <span>
+              {stream.loadedRows.toLocaleString()} / {stream.totalRows.toLocaleString()} rows
+              {stream.streaming ? " · streaming" : ""}
+            </span>
+          )}
+        </div>
+      </div>
+
+      {columns.length === 0 ? (
+        <div className="flex flex-1 items-center justify-center text-[12px] text-muted-foreground">
+          {stream.error ? stream.error : "Waiting for schema…"}
+        </div>
+      ) : (
+        <div
+          ref={scrollerRef}
+          tabIndex={0}
+          onKeyDown={onKeyDown}
+          onScroll={(e) => {
+            setScrollTop((e.target as HTMLDivElement).scrollTop);
+            if (popover) setPopover(null);
+          }}
+          className="group/table relative min-h-0 flex-1 overflow-auto font-mono outline-none"
+        >
+          <div style={{ width: totalColW }}>
+            {/* Sticky header lives inside the scroller so it shares the native
+                horizontal scroll with the rows — no JS transform sync, no jitter. */}
+            <div
+              className="sticky top-0 z-10 flex h-6 select-none border-b border-border bg-background text-[11px] uppercase tracking-wider text-muted-foreground"
+              style={{ width: totalColW }}
+            >
+              <div
+                style={{ width: GUTTER_W }}
+                className="shrink-0 border-r border-border"
+              />
+              {columns.map((c) => (
+                <div
+                  key={c.name}
+                  style={{ width: colWidth(c.name) }}
+                  className="flex items-center overflow-hidden border-r border-border px-2"
+                >
+                  <span className="truncate">{c.name}</span>
+                </div>
+              ))}
+            </div>
+
+            <div style={{ height: totalH, width: totalColW, position: "relative" }}>
+              {rows.slice(start, end).map((row, i) => {
+                const rowIdx = start + i;
+                return (
+                  <div
+                    key={rowIdx}
+                    style={{
+                      top: rowIdx * ROW_H,
+                      height: ROW_H,
+                      width: totalColW,
+                    }}
+                    className={cn(
+                      "absolute left-0 flex text-[12px] leading-none",
+                      rowIdx % 2 === 0 ? "bg-background" : "bg-muted/20",
+                    )}
+                  >
+                    <button
+                      type="button"
+                      title="Open row detail"
+                      onClick={() => handleRowClick(rowIdx)}
+                      style={{ width: GUTTER_W }}
+                      className={cn(
+                        "flex shrink-0 items-center justify-center border-r border-border/60",
+                        "cursor-pointer text-[10px] tabular-nums text-muted-foreground/60",
+                        "hover:bg-accent hover:text-accent-foreground",
+                      )}
+                    >
+                      {rowIdx + 1}
+                    </button>
+                    {columns.map((c, ci) => {
+                      const isSel = selected?.r === rowIdx && selected?.c === ci;
+                      return (
+                        <div
+                          key={c.name}
+                          data-selected={isSel}
+                          onClick={(e) => {
+                            e.stopPropagation();
+                            setSelected({ r: rowIdx, c: ci });
+                            setPopover(null);
+                          }}
+                          onDoubleClick={(e) => {
+                            e.stopPropagation();
+                            setSelected({ r: rowIdx, c: ci });
+                            const editable =
+                              idColIndex >= 0 &&
+                              !READONLY_FIELDS.has(c.name) &&
+                              !READONLY_TYPES.has(c.type);
+                            setPopover({
+                              r: rowIdx,
+                              c: ci,
+                              colName: c.name,
+                              value: row[ci] ?? "",
+                              rect: (e.currentTarget as HTMLElement).getBoundingClientRect(),
+                              cart,
+                              entity,
+                              rowId: idColIndex >= 0 ? row[idColIndex] ?? "" : "",
+                              colType: c.type,
+                              editable,
+                            });
+                          }}
+                          style={{ width: colWidth(c.name) }}
+                          className={cn(
+                            "flex cursor-pointer items-center overflow-hidden border-r border-border/60 px-2",
+                            "data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground",
+                            "data-[selected=true]:[box-shadow:inset_0_0_0_1px_#60a5fa]",
+                          )}
+                          title={row[ci]}
+                        >
+                          <span className="truncate">{row[ci]}</span>
+                        </div>
+                      );
+                    })}
+                  </div>
+                );
+              })}
+            </div>
+          </div>
+        </div>
+      )}
+      {popover ? <ValuePopover data={popover} onClose={() => setPopover(null)} /> : null}
+      {/* tick is bumped on each data chunk to force a re-render of the rows. */}
+      {tick < 0 && <span />}
+    </div>
+  );
+};
+
+export default DataTable;

package/src/table/index.ts

@@ -0,0 +1,5 @@
+// DataTable streams one entity off the shared bulk socket — mount inside a
+// <BulkStreamProvider registry={...}> (see core).
+export { default as DataTable } from "./data-table";
+export { default as ValuePopover } from "./value-popover";
+export type { ValuePopoverData } from "./value-popover";

package/src/table/value-popover.tsx

@@ -0,0 +1,230 @@
+import React from "react";
+import { createPortal } from "react-dom";
+import { cn } from "../core/utils";
+import { useDevToolsConfig } from "../core/config";
+import {
+  TYPE_U8,
+  TYPE_U16,
+  TYPE_U32,
+  TYPE_U64,
+  TYPE_S8,
+  TYPE_S16,
+  TYPE_S32,
+  TYPE_S64,
+  TYPE_BOOL,
+  TYPE_FLOAT32,
+  TYPE_FLOAT64,
+} from "../generated/bulk-protocol";
+
+const WIDTH = 420;
+
+export type ValuePopoverData = {
+  r: number;
+  c: number;
+  colName: string;
+  value: string;
+  rect: DOMRect;
+  cart: string;
+  entity: string;
+  rowId: string;
+  colType: number;
+  editable: boolean;
+};
+
+const INT_TYPES = new Set([
+  TYPE_U8, TYPE_U16, TYPE_U32, TYPE_U64,
+  TYPE_S8, TYPE_S16, TYPE_S32, TYPE_S64,
+]);
+const FLOAT_TYPES = new Set([TYPE_FLOAT32, TYPE_FLOAT64]);
+
+function position(rect: DOMRect): React.CSSProperties {
+  const margin = 12;
+  const left = Math.max(
+    margin,
+    Math.min(rect.left, window.innerWidth - WIDTH - margin),
+  );
+  const roomBelow = window.innerHeight - rect.bottom;
+  const top = roomBelow >= 180 ? rect.bottom + 6 : Math.max(margin, rect.top - 188);
+  return { left, top, width: WIDTH };
+}
+
+// Coerce the edited string to the JSON value the update handler expects for the
+// column's wire type. Returns the value or an error string.
+function coerce(draft: string, colType: number): { value: unknown } | { error: string } {
+  if (colType === TYPE_BOOL) return { value: draft === "true" };
+  if (INT_TYPES.has(colType)) {
+    const n = Number(draft);
+    if (!Number.isInteger(n)) return { error: "Expected an integer" };
+    return { value: n };
+  }
+  if (FLOAT_TYPES.has(colType)) {
+    const n = Number(draft);
+    if (!Number.isFinite(n)) return { error: "Expected a number" };
+    return { value: n };
+  }
+  return { value: draft };
+}
+
+const ValuePopover: React.FC<{ data: ValuePopoverData; onClose: () => void }> = ({
+  data,
+  onClose,
+}) => {
+  const { apiBaseUrl } = useDevToolsConfig();
+  const [copied, setCopied] = React.useState(false);
+  const [draft, setDraft] = React.useState(data.value);
+  const [saving, setSaving] = React.useState(false);
+  const [error, setError] = React.useState<string | null>(null);
+
+  React.useEffect(() => {
+    setDraft(data.value);
+    setError(null);
+  }, [data.value, data.r, data.c]);
+
+  React.useEffect(() => {
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === "Escape") onClose();
+    };
+    document.addEventListener("keydown", onKey);
+    return () => document.removeEventListener("keydown", onKey);
+  }, [onClose]);
+
+  const copy = async () => {
+    try {
+      await navigator.clipboard.writeText(data.value);
+      setCopied(true);
+    } catch {
+      /* clipboard unavailable */
+    }
+  };
+
+  const save = async () => {
+    const result = coerce(draft, data.colType);
+    if ("error" in result) {
+      setError(result.error);
+      return;
+    }
+    setSaving(true);
+    setError(null);
+    try {
+      const r = await fetch(
+        `${apiBaseUrl}/api/${data.cart}/${data.entity.toLowerCase()}/${encodeURIComponent(data.rowId)}`,
+        {
+          method: "PUT",
+          credentials: "include",
+          headers: { "content-type": "application/json" },
+          body: JSON.stringify({ [data.colName]: result.value }),
+        },
+      );
+      if (!r.ok) {
+        setError((await r.text()) || `HTTP ${r.status}`);
+        setSaving(false);
+        return;
+      }
+      // Success: the update handler broadcasts FRAME_DELTA_UPD, which refreshes
+      // the row in place — just close.
+      onClose();
+    } catch (e) {
+      setError(e instanceof Error ? e.message : String(e));
+      setSaving(false);
+    }
+  };
+
+  const isBool = data.colType === TYPE_BOOL;
+  const isNumeric = INT_TYPES.has(data.colType) || FLOAT_TYPES.has(data.colType);
+
+  return createPortal(
+    <>
+      <div className="fixed inset-0 z-[60]" onClick={onClose} />
+      <div
+        className={cn(
+          "nimbit-devtools dark fixed z-[61] rounded-md border border-border bg-popover p-3",
+          "text-[12px] text-popover-foreground shadow-lg",
+        )}
+        style={position(data.rect)}
+        onClick={(e) => e.stopPropagation()}
+      >
+        <div className="mb-2 flex items-center justify-between gap-3">
+          <div className="min-w-0">
+            <div className="truncate font-medium text-foreground">{data.colName}</div>
+            <div className="text-[11px] text-muted-foreground">Row {data.r + 1}</div>
+          </div>
+          <div className="flex shrink-0 items-center gap-1.5">
+            <button
+              type="button"
+              onClick={copy}
+              className={cn(
+                "rounded border border-border px-2 py-1 text-[11px] leading-none",
+                "hover:bg-accent hover:text-accent-foreground",
+              )}
+            >
+              {copied ? "Copied" : "Copy"}
+            </button>
+            {data.editable ? (
+              <button
+                type="button"
+                onClick={save}
+                disabled={saving}
+                className={cn(
+                  "rounded border border-border bg-primary/90 px-2 py-1 text-[11px] leading-none text-primary-foreground",
+                  "hover:bg-primary disabled:opacity-50",
+                )}
+              >
+                {saving ? "Saving…" : "Save"}
+              </button>
+            ) : null}
+          </div>
+        </div>
+
+        {data.editable ? (
+          <>
+            {isBool ? (
+              <select
+                value={draft}
+                disabled={saving}
+                onChange={(e) => setDraft(e.target.value)}
+                className="w-full rounded-sm border border-border bg-background px-2 py-1 text-[12px] outline-none focus:border-accent-foreground/30"
+              >
+                <option value="true">true</option>
+                <option value="false">false</option>
+              </select>
+            ) : isNumeric ? (
+              <input
+                type="number"
+                value={draft}
+                disabled={saving}
+                autoFocus
+                onChange={(e) => setDraft(e.target.value)}
+                onKeyDown={(e) => {
+                  if (e.key === "Enter") void save();
+                }}
+                className="w-full rounded-sm border border-border bg-background px-2 py-1 font-mono text-[12px] outline-none focus:border-accent-foreground/30"
+              />
+            ) : (
+              <textarea
+                value={draft}
+                disabled={saving}
+                autoFocus
+                onChange={(e) => setDraft(e.target.value)}
+                className="max-h-48 min-h-[3rem] w-full resize-y overflow-auto rounded-sm border border-border bg-background p-2 font-mono text-[11px] leading-5 outline-none focus:border-accent-foreground/30"
+              />
+            )}
+            {error ? (
+              <div className="mt-2 break-words text-[11px] text-red-400">{error}</div>
+            ) : null}
+          </>
+        ) : (
+          <div className="max-h-48 overflow-auto rounded-sm bg-muted/40 p-2 font-mono text-[11px] leading-5 whitespace-pre-wrap break-words">
+            {data.value.length > 0 ? (
+              data.value
+            ) : (
+              <span className="font-sans italic text-muted-foreground">(empty)</span>
+            )}
+          </div>
+        )}
+      </div>
+    </>,
+    document.body,
+  );
+};
+
+export default ValuePopover;