ryan/stickman
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(stage): complete phase 20b action plans

Browse Source
This commit is contained in:
ryan
2026-11-04 01:19:57 -05:00
parent 87a33b0abc
commit a9c0886348
70 changed files with 14234 additions and 469 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/guides/editor_visual_style_guide.md
+14
View File
@@ -22,6 +22,7 @@ The Sandbox Stage establishes a useful baseline for hierarchy, contrast, child-f
| --- | --- | --- |
| Sandbox Stage | SandboxTheme loads validated tokens from [sandbox_theme.json](../../sandbox_theme.json). Stage inspector controls live under [scripts/shared/stage_ui](../../scripts/shared/stage_ui/). | Use as the product reference for semantic colors, readable type, focus, action roles, and reusable theme access. |
| Stage inspector | The approved [Stage panel UI system](../specs/stage_panel_ui_system.md) targets in-stage selected-object cards. | Do not insert StageInspectorPanel into editor inspectors by default. Borrow fitting rules and state behavior; use its components only if the layout and ownership match. |
| Stage action plans | [Phase 20b](../specs/phase_20b_action_plans_and_direct_authoring.md) defines the DIRECT Step Stack, action markers, target capture, and action picker. | Use these as Stage-specific references. Reuse their general feedback principles in editor workflows only when the interaction fits. |
| Stage object names and overlap chooser | [Phase 20a](../specs/phase_20a_stage_identities_and_names_ui_ux.md) defines the name-and-Rename inspector header and the anchored **Objects here** chooser. | Reuse the rename interaction for other renameable objects; reuse the chooser shell and state tokens for similar non-modal object pickers. Follow the click-versus-drag and transform-handle priority in §4.6. Keep object-specific naming rules with the owning feature. |
| Stage and editor dialogs | [StageDialogStyler](../../scripts/shared/stage_ui/stage_dialog_styler.gd) draws the shared confirmation card over the active scene while retaining native dialog signals. The style reads `popups.confirmation` from SandboxTheme. | Use this shared card for Prop and Stickman confirmation, recovery, and short action dialogs. Native file picker content remains native. |
| Shared editor chrome | [EditorVisualTheme](../../scripts/shared/editor_ui/editor_visual_theme.gd) loads validated tokens from [editor_visual_theme.json](../../editor_visual_theme.json) and builds each editor's local control Theme. `EditorSelectionDropdown` and `EditorContextMenu` supply shared selection and canvas-menu styling. | Use shared semantic tokens and controls for matching editor workflows. Keep editor-specific document behavior in its owner. |
@@ -70,6 +71,7 @@ Use these Stage examples as starting points, then tune them for the denser edito
- Stage inspector shell: **12 px** padding, **8 px** header gap, **12 px** section gap, **10 px** corner radius.
- Stage choice row: **56 px** minimum height; Stage toggle row: **64 px** minimum, increasing when helper text is visible.
- Large child-facing dialogs: title about **28–30 px**, body about **20 px**, button about **20 px**, **2 px** borders, **12–18 px** corner radii, and generous footer spacing.
- For short numeric settings such as a wait duration, keep the value directly editable, show its unit, and offer a large touch-size stepper. Optional quick picks should update the same value. Keep typed input, stepping, quick picks, and bounds synchronized; choose an increment that suits the setting.
- Stage generally uses dark surfaces with a restrained border. The dialog guide's stronger borders and rounder controls are for modal emphasis, not a requirement to put every editor widget inside a thick outline.
For compact inspectors, shorten the hierarchy only after checking it at the intended window size. Prefer a clear label and value over shrinking type until it becomes difficult to read. Use container spacing and alignment rather than per-control position nudges.
@@ -158,6 +160,14 @@ Use an anchored chooser when a click lands on multiple real canvas targets and t
- Keep the clicked art visible where possible, fit the popup to safe viewport margins, and cap the list height so longer candidate lists scroll. Keep pointer hover and keyboard focus behavior equivalent when they preview a candidate.
- Define shell, row, selected, hover, focus, badge, spacing, and Cancel values as theme tokens. The Stage implementation uses `SandboxTheme.popups.anchored_chooser`; other workflows should reuse the visual contract through their own appropriate theme owner.
### 4.7 Stage action planning and target capture
These are Stage-specific references, not a new inspector layout for the standalone editors. The [Phase 20b spec](../specs/phase_20b_action_plans_and_direct_authoring.md) owns the exact action behavior and component placement.
**Temporary target capture:** Keep one short, action-specific prompt and a visible **Cancel** together in a stable capture bar. Dim and block the underlying inspector while the stage is waiting for a target. Escape and right-click may act as shortcuts, but the visible Cancel remains available. Cancel discards the draft, restores the prior selection and focus, and leaves the plan and dirty state unchanged. Show a cursor marker and action-specific feedback: highlight only valid Set Down surfaces, keep Move feedback grounded at the actor's walking level, and preserve Throw's ballistic preview. Do not show a movement-looking trajectory while choosing a Pick Up prop.
**Action markers:** Use one readable icon-and-verb pill for each action. When actions run together, keep their pills separate and stack them so each remains identifiable. Anchor **Pick Up** at its prop, **Say** and **Wait** by the actor, and **Move** at its destination. Let pill color reinforce the action type while the label remains the source of meaning. Do not repeat the step number in the pill when its route flag already carries that number.
## 5. Editor flows and state maps
The following maps describe the current interaction architecture at a level useful for future visual work. They are not proposed additions to file formats.
@@ -300,7 +310,10 @@ Do not add spinners or blocking overlays for synchronous work without evidence t
- Use motion to show cause and effect: a brief selection flash, a panel entering, or a successful action cue. Keep it short and do not delay the next input.
- Do not animate every hover or value change. Motion should help the child understand an edit, not decorate idle controls.
- Keep persistent mode and selection state visible after any transition ends.
- For a secondary chooser that slides out beside an inspector, align the panel tops and briefly dim the parent to show that the chooser is temporary. Keep a visible **Cancel**; Escape and an outside click should reverse the same transition. On close, restore the parent and return focus to the control that opened the chooser.
- For card reordering, keep bold up/down buttons stationary and animate the affected cards exchanging places after activation. Keep the selected card selected and visually in front, preserve scroll and focus, and ignore repeat input until the swap finishes.
- Respect a reduced-motion preference for nonessential transitions and flashes. Provide an equally clear static state.
- When reduced motion is requested, show the chooser or reordered cards directly in their final state without the transition.
- The current code has short visual effects such as the Prop canvas's new-point flash and Stage completion effects. A unified reduced-motion preference is not established by the referenced theme/specs; treat it as a future product-level decision.
## 7. Theme and implementation checklist
@@ -404,5 +417,6 @@ To make this guide a stronger long-term design reference, add these pieces as th
- [Prop canvas](../../scripts/editors/prop/prop_canvas.gd) — mode behavior, canvas gestures, selection handles, and context menus.
- [Stickman Editor controller](../../scripts/editors/stickman/stickman_editor.gd), [Stickman Editor scene](../../scenes/editors/stickman/stickman_editor.tscn), [BodyPartPanel](../../scripts/editors/stickman/body_part_panel.gd), and [Whole Stickman preview](../../scripts/editors/stickman/whole_stickman_preview.gd).
- [Stage dialog style helper](../../scripts/shared/stage_ui/stage_dialog_styler.gd) and [Stage capture bar](../../scripts/editors/stage/stage_use_target_capture_bar.gd).
- [Phase 20b action plans and DIRECT authoring](../specs/phase_20b_action_plans_and_direct_authoring.md) — Stage-specific action pills, capture feedback, and plan editing.
- [Prop Editor UX specification](../specs/phase_9c_prop_editor_ux.md) — current approved Prop Editor mode, Attach preview, marker, and layout behavior.