@rebasepro/studio 0.24.0 → 0.24.1-canary.gcb918fc

package/dist/components/SQLEditor/SQLEditor.d.ts

@@ -1,4 +1,15 @@
 import React from "react";
 import type { SQLEditorColumnInfo, TableInfo } from "./sql_editor_types.js";
 export type { SQLEditorColumnInfo, TableInfo };
+/**
+ * The box a result cell is edited in. It closes once: Enter saves, Escape
+ * cancels, a click away saves — and the blur a closing box can still receive
+ * is not a second answer, which made Enter save twice and Escape save at all.
+ */
+export declare const FixedEditorOverlay: ({ displayValue, onSave, onCancel }: {
+    displayValue: string;
+    /** What the box holds when it closes — the text as typed. */
+    onSave: (val: string) => void;
+    onCancel: () => void;
+}) => React.JSX.Element;
 export declare const SQLEditor: () => React.JSX.Element;

package/dist/components/SchemaVisualizer/dagre-layout.d.ts

@@ -0,0 +1,32 @@
+/**
+ * What the layout reads, as plain data: each table's id and box, each
+ * relation's ends. Plain so it can cross into the layout worker unchanged.
+ */
+export interface LayoutInput {
+    nodes: {
+        id: string;
+        width: number;
+        height: number;
+    }[];
+    edges: {
+        source: string;
+        target: string;
+    }[];
+}
+/** Each table's top-left corner, by node id. */
+export type LayoutPositions = Record<string, {
+    x: number;
+    y: number;
+}>;
+/**
+ * Place the graph with dagre, top to bottom.
+ *
+ * An ERD read as a column of tables fits the tall, narrow canvas the
+ * visualizer is given, and it is the only layout the visualizer offers.
+ * Deterministic: the same input always gives the same positions.
+ *
+ * The cost is in dagre's ordering phase and grows fast with cross-linked
+ * graphs — 5 s at 200 tables with two relations each, 90 s at 500 — which is
+ * why the visualizer runs this in a worker (`dagre-layout.worker.ts`).
+ */
+export declare function runDagre(input: LayoutInput): LayoutPositions;

package/dist/components/SchemaVisualizer/dagre-layout.worker.d.ts

@@ -0,0 +1,13 @@
+/**
+ * The schema visualizer's layout, off the main thread.
+ *
+ * Receives one {@link LayoutInput}, answers with its positions (or the error's
+ * message). Bundled with dagre by the `?worker&inline` import in
+ * `layout-runner.ts`, so it needs nothing from the page that starts it.
+ */
+import { type LayoutPositions } from "./dagre-layout.js";
+export type LayoutWorkerReply = {
+    positions: LayoutPositions;
+} | {
+    error: string;
+};

package/dist/components/SchemaVisualizer/layout-runner.d.ts

@@ -0,0 +1,23 @@
+import { type LayoutInput, type LayoutPositions } from "./dagre-layout.js";
+/**
+ * Whether this environment can start the layout worker.
+ *
+ * No in tests (jsdom has no `Worker`) and on a server render; there the
+ * layout runs where it is asked for, as it always did.
+ */
+export declare const canLayOutOffThread: () => boolean;
+/**
+ * Lay a graph out in a worker of its own, which ends with the layout.
+ *
+ * The worker is inlined into the bundle (`?worker&inline`) rather than emitted
+ * as a file beside it: `@rebasepro/studio` is a library, and a worker file
+ * would be found only by an app bundler that rewrites
+ * `new URL(…, import.meta.url)` inside dependencies, which Vite's dependency
+ * pre-bundling does not. Imported on first use, so a page that never lays a
+ * graph out never decodes it.
+ *
+ * A worker that cannot be started or loaded — a Content-Security-Policy
+ * without `blob:` in `worker-src`, say — is not a broken diagram: the layout
+ * runs on the main thread instead, as it did before there was a worker.
+ */
+export declare function layOutOffThread(input: LayoutInput): Promise<LayoutPositions>;

package/dist/components/SchemaVisualizer/schema-visualizer.utils.d.ts

@@ -1,4 +1,5 @@
 import type { Node, Edge } from "@xyflow/react";
+import { type LayoutInput, type LayoutPositions } from "./dagre-layout.js";
 export declare const NODE_WIDTH = 280;
 /**
  * Compute the correct header height for a table node.
@@ -13,18 +14,28 @@ export declare const getHeaderHeight: (opts: {
  * relative to the top of the node.
  */
 export declare const getColumnRowY: (rowIndex: number, headerHeight?: number) => number;
+/** A graph's layout input, and the key its positions are kept under. */
+export interface LayoutPlan {
+    input: LayoutInput;
+    signature: string;
+}
+/**
+ * What dagre will be given for these nodes and edges: each node's id and
+ * box, each edge's ends, in order. The signature is all of it, so a changed
+ * schema — a table, a column count, a relation — is a different key.
+ */
+export declare const planLayout: (nodes: Node[], edges: Edge[]) => LayoutPlan;
+/** The positions for this plan, if it has been laid out before. */
+export declare const cachedLayout: (plan: LayoutPlan) => LayoutPositions | undefined;
+/** Lay the plan out here, on the calling thread. */
+export declare const layOutNow: (plan: LayoutPlan) => LayoutPositions;
 /**
- * Compute node positions using the dagre graph layout engine.
- * Returns a new array of nodes with updated `position`.
- *
- * The graph always ranks top to bottom: an ERD read as a column of tables
- * fits the tall, narrow canvas the visualizer is given, and it is the only
- * layout the visualizer offers.
+ * Lay the plan out in a worker; the main thread stays free while it runs.
+ * See {@link layOutOffThread}.
  */
