# UX Workspace Studio: a reversible working configuration

Project Lead: Chason Arthur. Original draft narration for a future computer tutorial; not a transcript of an existing video.

Actual browser CSS and DataTables over 72 synthetic dealer records. Temporary recording changes stay in this page; no account sync, backend service, YouTube upload or provider call.

Prepare: clean synthetic browser profile; readable editor/browser text;1920×1080 separate frames with outer annotation whitespace; silence notifications; no secrets or customer data. Confirm the temporary walkthrough after normal initialization. Scene links never reset automatically.

## 1. WS01 — See the result first
Tutorial: /lab/workspace-studio/tutorial.html#step-2
Scene: /lab/workspace-studio/#scene-after (navigate only; confirm a temporary session before use)

Objective: Compare two actual layouts of the same synthetic workspace.

SAY: This is one workspace in two working rhythms. The same synthetic dealer table can change its typography, spacing, navigation and multi-column sort without changing the underlying records.

SHOW: After the explicit temporary checkpoint, choose Before, then Operations comparison. Pause on region-first columns and descending Region / ascending Dealer sorting.

EXPECTED: 72 synthetic records remain available. The operations scene has dark, compact styling and side preview navigation. Status says temporary; saved settings are unchanged.

Pitfall: A screenshot is a visual state, not evidence of persistence or production traffic.

Result before moving on: The viewer sees the working result before the implementation.

## 2. WS02 — Establish the temporary checkpoint
Tutorial: /lab/workspace-studio/tutorial.html#step-1
Scene: /lab/workspace-studio/#scene-before (navigate only; confirm a temporary session before use)

Objective: Separate the recording from the saved workspace.

SAY: The normal demo remembers preferences on this browser. For a recording, confirm a temporary walkthrough first. That keeps the saved configuration separate from everything we are about to change.

SHOW: Show Prepare temporary walkthrough, Confirm, then Before. Explain that a scene deep link only navigates; it never resets the app.

EXPECTED: Paper/default table appears only after confirmation. Normal boot migration and expiry handling occurred before the checkpoint.

Pitfall: Storage denied or quota-full means page memory; it cannot promise restoration after reload.

Result before moving on: A clearly labelled temporary session is active.

## 3. WS03 — Accept choices, not CSS
Tutorial: /lab/workspace-studio/tutorial.html#step-2
Scene: /lab/workspace-studio/#scene-before (navigate only; confirm a temporary session before use)

Objective: Trace authored tokens from validation to real surfaces.

SAY: The import accepts named choices. It never accepts a stylesheet, template or URL. One validator serves the controls, presets and file import.

SHOW: Show OPTIONS and validateAppearance in model.mjs. In the browser choose Focus first, undo, then open the native preview dialog and close it with Escape.

EXPECTED: Authored colors, type, spacing and focus apply to the form and modal. Undo restores the preceding temporary appearance.

Pitfall: Native browser controls and third-party internals are outside the authored surface contract. The OS reduced-motion preference wins.

Result before moving on: The visible choices have a small, inspectable implementation boundary.

## 4. WS04 — Keep table meaning when columns move
Tutorial: /lab/workspace-studio/tutorial.html#step-4
Scene: /lab/workspace-studio/#scene-after (navigate only; confirm a temporary session before use)

Objective: Demonstrate named multi-sort and table configuration.

SAY: Column names carry the meaning. Moving Region to the first position must not turn its descending sort into a different field. Explicit controls also make that operation available without dragging.

SHOW: Choose Operations comparison. Show Region descending / Dealer ascending, move Region, hide revenue, choose five rows and change page. Inspect JSON and its named order rules.

EXPECTED: Search, per-column filter, length/page, visibility and column order remain inspectable; the sort still refers to Region and Dealer.

Pitfall: DataTables owns the table DOM. A Vue wrapper must not also render these rows with v-for.

Result before moving on: The table has a keyboard path and stable named-column semantics.

## 5. WS05 — Make rejected imports observable
Tutorial: /lab/workspace-studio/tutorial.html#step-5
Scene: /lab/workspace-studio/#scene-invalid (navigate only; confirm a temporary session before use)

Objective: Reject an unsupported synthetic document before mutation.

