@hienlh/ppm 0.23.12 → 0.23.14

package/src/web/components/database/grid/columns-panel.tsx

@@ -0,0 +1,241 @@
+/**
+ * DBGate's panel beside a table's grid, inside the tab: Columns, then Filters (and References in
+ * phase 04d), each folding away. Columns lists every column of the table — a checkbox that shows or
+ * hides it in the grid, its key, link or # icon, its name (bold is NOT NULL), its full type, and →
+ * the table a foreign key refers to — and clicking a name scrolls the grid to it. Hiding a column
+ * reads nothing again: the rows keep it, since Save, the form view and references need their keys.
+ *
+ * The panel's edge drags it between 170 and 420px (← and → move it too). In a narrow tab it floats
+ * over the grid instead of squeezing it, and Esc or a click on the grid puts it away.
+ */
+import { useEffect, useRef, useState, type KeyboardEvent, type PointerEvent, type ReactNode } from "react";
+import { ArrowRight, Eye, EyeOff, Hash, Key, Link } from "@/lib/icons";
+import { cn } from "@/lib/utils";
+import type { GridColumnSchema } from "../glide-grid-types";
+import { isAutoIncrement } from "../glide-grid-types";
+import { EmptyState, Highlight, SearchBox, SectionHeader, linkButtonClass, toolbarButtonClass } from "../explorer/tree-parts";
+import { PANEL_WIDTH, clampPanelWidth } from "./table-view-state";
+
+/** The columns a search keeps, in the table's order. */
+export function columnsMatching(schema: readonly GridColumnSchema[], query: string): GridColumnSchema[] {
+  const needle = query.trim().toLowerCase();
+  return needle ? schema.filter((c) => c.name.toLowerCase().includes(needle)) : [...schema];
+}
+
+/** A column's icon in the list, as on its title: # for an auto-increment key, a key, a link. */
+export function ColumnIcon({ col, className }: { col: GridColumnSchema; className?: string }) {
+  if (col.pk) {
+    const Icon = isAutoIncrement(col) ? Hash : Key;
+    return <Icon className={cn("shrink-0 text-warning", className)} aria-label={isAutoIncrement(col) ? "Auto-increment key" : "Primary key"} />;
+  }
+  if (col.fk) return <Link className={cn("shrink-0 text-info", className)} aria-label="Foreign key" />;
+  return <span className={cn("shrink-0", className)} aria-hidden />;
+}
+
+export function ColumnsSection({
+  schema, hidden, onHiddenChange, onJump, onOpenTable, selected, sheet = false, grow = true, collapsed, onCollapsedChange, focusSearch,
+}: {
+  schema: readonly GridColumnSchema[];
+  hidden: ReadonlySet<string>;
+  onHiddenChange: (hidden: Set<string>) => void;
+  /** A name was clicked: the grid scrolls to the column. */
+  onJump: (column: string) => void;
+  onOpenTable?: (table: string) => void;
+  /** Columns selected in the grid from their titles, lit in the list as DBGate's column manager does. */
+  selected?: ReadonlySet<string>;
+  /** In a phone's sheet: every row, checkbox and button 44px. */
+  sheet?: boolean;
+  /** Takes the panel's free height; the sheet scrolls as a whole instead. */
+  grow?: boolean;
+  collapsed: boolean;
+  onCollapsedChange: (collapsed: boolean) => void;
+  /** DBGate's Find column: the search box takes the focus — the section unfolded first — and then this is called. */
+  focusSearch?: () => void;
+}) {
+  const [query, setQuery] = useState("");
+  const searchRef = useRef<HTMLInputElement>(null);
+  useEffect(() => {
+    if (!focusSearch) return;
+    if (collapsed) {
+      onCollapsedChange(false);
+      return;
+    }
+    // Selected, so what is typed next replaces the last search.
+    searchRef.current?.focus();
+    searchRef.current?.select();
+    focusSearch();
+  }, [!!focusSearch, collapsed]); // eslint-disable-line react-hooks/exhaustive-deps -- asked, not a new callback
+  const list = columnsMatching(schema, query);
+  const setHidden = (name: string, hide: boolean) => {
+    const next = new Set(hidden);
+    if (hide) next.add(name);
+    else next.delete(name);
+    onHiddenChange(next);
+  };
+  const iconClass = sheet ? "size-[18px]" : "size-3.5";
+
+  return (
+    <section aria-label="Columns" className={cn("flex min-h-0 flex-col", grow && !collapsed && "min-h-24 flex-1")}>
+      <SectionHeader title="Columns" collapsed={collapsed} onToggle={() => onCollapsedChange(!collapsed)} />
+      {!collapsed && (
+        <>
+          <div className="flex shrink-0 items-center gap-0.5 pr-1.5 pb-1.5 pl-2">
+            <SearchBox value={query} onChange={setQuery} placeholder="Search columns" inputRef={searchRef} />
+            <button
+              type="button" onClick={() => onHiddenChange(new Set(schema.map((c) => c.name)))}
+              disabled={schema.length > 0 && hidden.size >= schema.length}
+              title="Hide all columns" aria-label="Hide all columns" className={toolbarButtonClass}
+            >
+              <EyeOff className="size-4" />
+            </button>
+            <button
+              type="button" onClick={() => onHiddenChange(new Set())} disabled={hidden.size === 0}
+              title="Show all columns" aria-label="Show all columns" className={toolbarButtonClass}
+            >
+              <Eye className="size-4" />
+            </button>
+          </div>
+          <div role="list" aria-label="Columns of the table" className={cn("min-h-0 pb-2.5", grow && "flex-1 overflow-auto")}>
+            {list.length === 0 && schema.length > 0 && (
+              <EmptyState>
+                <span>No column matches “{query.trim()}”.</span>
+                <button type="button" onClick={() => setQuery("")} className={linkButtonClass}>Clear search</button>
+              </EmptyState>
+            )}
+            {list.map((col) => {
+              const shown = !hidden.has(col.name);
+              const lit = !!selected?.has(col.name);
+              return (
+                <div
+                  key={col.name} role="listitem" data-selected={lit ? "" : undefined}
+                  className={cn(
+                    "mx-1 flex h-6 items-center gap-[5px] rounded-[5px] pr-1.5 pl-0.5 text-xs whitespace-nowrap text-text-2 select-none can-hover:hover:bg-surface-hover",
+                    sheet && "relative mx-1.5 h-11 pl-0 text-sm",
+                    lit && "bg-accent-wash text-text can-hover:hover:bg-accent-wash",
+                  )}
+                >
+                  <label className={cn("grid shrink-0 cursor-pointer place-items-center", sheet ? "relative z-10 size-11" : "size-[22px]")}>
+                    <input
+                      type="checkbox" checked={shown} onChange={(e) => setHidden(col.name, !e.target.checked)}
+                      aria-label={`Show ${col.name} in the grid`}
+                      className={cn("cursor-pointer accent-primary", sheet ? "size-5" : "size-3.5")}
+                    />
+                  </label>
+                  <ColumnIcon col={col} className={iconClass} />
+                  <button
+                    type="button" onClick={() => onJump(col.name)}
+                    title={`${col.nullable ? "" : "NOT NULL · "}${shown ? "Go to it in the grid" : "Hidden in the grid"}`}
+                    className={cn(
+                      "min-w-0 shrink truncate text-left",
+                      // On a phone the whole row goes to the column, bar the checkbox and the table link
+                      // above it: the name alone is as narrow as its word, 12px for an `id`.
+                      sheet && "self-stretch after:absolute after:inset-0",
+                      !shown ? "text-text-3" : !col.nullable && "font-semibold text-text",
+                    )}
+                  >
+                    <Highlight text={col.name} query={query} />
+                  </button>
+                  {col.fk && onOpenTable ? (
+                    <button
+                      type="button" onClick={() => onOpenTable(col.fk!.table)} title={`Open ${col.fk.table} in a new tab`}
+                      className={cn(
+                        "inline-flex shrink-0 items-center gap-0.5 rounded px-0.5 text-[11.5px] text-primary can-hover:hover:underline",
+                        sheet && "relative z-10 h-11 px-2 text-[13px]",
+                      )}
+                    >
+                      <ArrowRight className="size-3" aria-hidden />{col.fk.table}
+                    </button>
+                  ) : (
+                    <span className="min-w-0 shrink truncate pl-0.5 font-mono text-[10.5px] text-text-3">{col.type}</span>
+                  )}
+                </div>
+              );
+            })}
+          </div>
+        </>
+      )}
+    </section>
+  );
+}
+
+/** ← and → on the edge: one step. */
+const KEY_STEP = 16;
+
+/**
+ * The panel itself: docked left of the grid with a draggable edge, or — in a narrow tab — floating
+ * over it. `children` are its sections.
+ */
+export function TableSidePanel({ width, onWidthChange, floating, onClose, children }: {
+  width: number;
+  /** The edge was dragged or moved by keys; called once a drag ends, so the tab keeps one width. */
+  onWidthChange: (width: number) => void;
+  floating: boolean;
+  /** Esc, while it floats. */
+  onClose: () => void;
+  children: ReactNode;
+}) {
+  const [dragging, setDragging] = useState<number | null>(null);
+  const start = useRef<{ x: number; width: number } | null>(null);
+  const shown = dragging ?? width;
+
+  const onPointerDown = (e: PointerEvent<HTMLDivElement>) => {
+    if (e.button !== 0) return;
+    e.preventDefault();
+    e.currentTarget.setPointerCapture(e.pointerId);
+    start.current = { x: e.clientX, width };
+    setDragging(width);
+  };
+  const onPointerMove = (e: PointerEvent<HTMLDivElement>) => {
+    if (!start.current) return;
+    setDragging(clampPanelWidth(start.current.width + e.clientX - start.current.x));
+  };
+  const endDrag = (e: PointerEvent<HTMLDivElement>) => {
+    if (!start.current) return;
+    const next = clampPanelWidth(start.current.width + e.clientX - start.current.x);
+    start.current = null;
+    setDragging(null);
+    if (next !== width) onWidthChange(next);
+  };
+  const onSplitKey = (e: KeyboardEvent<HTMLDivElement>) => {
+    const step = e.key === "ArrowLeft" ? -KEY_STEP : e.key === "ArrowRight" ? KEY_STEP : 0;
+    if (!step && e.key !== "Home" && e.key !== "End") return;
+    e.preventDefault();
+    const next = e.key === "Home" ? PANEL_WIDTH.min : e.key === "End" ? PANEL_WIDTH.max : clampPanelWidth(width + step);
+    if (next !== width) onWidthChange(next);
+  };
+
+  return (
+    <>
+      <aside
+        aria-label="Columns and filters" data-table-panel
+        onKeyDown={(e) => {
+          if (!floating || e.key !== "Escape" || e.defaultPrevented) return;
+          e.preventDefault();
+          e.stopPropagation();
+          onClose();
+        }}
+        style={{ width: floating ? `min(${shown}px, 86%)` : shown }}
+        className={cn(
+          "flex shrink-0 flex-col overflow-hidden border-r border-border bg-panel",
+          floating && "absolute inset-y-0 left-0 z-30 shadow-[14px_0_34px_-14px_rgb(0_0_0/0.45)]",
+        )}
+      >
+        {children}
+      </aside>
+      {!floating && (
+        <div
+          role="separator" aria-orientation="vertical" aria-label="Resize the left panel" tabIndex={0}
+          aria-valuemin={PANEL_WIDTH.min} aria-valuemax={PANEL_WIDTH.max} aria-valuenow={shown}
+          onPointerDown={onPointerDown} onPointerMove={onPointerMove} onPointerUp={endDrag} onPointerCancel={endDrag}
+          onKeyDown={onSplitKey}
+          className={cn(
+            "relative z-10 -mr-1 -ml-[3px] w-[7px] shrink-0 cursor-col-resize touch-none outline-none",
+            "before:absolute before:inset-y-0 before:left-[3px] before:w-px before:bg-transparent",
+            "can-hover:hover:before:bg-primary focus-visible:before:bg-primary",
+            dragging !== null && "before:bg-primary",
+          )}
+        />
+      )}
+    </>
+  );
+}

