Surfaces/Workspace/Record Workbench

Workspace

Surface layer

RecordWorkbenchSurface

Record Workbench

Record editing workbench with tools and previewWorkspace surfaces are the clearest proof that the DS can handle multi-panel, multi-mode, serious application UX.

SummarySurface-owned framing, app-owned wiring, and runtime switching stay cleanly separated here.

Classic

Modern

Rustic

1 structure + 1 pattern

Runtime proofSidebar runtime switches should change the surface without page-local restyling.

Runtime

Platform

Rottay

Rottay / ModernPlatform Flagship

Primary

Radius

Density

Compact runtime evidence across 3+ token signals.

Composition

Recipe map and contract boundary

1 structure + 1 pattern

Surfaces are page recipes: structures hold the frame, patterns carry reusable tasks, and the app provides domain state, permissions, and routing.

Structures

Page-level scaffolding

Patterns

Pattern-specific widgets

Boundary flow

Route and permissions gate access before the surface renders.

Surface config defines layout, actions, and data hooks for the page recipe.

Structures establish the page chrome and stable navigation frame.

Patterns fill the work area while product-owned logic stays outside the DS contract.

API and code

Import and usage contract

Record Workbench

Audit focus

mode switching

tool density

persistent context

Layer fit

Primitives

Patterns

Structures

Surfaces

ImportPublished package entrypoint, ready to copy.

tsx

1 line

Consumption

Runtime-aware snippet

ImportTSX

Quick copy

import { RecordWorkbenchSurface } from '@rottay/design-system';

Usage contractPaste-ready example that shows the base contract first.

tsx

11 lines

Consumption

Runtime-aware snippet

Usage contractTSX

Quick copy

import { RecordWorkbenchSurface } from '@rottay/design-system';

<RecordWorkbenchSurface
  config={{
    title: 'Your page title',
    dataSource,
    actions,
    permissions,
    routing,
  }}
/>