laranex-schema-viewer-ui 0.2.0 → 0.4.0

package/dist/types/viewer/Details.d.ts

@@ -1,5 +1,5 @@
 import { type ReactNode } from 'react';
-import type { Diagnostic, Extensions, Provenance, SchemaDocument, Table } from '../contract/types';
+import type { Diagnostic, Extensions, Provenance, SchemaDocument, Source, Table } from '../contract/types';
 import type { ViewerChange } from '../contract/viewer-config';
 import { type GraphEdge, type Lookup } from './graph';
 export type ExtensionRenderers = Record<string, (value: Extensions[string]) => ReactNode>;
@@ -22,40 +22,73 @@ export declare function ProvenanceBadge({ provenance, kind, ctx }: {
     kind: Kind;
     ctx: DetailContext;
 }): import("react").JSX.Element | null;
+export declare function editorHref(editor: string | null, source: Source): string | null;
 export declare function ExtensionsView({ extensions, renderers }: {
     extensions: Extensions | undefined;
     renderers: ExtensionRenderers;
 }): import("react").JSX.Element | null;
-export declare function DiagnosticList({ diagnostics }: {
+export declare function DiagnosticList({ diagnostics, renderers }: {
     diagnostics: Diagnostic[];
+    renderers?: ExtensionRenderers;
 }): import("react").JSX.Element;
 export declare const diagnosticTitle: (kind: string) => string;
-export declare function Overview({ ctx, onShortcuts, onTour }: {
+export declare function Overview({ ctx, onShortcuts, onTour, onCompare, onMigrations, onInferred, }: {
     ctx: DetailContext;
     onShortcuts: () => void;
     onTour: () => void;
+    onCompare?: () => void;
+    onMigrations?: () => void;
+    onInferred?: () => void;
 }): import("react").JSX.Element;
-export declare function DiagnosticsPanel({ doc, lookup, tableOf, onShow }: {
+export type SubjectActions = {
+    comparison: (id: string) => void;
+    migration: (id: string) => void;
+    inferredAssociation: (id: string) => void;
+};
+export declare function DiagnosticsPanel({ doc, diagnostics, connection, documentWide, lookup, tableOf, onShow, onSubject, renderers, }: {
     doc: SchemaDocument;
+    diagnostics?: Diagnostic[];
+    connection?: string | null;
+    documentWide?: (d: Diagnostic) => boolean;
     lookup: Lookup;
     tableOf: (d: Diagnostic) => string | undefined;
     onShow: (table: string) => void;
+    onSubject?: SubjectActions;
+    renderers?: ExtensionRenderers;
 }): import("react").JSX.Element;
-export declare function ChangesPanel({ changes }: {
+export declare function ChangesPanel({ changes, connection, onSubject, }: {
     changes: ViewerChange[];
+    connection?: string | null;
+    onSubject?: (subject: string) => (() => void) | null;
 }): import("react").JSX.Element;
-export declare function TableDetails({ ctx, table, edges, onFocus, onClear, onCopyLink, onSelectEdge, onSelectTable, }: {
+export declare function TableDetails({ ctx, table, edges, onFocus, onClear, onCopyLink, onSelectEdge, onSelectTable, onCompare, onInferred, onMigration, onColumn, }: {
     ctx: DetailContext;
     table: Table;
     edges: GraphEdge[];
+    onColumn?: (name: string) => void;
     onFocus: () => void;
     onClear: () => void;
     onCopyLink: () => void;
     onSelectEdge: (edge: GraphEdge) => void;
     onSelectTable: (id: string) => void;
+    onCompare?: (comparison: string, difference: string) => void;
+    onInferred?: (id: string) => void;
+    onMigration?: (id: string) => void;
 }): import("react").JSX.Element;
-export declare function EdgeDetails({ edge, ctx, onSelectTable }: {
+export declare const usesColumn: (edge: GraphEdge, table: string, column: string) => boolean;
+export declare function ColumnDetails({ ctx, table, column: name, edges, onBack, onSelectEdge, onSelectTable, }: {
+    ctx: DetailContext;
+    table: Table;
+    column: string;
+    edges: GraphEdge[];
+    onBack: () => void;
+    onSelectEdge: (edge: GraphEdge) => void;
+    onSelectTable: (id: string) => void;
+}): import("react").JSX.Element | null;
+export declare function EdgeDetails({ edge, ctx, onSelectTable, onInferred, onFocus }: {
     edge: GraphEdge;
     ctx: DetailContext;
     onSelectTable: (id: string) => void;
+    onInferred?: (id: string) => void;
+    onFocus?: () => void;
 }): import("react").JSX.Element;

package/dist/types/viewer/DownloadDialog.d.ts

@@ -0,0 +1,16 @@
+import type { SchemaDocument } from '../contract/types';
+import type { ViewerDownload } from '../contract/viewer-config';
+export type ImageArea = 'whole' | 'screen';
+type Props = {
+    open: boolean;
+    onClose: () => void;
+    doc: SchemaDocument;
+    initialConnection: string;
+    shownTables: number;
+    onImage: (format: 'svg' | 'png', area: ImageArea) => Promise<string>;
+    onOffline: (() => Promise<string>) | null;
+    onWholeDocument: (() => void) | null;
+    downloads: ViewerDownload[];
+};
+export declare function DownloadDialog({ open, onClose, doc, initialConnection, shownTables, onImage, onOffline, onWholeDocument, downloads }: Props): import("react").JSX.Element;
+export {};

package/dist/types/viewer/Inferred.d.ts

@@ -0,0 +1,20 @@
+import type { InferredAssociation, SchemaDocument } from '../contract/types';
+import type { GraphEdge, Lookup } from './graph';
+export declare const NO_ATTRIBUTE = "No ORM relationship attribute is declared for it: this is an inference from foreign keys, not a relationship. Even high confidence never means one exists.";
+export declare function InferredTag(): import("react").JSX.Element;
+export declare function ConfidenceBadge({ confidence }: {
+    confidence: InferredAssociation['confidence'];
+}): import("react").JSX.Element;
+export declare function InferredDetails({ association: a, doc, lookup, edges, onSelectTable, onSelectEdge, }: {
+    association: InferredAssociation;
+    doc: SchemaDocument;
+    lookup: Lookup;
+    edges: GraphEdge[];
+    onSelectTable: (id: string) => void;
+    onSelectEdge: (edge: GraphEdge) => void;
+}): import("react").JSX.Element;
+export declare function InferredItem({ association: a, lookup, onOpen }: {
+    association: InferredAssociation;
+    lookup: Lookup;
+    onOpen: (id: string) => void;
+}): import("react").JSX.Element;

package/dist/types/viewer/Migrations.d.ts

@@ -0,0 +1,14 @@
+import { type MigrationStatus, type SchemaDocument } from '../contract/types';
+import type { Lookup } from './graph';
+export declare function StatusBadge({ status }: {
+    status: MigrationStatus;
+}): import("react").JSX.Element;
+type Props = {
+    doc: SchemaDocument;
+    lookup: Lookup;
+    selected: string | null;
+    onSelect: (id: string | null) => void;
+    onShowTable: (id: string) => void;
+};
+export declare function MigrationsPanel({ doc, lookup, selected, onSelect, onShowTable }: Props): import("react").JSX.Element;
+export {};

package/dist/types/viewer/SchemaEdge.d.ts

@@ -1,16 +1,18 @@
 import { type Edge, type EdgeProps } from '@xyflow/react';
-import type { EdgeKind } from './graph';
+import { type EdgeKind } from './graph';
 import { type Route } from './routing';
 export type SchemaEdgeData = {
     kind: EdgeKind;
     declaredOnly: boolean;
     polymorphic: boolean;
     crossConnection: boolean;
+    inferred: boolean;
     label: string;
     chip: string;
     route: Route | null;
     showLabel: boolean;
     state: 'selected' | 'related' | 'none';
+    many: boolean;
 };
 export type SchemaEdgeType = Edge<SchemaEdgeData, 'schema'>;
 declare function SchemaEdge({ id, sourceX, sourceY, targetX, targetY, data }: EdgeProps<SchemaEdgeType>): import("react").JSX.Element | null;

package/dist/types/viewer/SchemaViewer.d.ts

@@ -2,6 +2,7 @@ import { type ReactNode } from 'react';
 import type { SchemaDocument } from '../contract/types';
 import type { ViewerChange, ViewerDownload } from '../contract/viewer-config';
 import { type ExtensionRenderers } from './Details';
+import { type OfflineBundle } from './offline';
 import { type LayoutRequest, type Positions } from './layout';
 import { type Theme } from './theme';
 export type { ExtensionRenderers } from './Details';
@@ -21,5 +22,6 @@ export type SchemaViewerProps = {
     downloadHref?: string | null;
     className?: string;
     layout?: (request: LayoutRequest) => Promise<Positions>;
+    offlineBundle?: (() => Promise<OfflineBundle>) | null;
 };
 export declare function SchemaViewer(props: SchemaViewerProps): import("react").JSX.Element;

package/dist/types/viewer/TableNode.d.ts

@@ -1,5 +1,6 @@
 import { type Node, type NodeProps } from '@xyflow/react';
 import type { Table } from '../contract/types';
+import { type TableMark } from './intelligence';
 export type TableNodeData = {
     table: Table;
     connection: string | null;
@@ -12,9 +13,12 @@ export type TableNodeData = {
     pivot: boolean;
     collapsed: boolean;
     highlighted: Set<string>;
+    mark: TableMark | null;
     onSelect: (id: string) => void;
     onFocus: (id: string) => void;
     onToggle: (id: string) => void;
+    onColumn: (id: string, column: string) => void;
+    changed: 'new' | 'changed' | null;
 };
 export type TableNodeType = Node<TableNodeData, 'table'>;
 export declare const PICTURE_ZOOM = 0.4;
@@ -36,7 +40,9 @@ export type RegionNodeData = {
     connection: string;
     driver: string | null;
     tables: number;
+    diagnostics: number;
 };
+export declare const frameMeta: (driver: string | null, tables: number, diagnostics: number) => string;
 export type RegionNodeType = Node<RegionNodeData, 'region'>;
 declare function RegionNode({ data }: NodeProps<RegionNodeType>): import("react").JSX.Element;
 export declare const RegionNodeView: import("react").MemoExoticComponent<typeof RegionNode>;

package/dist/types/viewer/brand.d.ts

@@ -0,0 +1,32 @@
+export declare const BRAND_VIEWBOX = "0 0 24 24";
+export declare const BRAND_STROKE = 1.8;
+export declare const BRAND_RECTS: readonly [{
+    readonly x: 2.5;
+    readonly y: 3.5;
+    readonly width: 8;
+    readonly height: 7;
+    readonly rx: 1.5;
+}, {
+    readonly x: 13.5;
+    readonly y: 13.5;
+    readonly width: 8;
+    readonly height: 7;
+    readonly rx: 1.5;
+}];
+export declare const BRAND_PATH = "M10.5 7 H14 a2 2 0 0 1 2 2 V13.5";
+export declare const FAVICON_COLORS: {
+    readonly light: {
+        readonly tile: "#ffffff";
+        readonly edge: "#e4e4e7";
+        readonly mark: "#1e3a8a";
+    };
+    readonly dark: {
+        readonly tile: "#141417";
+        readonly edge: "#2a2a30";
+        readonly mark: "#6d8dff";
+    };
+};
+export declare const FAVICON_SVG: string;
+export declare const FAVICON_DATA_URI: string;
+export declare const brandMarkSvg: (stroke: string) => string;
+export declare function faviconPixels(size: number): Uint8Array;

package/dist/types/viewer/exportImage.d.ts

@@ -1,10 +1,16 @@
-import { type EdgeKind } from './graph';
+import { type EdgeKind, type LineEnd } from './graph';
+export type Change = 'missing' | 'extra' | 'changed';
+export type ImageMark = {
+    change: Change;
+    likely: boolean;
+};
 export type ImageRow = {
     note: boolean;
     key: string;
     name: string;
     type: string;
     flag: 'drift' | 'declared-only' | null;
+    mark?: ImageMark | null;
 };
 export type ImageNode = {
     x: number;
@@ -17,6 +23,11 @@ export type ImageNode = {
     more: number;
     declaredOnly: boolean;
     external?: boolean;
+    issues?: number;
+    pivot?: boolean;
+    chip?: (ImageMark & {
+        text: string;
+    }) | null;
 };
 export type ImageFrame = {
     x: number;
@@ -26,9 +37,11 @@ export type ImageFrame = {
     title: string;
     meta: string;
 };
+export type EdgeEnd = LineEnd | null;
 export type ImageEdge = {
     kind: EdgeKind;
     declaredOnly: boolean;
+    inferred?: boolean;
     sx: number;
     sy: number;
     cx: number;
@@ -38,7 +51,10 @@ export type ImageEdge = {
         x: number;
         y: number;
         text: string;
+        chip?: string;
     } | null;
+    start?: EdgeEnd;
+    end?: EdgeEnd;
 };
 export type Bounds = {
     x: number;
@@ -51,8 +67,9 @@ export type ImageModel = {
     edges: ImageEdge[];
     frames?: ImageFrame[];
     bounds: Bounds;
+    fonts?: string;
 };
-export declare const COLOR_TOKENS: readonly ["bg", "surface", "surface-2", "line", "line-strong", "fg", "muted", "accent", "accent-ink", "accent-soft", "fk", "both", "declared", "warning"];
+export declare const COLOR_TOKENS: readonly ["bg", "surface", "surface-2", "line", "line-strong", "fg", "muted", "accent", "accent-ink", "accent-soft", "fk", "both", "declared", "warning", "inferred", "missing", "extra", "changed"];
 export type Colors = Record<(typeof COLOR_TOKENS)[number], string>;
 export declare function colorsOf(element: Element): Colors;
 export declare function boundsOf(nodes: Bounds[], padding?: number): Bounds;
@@ -63,3 +80,5 @@ export declare const pngScale: (width: number, height: number, wanted: number, a
 export declare function toCanvas(model: ImageModel, c: Colors, wanted?: number): HTMLCanvasElement;
 export declare function save(blob: Blob, filename: string): void;
 export declare const toPngBlob: (canvas: HTMLCanvasElement) => Promise<Blob>;
+export declare function dataUrl(url: string, mediaType?: string): Promise<string>;
+export declare function fontFaces(): Promise<string>;

package/dist/types/viewer/graph.d.ts

@@ -1,4 +1,4 @@
-import type { Connection, DerivedLink, Link, Model, Relationship, SchemaDocument, Table } from '../contract/types';
+import type { Connection, DerivedLink, Diagnostic, Link, Model, Relationship, SchemaDocument, Table } from '../contract/types';
 export type EdgeKind = 'both' | 'foreign_key' | 'relationship' | 'through';
 export type GraphEdge = {
     id: string;
@@ -14,6 +14,7 @@ export type GraphEdge = {
     crossConnection: boolean;
     link: Link | null;
     derived: DerivedLink | null;
+    many: boolean;
 };
 export declare const CARD_WIDTH = 300;
 export declare const HEADER_HEIGHT = 54;
@@ -31,11 +32,24 @@ export type Lookup = {
     foreignKeys: Map<string, Table['foreignKeys'][number]>;
 };
 export declare function lookup(doc: SchemaDocument): Lookup;
+export type DiagnosticScope = {
+    tableOf: (d: Diagnostic) => string | undefined;
+    connectionsOf: (d: Diagnostic) => string[];
+    tableOfId: (id: string) => string | undefined;
+};
+export declare function diagnosticScope(doc: SchemaDocument, l: Lookup): DiagnosticScope;
+export declare function isUnique(table: Pick<Table, 'primaryKey' | 'indexes' | 'constraints'> | undefined, columns: string[]): boolean;
+export type LineEnd = 'many' | 'one' | 'parent' | 'arrow';
+export declare const lineEnds: (e: Pick<GraphEdge, "kind" | "many">) => {
+    start: LineEnd | null;
+    end: LineEnd;
+};
+export declare const END_SHAPES: Record<LineEnd, [number, number][][]>;
 export declare function edgesFor(doc: SchemaDocument, l?: Lookup): GraphEdge[];
 export declare const EDGE_KINDS: EdgeKind[];
 export declare const edgeShown: (edge: GraphEdge, foreignKeys: boolean, orm: boolean) => boolean;
 export declare function neighbors(id: string, edges: GraphEdge[]): Set<string>;
-export declare function within(id: string, edges: GraphEdge[], depth: number): Set<string>;
+export declare function within(seed: string | string[], edges: GraphEdge[], depth: number): Set<string>;
 export declare function matchesTable(table: Table, connection: string, query: string, models: Model[]): boolean;
 export declare function keyColumns(doc: SchemaDocument): Map<string, Set<string>>;
 export type Fold = 'all' | 'keys' | 'none';

package/dist/types/viewer/icons.d.ts

@@ -0,0 +1,96 @@
+export declare const ICONS: {
+    search: {
+        box: [number, number];
+        strokeWidth: number;
+        body: import("react").JSX.Element;
+    };
+    minus: {
+        body: import("react").JSX.Element;
+    };
+    plus: {
+        body: import("react").JSX.Element;
+    };
+    fit: {
+        body: import("react").JSX.Element;
+    };
+    hand: {
+        body: import("react").JSX.Element;
+    };
+    select: {
+        body: import("react").JSX.Element;
+    };
+    relationships: {
+        body: import("react").JSX.Element;
+    };
+    tables: {
+        body: import("react").JSX.Element;
+    };
+    eye: {
+        body: import("react").JSX.Element;
+    };
+    help: {
+        body: import("react").JSX.Element;
+    };
+    download: {
+        body: import("react").JSX.Element;
+    };
+    keyboard: {
+        box: [number, number];
+        body: import("react").JSX.Element;
+    };
+    moon: {
+        body: import("react").JSX.Element;
+    };
+    sun: {
+        body: import("react").JSX.Element;
+    };
+    more: {
+        box: [number, number];
+        fill: true;
+        body: import("react").JSX.Element;
+    };
+    close: {
+        body: import("react").JSX.Element;
+    };
+    chevron: {
+        body: import("react").JSX.Element;
+    };
+    check: {
+        body: import("react").JSX.Element;
+    };
+    warning: {
+        body: import("react").JSX.Element;
+    };
+    external: {
+        body: import("react").JSX.Element;
+    };
+    note: {
+        body: import("react").JSX.Element;
+    };
+    details: {
+        body: import("react").JSX.Element;
+    };
+    changes: {
+        body: import("react").JSX.Element;
+    };
+    compare: {
+        body: import("react").JSX.Element;
+    };
+    migrations: {
+        body: import("react").JSX.Element;
+    };
+    behind: {
+        body: import("react").JSX.Element;
+    };
+    branch: {
+        body: import("react").JSX.Element;
+    };
+    circle: {
+        body: import("react").JSX.Element;
+    };
+};
+export type IconName = keyof typeof ICONS;
+export declare function Icon({ name, size }: {
+    name: IconName;
+    size?: number;
+}): import("react").JSX.Element;

package/dist/types/viewer/intelligence.d.ts

@@ -0,0 +1,55 @@
+import type { Change, Comparison, Difference, InferredAssociation, JsonValue, MigrationStatus, MigrationTrack, ObjectType, Scope, SchemaDocument } from '../contract/types';
+import type { Lookup } from './graph';
+export declare const scopeKey: (scope: Scope) => string;
+export declare function scopeLabel(lookup: Lookup, scope: Scope): string;
+export declare const comparisonLabel: (lookup: Lookup, c: Comparison) => string;
+export declare const CHANGE_TEXT: Record<Change, {
+    symbol: string;
+    label: string;
+    meaning: string;
+    group: string;
+}>;
+export declare const OBJECT_TEXT: Record<ObjectType, string>;
+export declare const CERTAINTY_TEXT: {
+    readonly certain: {
+        readonly label: "certain";
+        readonly long: "Certain: compared exactly as read from metadata";
+    };
+    readonly likely: {
+        readonly label: "likely";
+        readonly long: "Likely: compared through normalized types or SQL text, a heuristic";
+    };
+};
+export declare function valueText(value: JsonValue): string;
+export type TableMark = {
+    comparison: Comparison;
+    side: 'baseline' | 'target';
+    table: Difference | null;
+    differences: Difference[];
+    columns: Map<string, Difference>;
+    entities: Map<string, Difference>;
+    likely: number;
+};
+export declare function comparisonMarks(comparison: Comparison | undefined): Map<string, TableMark>;
+export declare function tableMarks(doc: SchemaDocument, tableId: string): TableMark[];
+export declare function markSummary(mark: TableMark): {
+    change: Change;
+    text: string;
+    short: string;
+    rest: string;
+    title: string;
+};
+export declare function inferredByLink(doc: SchemaDocument): Map<string, InferredAssociation[]>;
+export declare const inferredOfTable: (doc: SchemaDocument, tableId: string) => InferredAssociation[];
+export declare const modelName: (lookup: Lookup, id: string) => string;
+export declare const inferredLabel: (lookup: Lookup, a: InferredAssociation) => string;
+export declare const CONFIDENCE_TEXT: Record<InferredAssociation['confidence'], string>;
+export declare const AMBIGUITY_TEXT: Record<string, string>;
+export declare const EVIDENCE_TEXT: Record<InferredAssociation['evidence'][number]['kind'], string>;
+export declare const STATUS_TEXT: Record<MigrationStatus, {
+    label: string;
+    tone: 'fact' | 'warning' | 'error' | 'plain';
+    meaning: string;
+}>;
+export declare function unknownReason(track: MigrationTrack): string | null;
+export declare const trackLabel: (lookup: Lookup, t: MigrationTrack) => string;

package/dist/types/viewer/layout.d.ts

@@ -26,6 +26,11 @@ export type Region = {
     width: number;
     height: number;
 };
+export declare function frameAround(connection: string, boxes: {
+    x: number;
+    y: number;
+    height: number;
+}[]): Region;
 export declare function packRegions(blocks: {
     connection: string;
     positions: Positions;

package/dist/types/viewer/offline.d.ts

@@ -0,0 +1,9 @@
+import type { ViewerConfig } from '../contract/viewer-config';
+export type OfflineBundle = {
+    script: string;
+    style: string;
+};
+export declare function bundleFromPage(): OfflineBundle | null;
+export declare function fetchOfflineBundle(base: string | URL): Promise<OfflineBundle>;
+export type OfflineConfig = Pick<ViewerConfig, 'document' | 'changes' | 'defaultConnection'>;
+export declare function offlineHtml(bundle: OfflineBundle, config: OfflineConfig, title?: string): string;

package/dist/types/viewer/ui.d.ts

@@ -1,32 +1,9 @@
 import { type ReactNode } from 'react';
-export declare function Icon({ name, size }: {
-    name: keyof typeof PATHS;
-    size?: number;
+import { type IconName } from './icons';
+export { Icon, ICONS, type IconName } from './icons';
+export declare function Ident({ text }: {
+    text: string;
 }): import("react").JSX.Element;
-declare const PATHS: {
-    readonly search: import("react").JSX.Element;
-    readonly minus: import("react").JSX.Element;
-    readonly plus: import("react").JSX.Element;
-    readonly fit: import("react").JSX.Element;
-    readonly hand: import("react").JSX.Element;
-    readonly select: import("react").JSX.Element;
-    readonly relationships: import("react").JSX.Element;
-    readonly tables: import("react").JSX.Element;
-    readonly eye: import("react").JSX.Element;
-    readonly arrange: import("react").JSX.Element;
-    readonly help: import("react").JSX.Element;
-    readonly download: import("react").JSX.Element;
-    readonly keyboard: import("react").JSX.Element;
-    readonly moon: import("react").JSX.Element;
-    readonly sun: import("react").JSX.Element;
-    readonly more: import("react").JSX.Element;
-    readonly close: import("react").JSX.Element;
-    readonly chevron: import("react").JSX.Element;
-    readonly check: import("react").JSX.Element;
-    readonly warning: import("react").JSX.Element;
-    readonly focus: import("react").JSX.Element;
-    readonly link: import("react").JSX.Element;
-};
 type MenuProps = {
     label: string;
     trigger: ReactNode;
@@ -66,9 +43,11 @@ export declare function MenuItem({ onSelect, children, hint, shortcut, disabled
 }): import("react").JSX.Element;
 export type TabSpec<T extends string> = {
     value: T;
-    label: ReactNode;
+    label: string;
+    icon?: IconName;
     count?: number;
     tone?: 'warning';
+    badge?: ReactNode;
 };
 export declare function TabList<T extends string>({ tabs, value, onChange, label, className, idPrefix }: {
     tabs: TabSpec<T>[];
@@ -78,4 +57,3 @@ export declare function TabList<T extends string>({ tabs, value, onChange, label
     className?: string;
     idPrefix: string;
 }): import("react").JSX.Element;
-export {};