datool 0.0.1

package/src/client/components/connection-status.tsx

@@ -0,0 +1,43 @@
+import { cn } from "@/lib/utils"
+
+type ConnectionStatusProps = {
+  isConnected: boolean
+  isConnecting: boolean
+  className?: string
+}
+
+export function ConnectionStatus({
+  isConnected,
+  isConnecting,
+  className,
+}: ConnectionStatusProps) {
+  const status = isConnected
+    ? {
+        dotClassName: "bg-emerald-500",
+        label: "Connected",
+        textClassName: "text-emerald-600 dark:text-emerald-400",
+      }
+      : isConnecting
+      ? {
+          dotClassName: "bg-amber-500",
+          label: "Connecting",
+          textClassName: "text-amber-600 dark:text-amber-400",
+        }
+      : {
+          dotClassName: "bg-muted-foreground/60",
+          label: "Disconnected",
+          textClassName: "text-muted-foreground",
+        }
+
+  return (
+    <div
+      className={cn("inline-flex items-center gap-2 text-xs font-medium", className)}
+    >
+      <span
+        aria-hidden="true"
+        className={cn("size-2 rounded-full", status.dotClassName)}
+      />
+      <span className={status.textClassName}>{status.label}</span>
+    </div>
+  )
+}

package/src/client/components/data-table-cell.tsx

