DB Admin / 14 primitives + composition

Database admin / schema viewer primitives

Visual primitives for an internal database administrator — schema browser, column inspector, ER diagram, SQL editor + results, migrations, indexes, constraints, triggers, stored procedures, schema diff, and backup / restore. Wired to mock Mufflermen schema — no live database connection.

Production answer

Database admin / schema viewer primitives is a reusable Oak Flats Muffler Men UI primitive with documented states, accessibility expectations, theme behavior, and implementation evidence.

Primary CTAReview Database admin / schema viewer primitives states
Generative search brief

Database admin / schema viewer primitives: Visual primitives for an internal database administrator — schema browser, column inspector, ER diagram, SQL editor + results, migrations, indexes, constraints, triggers, stored procedures, schema diff, and backup / restore. Wired to mock Mufflermen schema — no live database connection.

Visual reference only — no live database connection
Primitive 01

Schema tree

Left-rail schema browser — schemas → tables / views / materialized views / functions / sequences with counts and filter.

Stateful · expand / selectOpen
Primitive 02

Column list panel

Right panel — columns of a table with type, nullable, default, PK / FK chips, and comment popovers.

Stateful · comment popoverOpen
Primitive 03

ER diagram canvas

SVG entity-relationship canvas — table nodes with column rows, FK arrows, minimap.

StatelessOpen
Primitive 04

Query editor

SQL editor with mono font, line-number gutter, connection chip, row-limit chip, run button.

Stateful · text + limitOpen
Primitive 05

Query results table

Composes DataTable + row-number column + type-aware cell renderers (number / date / boolean / json) + CSV export.

Stateful · sort + selectOpen
Primitive 06

Migration row

Row per migration — version, name, applied-at, status chip (Pending / Applied / Failed / Rolled back), actions.

StatelessOpen
Primitive 07

Index inspector

Index card — type chip (BTree / GIN / GIST / Hash / BRIN), columns, uniqueness, size, usage chip.

StatelessOpen
Primitive 08

Constraint chip row

Row of PK / FK / UNIQUE / CHECK / NOT NULL chips with click-to-view details popover.

Stateful · details popoverOpen
Primitive 09

Trigger card

Trigger surface — name, timing (BEFORE / AFTER / INSTEAD OF), event chips, function ref, enabled toggle.

Stateful · toggleOpen
Primitive 10

Stored procedure card

Procedure with arg list, return type, language chip, body excerpt rendered through CodeBlock.

Stateful · copyOpen
Primitive 11

Row count badge

Tiny tonal badge with K / M / B suffix that shifts tone for larger tables.

StatelessOpen
Primitive 12

Foreign key arrow

Standalone FK visualizer — source.column → target.column with on-delete / on-update chips.

StatelessOpen
Primitive 13

Schema diff pane

Side-by-side schema diff — left / right with added / removed / changed rows + summary chip row.

StatelessOpen
Primitive 14

Backup / restore panel

Backup list, manual backup CTA, three-step restore wizard (Select → Review → Confirm).

Stateful · wizardOpen
Composition

Full database admin

Schema tree + column list + constraint row + index inspector + trigger card + ER tab + query editor + results + backup panel.

CompositionOpen