SAY: Valid JSON is only syntax. This next document asks for an unsupported appearance value. The whole document fails before any setting changes.

SHOW: Choose Rejected import. Inspect the synthetic invalid document, the readable rejection and the unchanged state evidence.

EXPECTED: Appearance/table are unchanged. No stylesheet, HTML or network request is created. Explain the 16 KiB UTF-8 limit and bounded known-version migration.

Pitfall: Do not confuse JSON.parse with validation or copy untrusted objects into options.

Result before moving on: A failed import has a visible, recoverable outcome.

## 6. WS06 — Explain the storage boundary
Tutorial: /lab/workspace-studio/tutorial.html#step-3
Scene: /lab/workspace-studio/#scene-after (navigate only; confirm a temporary session before use)

Objective: Distinguish custom persistence, fallback and account sync.

SAY: The shared adapter uses a thirty-day envelope and custom DataTables callbacks. That differs from DataTables’ built-in two-hour default. If browser storage is denied or full, the controls still work in memory.

SHOW: Show storage.mjs envelope and table.mjs callbacks. Show the local denied/quota regression result without changing browser-wide security settings.

EXPECTED: Preferences are browser/device-local. No credentials, private records or conversations are stored. The temporary table uses persistState:false.

Pitfall: stateDuration:0 is the built-in indefinite setting, not this Lab’s thirty-day custom-envelope design.

Result before moving on: The durability claim matches the current adapter and browser status.

## 7. WS07 — Recover without stale writes
Tutorial: /lab/workspace-studio/tutorial.html#step-9
Scene: /lab/workspace-studio/#scene-reset (navigate only; confirm a temporary session before use)

Objective: Preserve the original checkpoint and newer cross-tab settings.

SAY: Reset is part of the demonstration, too. Repeating it must keep the original checkpoint. Restore reads the latest saved workspace, so it does not overwrite a change from another tab.

SHOW: Reset the temporary workspace twice. Change saved appearance/table settings in a separate synthetic tab, then restore this tab and show the newer state.

EXPECTED: No recording-tab preference writes occurred after the checkpoint. Newer saved values win; form preview restores only in page memory and empty rehearsal clears.

Pitfall: Writing an old localStorage snapshot on restore would clobber newer work. Do not clear storage for a recording.

Result before moving on: The temporary session ends with a usable saved workspace.

## 8. WS08 — Verify the boundaries separately
Tutorial: /lab/workspace-studio/tutorial.html#step-7
Scene: /lab/workspace-studio/#scene-before (navigate only; confirm a temporary session before use)

Objective: Show reproducible local tests rather than unsupported scale claims.

SAY: A screenshot establishes a visual state. It cannot establish persistence or rollback. These tests check the boundaries separately, including interrupted reload, denied storage and newer cross-tab settings.

SHOW: Show the safe model and rendered-regression commands and their actual local report. Cut to narrow viewport and keyboard focus checks.

EXPECTED: The report identifies its revision, local browser and synthetic data. Keep the older CPU-only parse benchmark separate from rendering or production latency.

Pitfall: Do not infer production throughput, accessibility certification or account synchronization from a finite local test.

Result before moving on: Each demonstrated claim has a corresponding bounded verification.

## 9. WS09 — Close with the release boundary
Tutorial: /lab/workspace-studio/tutorial.html#step-8
Scene: /lab/workspace-studio/#scene-reset (navigate only; confirm a temporary session before use)

Objective: Hand the viewer a practical next step and honest limits.

SAY: The result is a configurable workspace with an inspectable preference contract and a reversible recording path. Publication is a separate reviewed action. The next step is to build the tutorial checkpoints and verify each result.

SHOW: Show the tutorial anchors, evidence link and saved-workspace restore. Show future-video planning with no video attached; do not open an external link.

EXPECTED: No upload, embed, tracking, provider call or new key. This is a draft script, not an existing video. WordPress and account sync remain gaps.

Pitfall: Prepared, tested, reviewed and live are separate states.

Result before moving on: The viewer can reproduce the tutorial without a false production-service claim.

Wrap: restore the saved workspace, show local evidence and the next tutorial checkpoint. Prepared, tested, reviewed and live are separate statuses. No upload, external tracking, provider activation or production release is part of recording preparation.