@@ -0,0 +1,235 @@
+/* eslint-disable react-refresh/only-export-components */
+import { flexRender, type Cell } from "@tanstack/react-table"
+import { Check, Minus } from "lucide-react"
+import * as React from "react"
+
+import type { DataTableColumnKind } from "./data-table-col-icon"
+import type { DataTableColumnMeta } from "./data-table-header-col"
+import { cn } from "@/lib/utils"
+
+function getAlignmentClassName(align: DataTableColumnMeta["align"] = "left") {
+  switch (align) {
+    case "center":
+      return "justify-center text-center"
+    case "right":
+      return "justify-end text-right"
+    default:
+      return "justify-start text-left"
+  }
+}
+
+function formatDate(value: string | number | Date) {
+  const date = value instanceof Date ? value : new Date(value)
+
+  if (Number.isNaN(date.getTime())) {
+    return String(value)
+  }
+
+  return new Intl.DateTimeFormat(undefined, {
+    dateStyle: "medium",
+  }).format(date)
+}
+
+function formatNumber(value: number) {
+  return new Intl.NumberFormat(undefined, {
+    maximumFractionDigits: Number.isInteger(value) ? 0 : 2,
+  }).format(value)
+}
+
+function fallbackCellValue(value: unknown, kind?: DataTableColumnKind) {
+  if (value === null || value === undefined || value === "") {
+    return <span className="text-muted-foreground">-</span>
+  }
+
+  if (kind === "boolean" || typeof value === "boolean") {
+    return (
+      <span
+        className={cn(
+          "inline-flex min-w-16 items-center justify-center rounded-full border px-2 py-1 text-[11px] font-medium",
+          value
+            ? "border-border bg-accent text-accent-foreground"
+            : "border-border bg-muted text-muted-foreground"
+        )}
+      >
+        {value ? "True" : "False"}
+      </span>
+    )
+  }
+
+  if (kind === "number" || typeof value === "number") {
+    return formatNumber(Number(value))
+  }
+
+  if (kind === "date" || value instanceof Date) {
+    return formatDate(value as string | number | Date)
+  }
+
+  if (Array.isArray(value) || typeof value === "object") {
+    return (
+      <code className="rounded bg-muted px-1.5 py-1 font-mono text-[11px] text-muted-foreground">
+        {JSON.stringify(value)}
+      </code>
+    )
+  }
+
+  return String(value)
+}
+
+function renderHighlightedTextParts(value: string, terms: string[]) {
+  const normalizedTerms = Array.from(
+    new Set(terms.map((term) => term.trim()).filter(Boolean))
+  ).sort((left, right) => right.length - left.length)
+
+  if (normalizedTerms.length === 0) {
+    return [value]
+  }
+
+  const pattern = new RegExp(
+    `(${normalizedTerms
+      .map((term) => term.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"))
+      .join("|")})`,
+    "gi"
+  )
+  const parts = value.split(pattern)
+
+  return parts.map((part, index) => {
+    const matched = normalizedTerms.some(
+      (term) => part.toLowerCase() === term.toLowerCase()
+    )
+
+    if (!matched) {
+      return <React.Fragment key={`${part}-${index}`}>{part}</React.Fragment>
+    }
+
+    return (
+      <mark
+        className="rounded-sm bg-primary/20 ring-2 ring-primary/20 dark:bg-primary/50 dark:text-white dark:ring-primary/80"
+        key={`${part}-${index}`}
+      >
+        {part}
+      </mark>
+    )
+  })
+}
+
+function renderHighlightedText(
+  value: string,
+  terms: string[],
+  rendered: React.ReactNode
+) {
+  const highlightedParts = renderHighlightedTextParts(value, terms)
+
+  if (React.isValidElement(rendered)) {
+    const element = rendered as React.ReactElement<{
+      children?: React.ReactNode
+    }>
+
+    if (typeof element.props.children === "string") {
+      return React.cloneElement(element, undefined, highlightedParts)
+    }
+  }
+
+  return <span className="whitespace-pre-wrap">{highlightedParts}</span>
+}
+
+export function DataTableCheckbox({
+  checked,
+  indeterminate,
+  onCheckedChange,
+  ariaLabel,
+}: {
+  checked: boolean
+  indeterminate?: boolean
+  onCheckedChange: (checked: boolean) => void
+  ariaLabel: string
+}) {
+  const ref = React.useRef<HTMLInputElement>(null)
+
+  React.useEffect(() => {
+    if (!ref.current) {
+      return
+    }
+
+    ref.current.indeterminate = Boolean(indeterminate) && !checked
+  }, [checked, indeterminate])
+
+  return (
+    <label className="inline-flex cursor-pointer items-center justify-center">
+      <input
+        ref={ref}
+        aria-label={ariaLabel}
+        checked={checked}
+        className="peer sr-only"
+        onChange={(event) => onCheckedChange(event.target.checked)}
+        type="checkbox"
+      />
+      <span
+        className={cn(
+          "flex size-5 items-center justify-center rounded-[6px] border border-border bg-background text-primary-foreground shadow-xs transition-colors peer-focus-visible:ring-2 peer-focus-visible:ring-ring/50",
+          (checked || indeterminate) && "border-primary bg-primary"
+        )}
+      >
+        {indeterminate && !checked ? <Minus className="size-3.5" /> : null}
+        {checked ? <Check className="size-3.5" /> : null}
+      </span>
+    </label>
+  )
+}
+
+export function DataTableBodyCell<TData>({
+  cell,
+  highlightTerms = [],
+  paddingLeft,
+  paddingRight,
+}: {
+  cell: Cell<TData, unknown>
+  highlightTerms?: string[]
+  paddingLeft?: React.CSSProperties["paddingLeft"]
+  paddingRight?: React.CSSProperties["paddingRight"]
+}) {
+  const meta = (cell.column.columnDef.meta ?? {}) as DataTableColumnMeta
+  const rawValue = cell.getValue()
+  const rendered = flexRender(cell.column.columnDef.cell, cell.getContext())
+  const isSticky = meta.sticky === "left"
+  const isSelectionCell = meta.kind === "selection"
+  const shouldTruncate = meta.truncate ?? true
+  const shouldHighlight =
+    meta.kind === "text" &&
+    meta.highlightMatches !== false &&
+    typeof rawValue === "string" &&
+    highlightTerms.length > 0
+  const content = shouldHighlight
+    ? renderHighlightedText(rawValue, highlightTerms, rendered)
+    : (rendered ?? fallbackCellValue(rawValue, meta.kind))
+
+  return (
+    <td
+      data-sticky-cell={isSticky ? "true" : "false"}
+      className={cn(
+        "flex shrink-0 border-b border-border px-2 py-1.5 align-middle text-sm text-foreground",
+        getAlignmentClassName(meta.align),
+        isSticky && "sticky left-0 z-10 border-r border-r-border bg-card",
+        meta.cellClassName
+      )}
+      style={{
+        paddingLeft,
+        paddingRight,
+        width: cell.column.getSize(),
+      }}
+    >
+      <div
+        className={cn(
+          isSelectionCell
+            ? "flex w-full items-center justify-center"
+            : shouldTruncate
+              ? "min-w-0 truncate"
+              : "w-full min-w-0 break-words whitespace-normal"
+        )}
+      >
+        {content}
+      </div>
+    </td>
+  )
+}
+
+export { fallbackCellValue }

package/src/client/components/data-table-col-icon.tsx