-export declare const getLayoutedElements: (nodes: Node[], edges: Edge[]) => {
-    nodes: Node[];
-    edges: Edge[];
-};
+export declare const layOutInBackground: (plan: LayoutPlan) => Promise<LayoutPositions>;
+/** The nodes at their laid-out positions, as new objects. */
+export declare const placeNodes: (nodes: Node[], positions: LayoutPositions) => Node[];
 export interface RelationEdgeData {
     cardinality: "one" | "many";
     direction: "owning" | "inverse";

package/dist/components/SchemaVisualizer/useSchemaGraph.d.ts

@@ -29,16 +29,53 @@ export interface TableNodeData {
     icon?: string;
     [key: string]: unknown;
 }
+/**
+ * Above this many tables the diagram draws one table's neighbourhood, not
+ * the whole schema. Laying out 300 cross-linked tables takes dagre several
+ * seconds even in a worker, and a canvas of that many tables is no longer
+ * something anyone reads.
+ */
+export declare const LARGE_SCHEMA_TABLES = 300;
+/** How far from the focused table the drawn neighbourhood reaches. */
+export type NeighbourhoodDepth = 1 | 2;
 export interface UseSchemaGraphResult {
+    /**
+     * The tables and relations on the canvas, placed. Empty while
+     * {@link layingOut} — the layout of a graph not seen before runs in a
+     * worker, never in render.
+     */
     nodes: Node[];
     edges: Edge[];
+    /** Every table and junction table in the schema, drawn or not. */
+    allNodes: Node[];
     relayout: () => void;
+    /** Tables and relations in the whole schema. */
     tableCount: number;
     relationCount: number;
+    /** The layout is running off the main thread. */
+    layingOut: boolean;
+    /**
+     * Set when the schema has more than {@link LARGE_SCHEMA_TABLES} tables:
+     * which table's neighbourhood is drawn, how far it reaches, how many
+     * tables that is, and how many there are in all.
+     */
+    neighbourhood: {
+        focus: string;
+        depth: NeighbourhoodDepth;
+        shown: number;
+        total: number;
+    } | null;
 }
 export declare const useSchemaGraph: (collections: AdminCollection[] | undefined, 
 /**
  * `schema.table` for every table the database reports RLS on, or `null`
  * when there is no SQL capability to ask. See {@link useLiveRlsTables}.
  */
-liveRls?: Set<string> | null) => UseSchemaGraphResult;
+liveRls?: Set<string> | null, 
+/**
+ * The table whose neighbourhood a large schema draws, by node id. When it
+ * is absent, or not a table of this schema, the most connected one. Not
+ * read for a schema of {@link LARGE_SCHEMA_TABLES} tables or fewer, which
+ * is drawn whole.
+ */
+focus?: string | null, depth?: NeighbourhoodDepth) => UseSchemaGraphResult;

package/dist/components/StorageView/useVisibleFileMetadata.d.ts

@@ -0,0 +1,46 @@
+import type { DownloadConfig, StorageSource } from "@rebasepro/types";
+/**
+ * What the storage browser shows of a file beyond its name. The listing carries
+ * the size and version — and, except on S3, the type — of every file; the rest
+ * is read per file, from the server, when it is needed.
+ */
+export interface FileMetadata {
+    size?: number;
+    contentType?: string;
+    /**
+     * A link minted when the metadata was read, for the thumbnail only: a
+     * private file's token expires, and a link to share or download is minted
+     * when it is used (see `FileLink` in `StorageView.tsx`).
+     */
+    downloadUrl?: string;
+}
+export declare function fileMetadataOf(config: DownloadConfig): FileMetadata;
+/**
+ * How many metadata requests run at once: what one origin gets over HTTP/1.1.
+ * Each is a round trip to the server, an auth hook and a HEAD on the bucket.
+ */
+export declare const METADATA_CONCURRENCY = 6;
+/**
+ * Metadata for the files of a listing, asked for as each comes on screen —
+ * and only for those `wants` says need it: the listing already describes most
+ * files (see `StorageReference.size`), so what is left is a file a source
+ * listed bare, and the link an image's thumbnail is drawn from.
+ *
+ * The browser used to ask for every file's metadata before it showed any of
+ * them: a folder of 1,000 files was 1,001 requests and seconds of a spinner.
+ * The listing is shown as it comes back; a file's metadata is asked for when
+ * its element — given {@link observe} as its `ref`, and its path as
+ * `data-storage-path` — scrolls into view, a few requests at a time.
+ *
+ * Kept per listing: keyed by path, and dropped when `files` or `source`
+ * changes — another folder, another source, or the same folder read again
+ * after an upload or a delete, whose files may have changed. Without an
+ * `IntersectionObserver` every file of the listing is asked for, still a few
+ * at a time and still after the listing is shown.
+ */
+export declare function useVisibleFileMetadata<F extends {
+    fullPath: string;
+}>(source: StorageSource | null, files: readonly F[], wants?: (file: F) => boolean): {
+    metadata: ReadonlyMap<string, FileMetadata>;
+    observe: (element: HTMLElement | null) => (() => void) | undefined;
+};