Theme
Customize the design system

Every control starts at the preset. Change one and every preview on the site follows, on this page and the next, until you reset it.

Contrast

Text against what it sits on. Below 4.5:1 fails WCAG AA for body text — the check a reviewer runs on any surface that takes a tone.

Waiting for the first preview to report its palette.

Corners

Sets all three radii at once. The individual values are under Geometry.

Brand 5

The accent seam an app actually brands itself through. Change these and you have made the decision a real `DesignTokens.graphite(...)` call makes.

Geometry 15

Square or rounded, and how heavy every line is. The radius row above the controls sets all three corners at once, because "what does square feel like" is one decision rather than three numbers.

Surfaces 17

Everything the app is painted ON — the ground behind the content (the frame paints it too), the cards over it, the well inset in a card, and the washes that show state.

Bands 10

The rail's head and the view bar beside it (one band across the top at 960 and wider), a pushed screen's bar, the compact bar and the compact nav bar — the band's fill, its rule, its hover and active faces, the resting field box on it, and the ink and accent control that sit on it. The rail's tree and its footer stay on the ground.

Text and controls 11

The ink ramp, the control outlines and the field's focus halo. Every pair the panel can break is watched by a contrast badge above.

Status 7

The three voices that mean something — danger, caution and ok — each as a foreground and a surface wash, danger with a border as well.

Data 5

The default pin head, its glyph and its halo, and the group bands. A pin's category color comes from the palette, named in the theme seed.

Map 11

The basemap's roles — land, water, parks, roads and their casings, buildings, labels — and the pending pin's gray. A raster basemap keeps its own imagery; these paint the map's plate and any kit-drawn map.

Scrollbars 6

Every scroller's bar: the thumb at rest and while hovered or dragged, the strip it rides, and the desk bar's thickness, side gap and corners. The desk half shows only while a fine pointer is attached; at touch the platform's own overlay keeps its size.

Advanced 6

Real controls that are not decisions — motion durations, the focus ring offset, the touch floor. Opens collapsed on purpose.

Take it with you

The Dart that reproduces what you are looking at. It is a real constructor call, because the configurator edits a real preset — what you copy is what an app can paste.

Wiring

Capture scopes

Install these where capture fields will be used — they own the camera, file picker, canvas and location plumbing the editors bind to, the drawing an image-point field places on, plus the staging area an import writes into.

7
Classes
17
Knobs

Live

Real widgets, built from the real kit. Turn a knob and it rebuilds; the theme bar above applies the design system's own tokens — including anything you changed under Customize — and the device selector uses the same sizes the golden baselines gate on, so what you see here is what CI holds the widget to.

Press Focus on any preview to take it to the full window — at a desktop width that renders most devices at 1:1, which is when the widget's own controls become clickable. The bar always states the device and the scale, so a shrunk preview says it is shrunk. Esc leaves.

ImageCaptureScope

No live preview — capture scope — provides camera plumbing, paints nothing. Its knobs are documented below.

FileCaptureScope

No live preview — capture scope — provides file-picker plumbing. Its knobs are documented below.

CanvasCaptureScope

No live preview — capture scope — provides canvas plumbing. Its knobs are documented below.

LocationCaptureScope

No live preview — capture scope — provides location plumbing. Its knobs are documented below.

ImagePointDrawingScope

No live preview — drawing scope — provides the image-point drawing resolver, paints nothing. Its knobs are documented below.

StagedFilesScope

No live preview — staging scope — provides the import staging area. Its knobs are documented below.

StagedFilesScopeData

No live preview — inherited data for StagedFilesScope. Its knobs are documented below.

The API

ImageCaptureScope widget

Provides an ImageCapture instance to descendant editors that need to pick images. Customer wires once at the app root after constructing the capture instance (which itself needs the SyncSidecarDao + staging directory).

Full dartdoc

Provides an ImageCapture instance to descendant editors that need to pick images. Customer wires once at the app root after constructing the capture instance (which itself needs the SyncSidecarDao + staging directory). ```dart ImageCaptureScope( capture: ImageCapture(dao: sidecarDao, stagingRoot: await appStagingRoot()), child: MaterialApp(...), ) ```

ImageCaptureScopedefault constructor

Knob Type Default What it does
capture * ImageCapture — The wrapped capture instance.
child * dynamic —

FileCaptureScope widget

Provides a FileCapture instance to descendant file editors. Customer wires it once at the app root, alongside `ImageCaptureScope` — the capture instance needs the same `SyncSidecarDao` + staging directory.

Full dartdoc

Provides a FileCapture instance to descendant file editors. Customer wires it once at the app root, alongside `ImageCaptureScope` — the capture instance needs the same `SyncSidecarDao` + staging directory. ```dart FileCaptureScope( capture: FileCapture(dao: sidecarDao, stagingRoot: stagingRoot), child: MaterialApp(...), ) ```

FileCaptureScopedefault constructor

Knob Type Default What it does
capture * FileCapture — The wrapped capture instance.
child * dynamic —