@@ -0,0 +1,73 @@
+/* eslint-disable react-refresh/only-export-components */
+import {
+  Braces,
+  CalendarDays,
+  CheckSquare2,
+  Hash,
+  ListFilter,
+  Type,
+} from "lucide-react"
+import type { LucideProps } from "lucide-react"
+import type { ComponentType } from "react"
+
+export type DataTableColumnKind =
+  | "text"
+  | "enum"
+  | "number"
+  | "boolean"
+  | "date"
+  | "json"
+  | "selection"
+
+const iconMap: Record<DataTableColumnKind, ComponentType<LucideProps>> = {
+  text: Type,
+  enum: ListFilter,
+  number: Hash,
+  boolean: CheckSquare2,
+  date: CalendarDays,
+  json: Braces,
+  selection: CheckSquare2,
+}
+
+export function DataTableColIcon({
+  kind,
+  ...props
+}: { kind: DataTableColumnKind } & LucideProps) {
+  const Icon = iconMap[kind]
+
+  return <Icon {...props} />
+}
+
+function isDateString(value: string) {
+  if (!/\d{4}-\d{2}-\d{2}/.test(value)) {
+    return false
+  }
+
+  return !Number.isNaN(Date.parse(value))
+}
+
+export function inferDataTableColumnKind(values: unknown[]) {
+  const sample = values.find((value) => value !== null && value !== undefined)
+
+  if (sample instanceof Date) {
+    return "date" as const
+  }
+
+  if (typeof sample === "boolean") {
+    return "boolean" as const
+  }
+
+  if (typeof sample === "number") {
+    return "number" as const
+  }
+
+  if (typeof sample === "string" && isDateString(sample)) {
+    return "date" as const
+  }
+
+  if (sample && typeof sample === "object") {
+    return "json" as const
+  }
+
+  return "text" as const
+}

package/src/client/components/data-table-header-col.tsx