package/src/web/components/database/grid/columns-sheet.tsx

@@ -0,0 +1,172 @@
+/**
+ * A phone's "Columns and filters": the panel a desktop keeps beside the grid, as one bottom sheet.
+ * Columns is the panel's list at 44px. Filters is where a phone switches a filter on or off,
+ * removes it, and starts a Multi column filter — each row opens that filter's own sheet, since a
+ * phone types a filter there and nowhere else. References, last, shows the one picked under the grid.
+ */
+import { useId, useState } from "react";
+import { AlertTriangle, Filter, Key, Link, X } from "@/lib/icons";
+import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
+import { BottomSheet } from "@/components/ui/mobile-bottom-sheet";
+import type { GridColumnSchema, GridFiltering } from "../glide-grid-types";
+import { SectionHeader } from "../explorer/tree-parts";
+import { ColumnsSection } from "./columns-panel";
+import type { GridReference, TableReferences } from "./references";
+import { ReferencesSection } from "./references-panel";
+import {
+  columnFilterState, multiFilterState, withColumnFilter, withFilterOff, withMultiFilter, type FilterState, type FilterText,
+} from "./grid-filters";
+
+/** "users · 7 of 9 columns shown" */
+export function columnsShownLabel(table: string, total: number, hidden: number): string {
+  return `${table} · ${total - hidden} of ${total} columns shown`;
+}
+
+export function ColumnsSheet({ table, schema, hidden, onHiddenChange, onJump, onOpenTable, filtering, onOpenFilter, references, focusSearch, onClose }: {
+  table: string;
+  schema: readonly GridColumnSchema[];
+  hidden: ReadonlySet<string>;
+  onHiddenChange: (hidden: Set<string>) => void;
+  onJump: (column: string) => void;
+  onOpenTable?: (table: string) => void;
+  /** Absent where the rows cannot be filtered. */
+  filtering?: GridFiltering;
+  /** A filter's own sheet: a column's, or the Multi column filter's (`null`). */
+  onOpenFilter: (column: string | null) => void;
+  /** DBGate's References; absent for a table with none. */
+  references?: { refs: TableReferences; open: GridReference | null; onOpen: (reference: GridReference) => void };
+  /** Find column: the search box takes the focus, then this is called. */
+  focusSearch?: () => void;
+  onClose: () => void;
+}) {
+  const titleId = useId();
+  const [columnsCollapsed, setColumnsCollapsed] = useState(false);
+  const [filtersCollapsed, setFiltersCollapsed] = useState(false);
+  const [referencesCollapsed, setReferencesCollapsed] = useState(false);
+  const hiddenHere = schema.filter((c) => hidden.has(c.name)).length;
+  const handOff = (open: () => void) => {
+    onClose();
+    open();
+  };
+
+  return (
+    <BottomSheet open onClose={onClose} className="popover-solid">
+      <div role="dialog" aria-modal="true" aria-labelledby={titleId} className="flex max-h-[calc(var(--sheet-vh,100dvh)*0.85)] flex-col">
+        <div className="flex shrink-0 items-center gap-2.5 pr-1.5 pb-1 pl-4">
+          <h2 id={titleId} className="min-w-0 flex-1 text-[15px] font-semibold">
+            <span className="block truncate">Columns and filters</span>
+            <small className="block truncate text-xs font-normal text-text-3">{columnsShownLabel(table, schema.length, hiddenHere)}</small>
+          </h2>
+          <button type="button" onClick={onClose} aria-label="Close" className="grid size-11 shrink-0 place-items-center rounded-lg text-text-2 active:bg-surface-hover">
+            <X className="size-5" />
+          </button>
+        </div>
+
+        <div className="min-h-0 overflow-y-auto pb-2">
+          <ColumnsSection
+            schema={schema} hidden={hidden} onHiddenChange={onHiddenChange}
+            onJump={(column) => handOff(() => onJump(column))}
+            onOpenTable={onOpenTable && ((t) => handOff(() => onOpenTable(t)))}
+            sheet grow={false} collapsed={columnsCollapsed} onCollapsedChange={setColumnsCollapsed} focusSearch={focusSearch}
+          />
+          {filtering && (
+            <section aria-label="Filters" className="border-t border-border-soft">
+              <SectionHeader title="Filters" collapsed={filtersCollapsed} onToggle={() => setFiltersCollapsed((c) => !c)} />
+              {!filtersCollapsed && <FilterRows filtering={filtering} schema={schema} onOpen={(column) => handOff(() => onOpenFilter(column))} />}
+            </section>
+          )}
+          {references && (
+            <div className="border-t border-border-soft">
+              <ReferencesSection
+                table={table} references={references.refs} open={references.open}
+                onOpen={(reference) => handOff(() => references.onOpen(reference))}
+                sheet grow={false} collapsed={referencesCollapsed} onCollapsedChange={setReferencesCollapsed}
+              />
+            </div>
+          )}
+        </div>
+
+        <div className="flex shrink-0 border-t border-border-soft px-3 pt-2.5">
+          <Button type="button" onClick={onClose} className="h-11 flex-1 text-sm">Done</Button>
+        </div>
+      </div>
+    </BottomSheet>
+  );
+}
+
+interface Row {
+  /** Null for the Multi column filter. */
+  column: string | null;
+  filter?: FilterText;
+  state: FilterState["state"];
+}
+
+const TEXT_STATE: Record<FilterState["state"], string> = {
+  empty: "text-text-3",
+  ok: "text-success",
+  off: "text-text-3 line-through",
+  bad: "text-error",
+};
+
+/** The Multi column filter first — there to be started when there is none — then each column's. */
+function FilterRows({ filtering, schema, onOpen }: {
+  filtering: GridFiltering;
+  schema: readonly GridColumnSchema[];
+  onOpen: (column: string | null) => void;
+}) {
+  const { filters, columns, onChange, errors } = filtering;
+  const byName = new Map(schema.map((c) => [c.name, c]));
+  const rows: Row[] = [
+    { column: null, filter: filters.multi, state: multiFilterState(filters.multi, columns).state },
+    ...columns.flatMap((c): Row[] => {
+      const filter = filters.columns[c.name];
+      if (!filter) return [];
+      const { state } = columnFilterState(filter, c.kind);
+      return [{ column: c.name, filter, state: state === "ok" && errors?.[c.name] ? "bad" : state }];
+    }),
+  ];
+
+  return (
+    <div className="pb-1">
+      {rows.map((row) => {
+        const col = row.column === null ? undefined : byName.get(row.column);
+        const Icon = row.state === "bad" ? AlertTriangle : row.column === null ? Filter : col?.pk ? Key : col?.fk ? Link : Filter;
+        const name = row.column ?? "Multi column filter";
+        const text = row.filter?.text.trim() ? row.filter.text : null;
+        const what = row.column === null ? "the Multi column filter" : `the ${row.column} filter`;
+        return (
+          <div key={row.column ?? "\0multi"} className="mx-1.5 flex min-h-11 items-center rounded-lg select-none">
+            <button
+              type="button" onClick={() => onOpen(row.column)}
+              aria-label={text ? `${name}: ${text}` : `${name}: none — tap to add one`}
+              className="flex min-h-11 min-w-0 flex-1 items-center gap-2.5 rounded-lg px-2.5 text-left text-sm active:bg-surface-hover"
+            >
+              <Icon className={cn("size-[18px] shrink-0", row.state === "bad" ? "text-error" : col?.pk ? "text-warning" : col?.fk ? "text-info" : "text-text-3")} aria-hidden />
+              <span className={cn("shrink-0", row.column === null && !text ? "text-text-3" : "font-semibold")}>{name}</span>
+              <span className={cn("min-w-0 truncate font-mono text-xs", TEXT_STATE[row.state])}>{text ?? "Tap to add"}</span>
+            </button>
+            {row.filter && text && (
+              <>
+                <label className="grid size-11 shrink-0 cursor-pointer place-items-center" title={row.filter.off ? "Enable this filter" : "Disable this filter"}>
+                  <input
+                    type="checkbox" checked={!row.filter.off}
+                    onChange={(e) => onChange((f) => withFilterOff(f, row.column, !e.target.checked))}
+                    aria-label={`Apply ${what}`} className="size-5 cursor-pointer accent-primary"
+                  />
+                </label>
+                <button
+                  type="button" aria-label={`Remove ${what}`} title="Remove"
+                  onClick={() => onChange((f) => (row.column === null ? withMultiFilter(f, "") : withColumnFilter(f, row.column, "")))}
+                  className="grid size-11 shrink-0 place-items-center rounded-lg text-text-3 active:bg-surface-hover"
+                >
+                  <X className="size-4" />
+                </button>
+              </>
+            )}
+          </div>
+        );
+      })}
+    </div>
+  );
+}