CanvasCaptureScope widget

Provides a CanvasCapture instance to descendant signature / drawing editors. Customer wires it once at the app root, alongside `ImageCaptureScope` — the capture instance needs the same `SyncSidecarDao` + staging directory.

Full dartdoc

Provides a CanvasCapture instance to descendant signature / drawing editors. Customer wires it once at the app root, alongside `ImageCaptureScope` — the capture instance needs the same `SyncSidecarDao` + staging directory. ```dart CanvasCaptureScope( capture: CanvasCapture(dao: sidecarDao, stagingRoot: stagingRoot), child: MaterialApp(...), ) ```

CanvasCaptureScopedefault constructor

Knob Type Default What it does
capture * CanvasCapture — The wrapped capture instance.
child * dynamic —

LocationCaptureScope widget

Provides a LocationCapture instance to any descendant widget that needs the device's GPS location. Customer wires it once at the app root. center answers an EMPTY location field's fallback center (CaptureField.d.ts THE EMPTY FIELD'S OPENING CAMERA, steady-core #1373): `latLongEditor` asks it per…

Full dartdoc

Provides a LocationCapture instance to any descendant widget that needs the device's GPS location. Customer wires it once at the app root. ```dart LocationCaptureScope( capture: LocationCapture(), child: MaterialApp(...), ) ``` center answers an EMPTY location field's fallback center (CaptureField.d.ts THE EMPTY FIELD'S OPENING CAMERA, steady-core #1373): `latLongEditor` asks it per field and per record when it opens the picker on a field with no value. `FormScreen` installs it from `FormCapture.locationCenter`.

LocationCaptureScopedefault constructor

Knob Type Default What it does
capture * LocationCapture — The wrapped capture instance.
center CaptureLocationCenterResolver? null The host's fallback-center resolver for an empty location field, or null for none (the picker then opens on the world view).
child * dynamic —

ImagePointDrawingScope widget

Provides the ImagePointDrawingResolver the kit's image-point editor reads (`imagePointEditor`) — this kit's expression of FormView's `drawing` resolver, one scope per resolver kind as the capture scopes are. `FormScreen.drawing` installs it, and composes the same resolver into each image-point…

Full dartdoc

Provides the ImagePointDrawingResolver the kit's image-point editor reads (`imagePointEditor`) — this kit's expression of FormView's `drawing` resolver, one scope per resolver kind as the capture scopes are. `FormScreen.drawing` installs it, and composes the same resolver into each image-point field's editability; a host mounting `AppFormView` directly wraps it above the form and gates the fields itself with `FieldSpec.lockedUnless`. ```dart ImagePointDrawingScope( resolve: (field, values) => drawingFor(field.snakeName, values), child: AppFormView(...), ) ```

ImagePointDrawingScopedefault constructor

Knob Type Default What it does
child * dynamic —
resolve * ImagePointDrawingResolver — The host's drawing resolver.

StagedFilesScope widget

Provides synchronous `file_id → local_path` lookups for in-flight uploads. Renderers and editors call `StagedFilesScope.of(context).pathFor(fileId)` to display the locally-staged file while the upload is still pending.

Full dartdoc

Provides synchronous `file_id → local_path` lookups for in-flight uploads. Renderers and editors call `StagedFilesScope.of(context).pathFor(fileId)` to display the locally-staged file while the upload is still pending. Typical wiring: ```dart StagedFilesScope( stream: dao.watchFileIdToLocalPath(), child: ..., ) ``` Tests / playground convenience: ```dart StagedFilesScope.fromMap(const {'f1': '/tmp/a.jpg'}, child: ...) ```

StagedFilesScopedefault constructor

Knob Type Default What it does
child * Widget — The descendant subtree.
stream * Stream<Map<String, String>>? — Stream of `file_id → local_path` snapshots. Latest emission wins.

StagedFilesScope.fromMap

Knob Type Default What it does
map * Map<String, String> —
child * Widget — The descendant subtree.

StagedFilesScopeData widget

Inherited data record exposing `file_id → local_path` lookups to descendants. Constructed by StagedFilesScope; consumers reach it via StagedFilesScope.of.

StagedFilesScopeDatadefault constructor

Knob Type Default What it does
child * dynamic —
map * Map<String, String> — The current `file_id → local_path` snapshot.

Where it lives

Class File
ImageCaptureScope packages/app_widgets/lib/src/sync_scope/image_capture_scope.dart
FileCaptureScope packages/app_widgets/lib/src/sync_scope/file_capture_scope.dart
CanvasCaptureScope packages/app_widgets/lib/src/sync_scope/canvas_capture_scope.dart
LocationCaptureScope packages/app_widgets/lib/src/sync_scope/location_capture_scope.dart
ImagePointDrawingScope packages/app_widgets/lib/src/form/image_point_drawing_scope.dart
StagedFilesScope packages/app_widgets/lib/src/sync_scope/staged_files_scope.dart
StagedFilesScopeData packages/app_widgets/lib/src/sync_scope/staged_files_scope.dart