@@ -0,0 +1,225 @@
+import { flexRender, type Header } from "@tanstack/react-table"
+import { ArrowDown, ArrowUp, Search } from "lucide-react"
+import * as React from "react"
+import { createPortal } from "react-dom"
+
+import {
+  DataTableColIcon,
+  type DataTableColumnKind,
+} from "./data-table-col-icon"
+import { cn } from "@/lib/utils"
+
+export type DataTableAlign = "left" | "center" | "right"
+
+export type DataTableColumnMeta = {
+  align?: DataTableAlign
+  cellClassName?: string
+  headerClassName?: string
+  highlightMatches?: boolean
+  kind?: DataTableColumnKind
+  sticky?: "left"
+  truncate?: boolean
+}
+
+function getAlignmentClassName(align: DataTableAlign = "left") {
+  switch (align) {
+    case "center":
+      return "justify-center text-center"
+    case "right":
+      return "justify-end text-right"
+    default:
+      return "justify-start text-left"
+  }
+}
+
+function HeaderSortIcon({ sorted }: { sorted: false | "asc" | "desc" }) {
+  if (sorted === "asc") {
+    return <ArrowUp className="size-3.5 text-foreground" />
+  }
+
+  if (sorted === "desc") {
+    return <ArrowDown className="size-3.5 text-foreground" />
+  }
+
+  return null
+}
+
+export function DataTableHeaderCol<TData>({
+  header,
+  highlightEnabled = false,
+  onToggleHighlight,
+  paddingLeft,
+  paddingRight,
+  scrollContainerRef,
+}: {
+  header: Header<TData, unknown>
+  highlightEnabled?: boolean
+  onToggleHighlight?: () => void
+  paddingLeft?: React.CSSProperties["paddingLeft"]
+  paddingRight?: React.CSSProperties["paddingRight"]
+  scrollContainerRef: React.RefObject<HTMLDivElement | null>
+}) {
+  const meta = (header.column.columnDef.meta ?? {}) as DataTableColumnMeta
+  const sorted = header.column.getIsSorted()
+  const canSort = header.column.getCanSort()
+  const alignmentClassName = getAlignmentClassName(meta.align)
+  const isSticky = meta.sticky === "left"
+
+  return (
+    <th
+      className={cn(
+        "relative flex shrink-0 border-b border-gray-300 bg-background py-2 align-middle text-xs font-medium tracking-wide text-muted-foreground uppercase dark:border-border",
+        isSticky && "sticky left-0 z-20 border-r border-r-border bg-background",
+        meta.headerClassName
+      )}
+      style={{
+        width: header.getSize(),
+      }}
+    >
+      {header.isPlaceholder ? null : canSort ? (
+        <div className="flex w-full min-w-0 items-center gap-2">
+          <button
+            className={cn(
+              "flex min-w-0 flex-1 items-center gap-1.5 rounded-md px-2 py-1 transition-colors hover:bg-accent focus-visible:ring-2 focus-visible:ring-ring/50 focus-visible:outline-none",
+              alignmentClassName
+            )}
+            onClick={header.column.getToggleSortingHandler()}
+            style={{
+              paddingLeft,
+              paddingRight,
+            }}
+            type="button"
+          >
+            {meta.kind && meta.kind !== "selection" ? (
+              <DataTableColIcon
+                className="size-3.5 shrink-0 text-muted-foreground"
+                kind={meta.kind}
+              />
+            ) : null}
+            <span className="truncate font-medium text-foreground normal-case">
+              {flexRender(header.column.columnDef.header, header.getContext())}
+            </span>
+            <HeaderSortIcon sorted={sorted} />
+          </button>
+        </div>
+      ) : (
+        <div
+          className={cn(
+            "flex w-full min-w-0 items-center gap-1 px-0.5 py-1",
+            alignmentClassName
+          )}
+          style={{
+            paddingLeft,
+            paddingRight,
+          }}
+        >
+          {meta.kind && meta.kind !== "selection" ? (
+            <DataTableColIcon
+              className="size-3.5 shrink-0 text-muted-foreground"
+              kind={meta.kind}
+            />
+          ) : null}
+          <span className="truncate font-medium text-foreground normal-case">
+            {flexRender(header.column.columnDef.header, header.getContext())}
+          </span>
+          {meta.kind === "text" && onToggleHighlight ? (
+            <button
+              className={cn(
+                "inline-flex size-5 items-center justify-center rounded-sm border",
+                highlightEnabled
+                  ? "border-border bg-accent text-accent-foreground"
+                  : "border-transparent text-muted-foreground"
+              )}
+              onClick={onToggleHighlight}
+              type="button"
+            >
+              <Search className="size-3" />
+            </button>
+          ) : null}
+        </div>
+      )}
+      {header.column.getCanResize() ? (
+        <ResizeHandler
+          header={header}
+          scrollContainerRef={scrollContainerRef}
+        />
+      ) : null}
+    </th>
+  )
+}
+
+function ResizeHandler<TData>({
+  header,
+  scrollContainerRef,
+}: {
+  header: Header<TData, unknown>
+  scrollContainerRef: React.RefObject<HTMLDivElement | null>
+}) {
+  const isResizing = header.column.getIsResizing()
+  const handleRef = React.useRef<HTMLDivElement>(null)
+  const [overlayBounds, setOverlayBounds] = React.useState<{
+    bottom: number
+    left: number
+    top: number
+  } | null>(null)
+  const transform = isResizing
+    ? `translateX(${
+        header.getContext().table.getState().columnSizingInfo.deltaOffset ?? 0
+      }px)`
+    : ""
+
+  React.useLayoutEffect(() => {
+    if (!isResizing || !handleRef.current || !scrollContainerRef.current) {
+      setOverlayBounds(null)
+      return
+    }
+
+    const updateBounds = () => {
+      if (!handleRef.current || !scrollContainerRef.current) {
+        return
+      }
+
+      const handleBounds = handleRef.current.getBoundingClientRect()
+      const containerBounds = scrollContainerRef.current.getBoundingClientRect()
+
+      setOverlayBounds({
+        bottom: Math.max(window.innerHeight - containerBounds.bottom, 0),
+        left: handleBounds.left,
+        top: containerBounds.top,
+      })
+    }
+
+    updateBounds()
+    window.addEventListener("resize", updateBounds)
+
+    return () => window.removeEventListener("resize", updateBounds)
+  }, [isResizing, scrollContainerRef])
+
+  return (
+    <>
+      {isResizing && overlayBounds
+        ? createPortal(
+            <div
+              className="pointer-events-none fixed z-[100] w-1 animate-in cursor-col-resize bg-border transition-colors duration-75 zoom-in-50"
+              style={{
+                bottom: overlayBounds.bottom,
+                left: overlayBounds.left,
+                top: overlayBounds.top,
+                transform,
+              }}
+            />,
+            document.body
+          )
+        : null}
+      <div
+        ref={handleRef}
+        className={cn(
+          "absolute top-0 right-[-2px] z-[100] h-full w-1 cursor-col-resize touch-none rounded-full bg-border opacity-0 transition-opacity select-none hover:opacity-100",
+          isResizing && "opacity-100"
+        )}
+        onMouseDown={header.getResizeHandler()}
+        onTouchStart={header.getResizeHandler()}
+      />
+    </>
+  )
+}