package/src/web/components/database/grid/copy-as.ts

@@ -0,0 +1,170 @@
+/**
+ * DBGate's Copy and Copy advanced: the rows the selection lies on by the columns it lies in, written
+ * in one of nine formats. Ctrl+C writes the one chosen with Set format (DBGate's default: the values
+ * alone, tab-separated); every value is the one the cell shows now, edits included. A cell a new row
+ * was given nothing in has no value: it is left out of JSON, YAML and SQL, and empty in text.
+ *
+ * NULL is empty in text and CSV, `null` in JSON and YAML and `NULL` in SQL. Where DBGate writes
+ * every value bare, text quotes one holding a tab, a line break or a quote — the way a spreadsheet
+ * does, so a pasted multi-line value stays one cell — and CSV quotes as RFC 4180 has it. Copied on
+ * its own, a single value is never quoted.
+ */
+import yaml from "js-yaml";
+import type { ColumnKind } from "../../../../shared/db-column-kind";
+import type { DialectName } from "../../../../shared/db-types";
+import { quoteIdentifier, sqlLiteral } from "../../../../shared/sql-identifiers";
+import { formCopyText } from "./form-view-model";
+
+export type CopyFormat =
+  | "textWithHeaders" | "textWithoutHeaders" | "headers" | "csv" | "json" | "jsonLines" | "yaml" | "inserts" | "updates";
+
+/** DBGate's: the menu item that copies in a format, and its name in "Set format: …". */
+export const COPY_FORMATS: readonly { id: CopyFormat; label: string; name: string }[] = [
+  { id: "textWithHeaders", label: "Copy with headers", name: "With headers" },
+  { id: "textWithoutHeaders", label: "Copy without headers", name: "Without headers" },
+  { id: "headers", label: "Copy only headers", name: "Only Headers" },
+  { id: "csv", label: "Copy as CSV", name: "CSV" },
+  { id: "json", label: "Copy as JSON", name: "JSON" },
+  { id: "jsonLines", label: "Copy as JSON lines/NDJSON", name: "JSON lines/NDJSON" },
+  { id: "yaml", label: "Copy as YAML", name: "YAML" },
+  { id: "inserts", label: "Copy as SQL INSERTs", name: "SQL INSERTs" },
+  { id: "updates", label: "Copy as SQL UPDATEs", name: "SQL UPDATEs" },
+];
+
+export const DEFAULT_COPY_FORMAT: CopyFormat = "textWithoutHeaders";
+
+export function copyFormatLabel(format: CopyFormat): string {
+  return COPY_FORMATS.find((f) => f.id === format)!.label;
+}
+
+export interface CopyData {
+  /** In the order the grid shows them; hidden ones are not among them. */
+  columns: readonly string[];
+  /** One per row, in order: every value the row shows now, not only the columns copied. */
+  rows: readonly Readonly<Record<string, unknown>>[];
+  /**
+   * Each row as the database holds it, which an UPDATE finds it by: a key edited and not yet saved
+   * is still the old one there. `rows` when absent.
+   */
+  stored?: readonly Readonly<Record<string, unknown>>[];
+}
+
+/** Where Copy as SQL writes to. */
+export interface CopySqlTarget {
+  /** A query's rows name no table: DBGate writes `target`. */
+  table: string;
+  schema?: string | null;
+  dialect: DialectName;
+  /** What an UPDATE finds its row by: the primary key, else the first column, as DBGate has it. */
+  keyColumns: readonly string[];
+  /** A number column's digits are written bare even when they arrive as a string. */
+  kinds?: ReadonlyMap<string, ColumnKind>;
+}
+
+const LINE = "\r\n";
+
+/** A Postgres table is named with its schema, so the statement reads the same whatever the search path; MySQL's runs in the tab's database. */
+export function sqlTableName(target: Pick<CopySqlTarget, "table" | "schema" | "dialect">): string {
+  const name = quoteIdentifier(target.table, target.dialect);
+  return target.dialect === "postgres" && target.schema ? `${quoteIdentifier(target.schema, "postgres")}.${name}` : name;
+}
+
+function cellText(value: unknown): string {
+  return formCopyText(value);
+}
+
+function quoteText(text: string): string {
+  return /[\t\r\n"]/.test(text) ? `"${text.replace(/"/g, '""')}"` : text;
+}
+
+function quoteCsv(text: string): string {
+  return /[",\r\n]/.test(text) ? `"${text.replace(/"/g, '""')}"` : text;
+}
+
+function textFormat({ columns, rows }: CopyData, headers: boolean): string {
+  // A single value copied as it is: what is pasted is exactly what the cell holds.
+  if (!headers && rows.length === 1 && columns.length === 1) return cellText(rows[0]![columns[0]!]);
+  const lines = rows.map((row) => columns.map((c) => quoteText(cellText(row[c]))).join("\t"));
+  if (headers) lines.unshift(columns.map(quoteText).join("\t"));
+  return lines.join(LINE);
+}
+
+function csvFormat({ columns, rows }: CopyData): string {
+  const lines = [columns.map(quoteCsv).join(",")];
+  for (const row of rows) lines.push(columns.map((c) => quoteCsv(cellText(row[c]))).join(","));
+  return lines.join(LINE);
+}
+
+/** A row's values in column order, those it has none for left out. */
+function rowObject(row: Readonly<Record<string, unknown>>, columns: readonly string[]): Record<string, unknown> {
+  const out: Record<string, unknown> = {};
+  for (const c of columns) if (row[c] !== undefined) out[c] = row[c];
+  return out;
+}
+
+function insertsFormat({ columns, rows }: CopyData, target: CopySqlTarget): string {
+  const table = sqlTableName(target);
+  const out: string[] = [];
+  for (const row of rows) {
+    const set = columns.filter((c) => row[c] !== undefined);
+    if (!set.length) continue;
+    const names = set.map((c) => quoteIdentifier(c, target.dialect)).join(", ");
+    const values = set.map((c) => sqlLiteral(row[c], target.dialect, target.kinds?.get(c))).join(", ");
+    out.push(`INSERT INTO ${table} (${names}) VALUES (${values});`);
+  }
+  return out.join("\n");
+}
+
+/** `"id"=1 AND "region" IS NULL`: a row found by its key, NULL included. */
+export function sqlKeyCondition(row: Readonly<Record<string, unknown>>, keyColumns: readonly string[], target: Pick<CopySqlTarget, "dialect" | "kinds">): string {
+  return keyColumns.map((c) => {
+    const name = quoteIdentifier(c, target.dialect);
+    const value = row[c];
+    return value === null || value === undefined ? `${name} IS NULL` : `${name}=${sqlLiteral(value, target.dialect, target.kinds?.get(c))}`;
+  }).join(" AND ");
+}
+
+function updatesFormat({ columns, rows, stored }: CopyData, target: CopySqlTarget): string {
+  const table = sqlTableName(target);
+  const out: string[] = [];
+  rows.forEach((row, i) => {
+    const set = columns.filter((c) => row[c] !== undefined);
+    if (!set.length || !target.keyColumns.length) return;
+    const assignments = set.map((c) => `${quoteIdentifier(c, target.dialect)}=${sqlLiteral(row[c], target.dialect, target.kinds?.get(c))}`).join(", ");
+    out.push(`UPDATE ${table} SET ${assignments} WHERE ${sqlKeyCondition(stored?.[i] ?? row, target.keyColumns, target)};`);
+  });
+  return out.join("\n");
+}
+
+/** The selection written in `format`. */
+export function formatCopy(format: CopyFormat, data: CopyData, target: CopySqlTarget): string {
+  switch (format) {
+    case "textWithHeaders": return textFormat(data, true);
+    case "textWithoutHeaders": return textFormat(data, false);
+    case "headers": return data.columns.map(quoteText).join("\t");
+    case "csv": return csvFormat(data);
+    case "json": return JSON.stringify(data.rows.map((row) => rowObject(row, data.columns)), null, 2);
+    case "jsonLines": return data.rows.map((row) => JSON.stringify(rowObject(row, data.columns))).join(LINE);
+    case "yaml": return yaml.dump(data.rows.map((row) => rowObject(row, data.columns)));
+    case "inserts": return insertsFormat(data, target);
+    case "updates": return updatesFormat(data, target);
+  }
+}
+
+const FORMAT_KEY = "ppm-db-copy-format";
+
+/** What Ctrl+C copies on this device: Set format's choice, kept in the browser. */
+export function readCopyFormat(): CopyFormat {
+  try {
+    const kept = localStorage.getItem(FORMAT_KEY);
+    return COPY_FORMATS.some((f) => f.id === kept) ? (kept as CopyFormat) : DEFAULT_COPY_FORMAT;
+  } catch {
+    return DEFAULT_COPY_FORMAT;
+  }
+}
+
+export function keepCopyFormat(format: CopyFormat): void {
+  try {
+    localStorage.setItem(FORMAT_KEY, format);
+  } catch { /* private mode: the choice lasts as long as the page */ }
+}