SmartRack Suite

Color tokens

--accent

--accent-soft

--ok

--ok-soft

--warn

--warn-soft

--danger

--danger-soft

--info

--info-soft

--bg

--bg-raised

--bg-sunken

--bg-inset

--text

--text-muted

--text-faint

Spacing scale

--space-1

--space-2

--space-3

--space-4

--space-5

--space-6

--space-8

--space-10

--space-12

--space-16

Radius ladder

--radius-1

--radius-2

--radius-3

--radius-4

--radius-5

--radius-full

Type scale

--text-xs The quick brown fox jumps over the lazy dog

--text-sm The quick brown fox jumps over the lazy dog

--text-md The quick brown fox jumps over the lazy dog

--text-lg The quick brown fox jumps over the lazy dog

--text-xl The quick brown fox jumps over the lazy dog

--text-2xl The quick brown fox jumps over the lazy dog

--text-3xl The quick brown fox jumps over the lazy dog

AppShell · PageStates · StateSwitcher

This very page is framed by AppShell and PageStates — use the state switcher to preview every UX state.

Layout — Stack · TileGrid · Toolbar

Stack, TileGrid and Toolbar are the only layout primitives route pages may use — never raw styled markup.

Button

StatusChip

OK Warning Alert Info Idle

Banner

KpiTile

Throughput (24 h)

1 284

First-pass yield

98.4 %

0.6 %

Open alarms

KeyValue

Site: Zala Electronics Kft.
City: Zalaegerszeg
Timezone: Europe/Budapest
World clock: 2026-07-19T12:00:00Z

DataTable


RL-24001	PN-0001	L26-1200	4,000	R1-T1-L003	21 Apr 2026, 08:12
RL-24002	PN-0002	L26-1213	3,000	R1-T2-L003	22 Apr 2026, 09:12
RL-24003	PN-0003	L26-1226	6,200	R1-T3-L003	23 Apr 2026, 10:12
RL-24004	PN-0004	L26-1239	4,000	R1-T4-L003	24 Apr 2026, 08:12

Timeline

Inbound · RL-24080 18 Jul 2026, 07:03

Placed; sensor confirmation pending within grace window
Inbound · RL-24079 18 Jul 2026, 06:58

Sensor confirm arrived 41 s late — grace window absorbed it, no alarm escalation
Count · RL-24078 18 Jul 2026, 15:46

Cycle count: location empty — reel marked missing
Count · RL-24077 18 Jul 2026, 15:40

Cycle count: location empty — reel marked missing

Tabs

Content for the active selection. · one

SegmentedControl

Select · TextInput · Field

Field label

Helper text under the control.

Field label

This value is required.

ScanField

Scan or type an ID, then press Enter.

Toggle

Wizard

Content for the active selection. · b

Drawer

Modal

CommandPalette

Toast

HazardGate

Blocked: the last calibration write was never read back.

ApprovalCard · DiffView

Sample change request

Warning

Kiss Anikó 19 Jul 2026, 14:00

1   transport: http
2   endpoint: /sap/opu/odata/GOODSMVT_SRV
− retry: { attempts: 3, backoff: fixed-30s }
+ retry: { attempts: 5, backoff: exponential-2m }
+ allowlist: [GoodsMovementSet.Create]
5   credentialRef: cred/sap-odata-basic

DiffView (split)

1 transport: http 1 transport: http2 endpoint: /sap/opu/odata/GOODSMVT_SRV 2 endpoint: /sap/opu/odata/GOODSMVT_SRV3 − retry: { attempts: 3, backoff: fixed-30s } 3 + retry: { attempts: 5, backoff: exponential-2m } 4 + allowlist: [GoodsMovementSet.Create]4 credentialRef: cred/sap-odata-basic 5 credentialRef: cred/sap-odata-basic

CodeBlock

json

{
  "reelId": "RL-24079",
  "location": "R1-T6-L041",
  "qty": 10000,
  "confirmedBy": "sensor",
  "graceSeconds": 41
}

CodeArea

ZPL label template

Toolbar — stretching child

ErrorState

Calibration write failed

The controller rejected the write; the value was not persisted.

RFC 7807 · type: https://smartrack.example/problems/calibration-write · status: 409

RelativeTime

Inbound Inbound Count

RackLayout

S1 40 mm

S2 56 mm

S3 72 mm

Free
Occupied
Blocked
Affected by change
Selected
WIDE slot (double width)

CredentialRefField

cred/flexzala-mes-token api-token

EmptyHint

When records exist, they will appear here.

Panel

Content for the active selection.

Device profile & scale switcher

Device profile: Desk
Interaction scale: Standard

Session-only demo override — a provisioned station assignment always wins.

ScanStatus — near-field scan record

No scans yet — scan a code.

HoldToConfirm

Press and hold to confirm — or hold Enter.

ActionStore receipts (developer panel)

No receipts yet — run a mock action above.

Re-entry on a settled key returns the same receipt — duplicates are proven no-ops.

DataTable — priority & card (narrow containers)

Declared priorities: p3 columns drop below 900, p2 below 640 — dropped fields stay reachable via the expander row.


RL-24001	PN-0001	L26-1200	4,000	R1-T1-L003
RL-24002	PN-0002	L26-1213	3,000	R1-T2-L003
RL-24003	PN-0003	L26-1226	6,200	R1-T3-L003
RL-24004	PN-0004	L26-1239	4,000	R1-T4-L003

Declared card schema: renders a card list at handheld container widths.


RL-24001	PN-0001	L26-1200	4,000	R1-T1-L003
RL-24002	PN-0002	L26-1213	3,000	R1-T2-L003
RL-24003	PN-0003	L26-1226	6,200	R1-T3-L003
RL-24004	PN-0004	L26-1239	4,000	R1-T4-L003

RL-24001

PN

PN-0001
Qty

4,000
Location

R1-T1-L003
RL-24002

PN

PN-0002
Qty

3,000
Location

R1-T2-L003
RL-24003

PN

PN-0003
Qty

6,200
Location

R1-T3-L003
RL-24004

PN

PN-0004
Qty

4,000
Location

R1-T4-L003

No declarations: stays a horizontal scroller and is flagged for adoption.


RL-24001	PN-0001	L26-1200	4,000	R1-T1-L003	21 Apr 2026, 08:12
RL-24002	PN-0002	L26-1213	3,000	R1-T2-L003	22 Apr 2026, 09:12
RL-24003	PN-0003	L26-1226	6,200	R1-T3-L003	23 Apr 2026, 10:12
RL-24004	PN-0004	L26-1239	4,000	R1-T4-L003	24 Apr 2026, 08:12

ScanFlow — handheld composition

Step 1 of 3

Reel

Scan the reel (RL-…)

Capture live

Scanner input is captured anywhere on this page — no need to click the field first.

No scans yet — scan a code.

WallProjection — wall projection mode

Projection of /observe — noninteractive

Throughput (24 h)

1 284

First-pass yield

98.4 %

0.6 %

Open alarms