Refactor/audit reduce global state (#5530)

* refactor: Audit and reduce global state in Logo subsystem

This commit introduces explicit dependency injection for the Logo subsystem to reduce reliance on the global Activity facade. Included is an audit of current dependencies and unit tests demonstrating the new pattern.

* refactor: Remove implicit global usage from PhraseMaker widget

This refactor follows the dependency injection pattern established for the
Logo subsystem, making PhraseMaker's external dependencies explicit and
testable.

## Changes Made

✅ Introduced explicit dependency injection via constructor
✅ Updated instantiation site in WidgetBlocks.js to pass dependencies
✅ Replaced all global function calls with this._deps.* pattern (289 refs)
✅ Verified runtime behavior with Jest (all tests passing)
✅ Created a clean, auditable isolation boundary

## Design Decision: this._deps.* vs Local Constants

This implementation uses `this._deps.*` throughout rather than extracting
local constants (e.g., `const _ = this._deps._`) for the following reasons:

1. **Explicit Dependency Tracking**: Every `this._deps.*` call makes it
   immediately clear that we're using an injected dependency, not a global.
   This aids in auditing and understanding data flow.

2. **Grep-ability**: Searching for `this._deps.` instantly reveals all
   external dependencies used in any method, making refactoring safer.

3. **Consistency with Logo Pattern**: Matches the approach documented in
   GLOBAL_STATE_AUDIT.md Phase 4, establishing a uniform pattern across
   the codebase.

4. **Future-Proof**: If we later need to swap implementations or add
   instrumentation, having explicit `this._deps.*` calls makes it easier
   to intercept or modify behavior.

5. **No Hidden Globals**: Local constants like `const _ = this._deps._`
   could be mistaken for module-level imports, reducing clarity.

The trade-off is more verbose code, but the architectural benefits of
explicit, traceable dependencies outweigh the verbosity cost.

## Testing

All 2430 Jest tests pass. No behavioral changes.

Addresses #5529 (Audit and Reduce Implicit Global State Usage)

* style: Apply Prettier formatting to PhraseMaker and WidgetBlocks

Automated formatting fixes to comply with Prettier code style.
No functional changes.

* refactor: Bind dependencies locally to reduce verbosity

Apply local binding pattern to Logo and PhraseMaker to improve code
readability while maintaining explicit dependency injection.

## Changes Made

✅ Logo: Bind blocks, turtles, stage as local properties
✅ PhraseMaker: Bind platformColor, docById, _, wheelnav, slicePath locally
✅ Replace this._deps.* with this.* for bound dependencies (161 refs in PhraseMaker)
✅ Update GLOBAL_STATE_AUDIT.md Phase 4 to document this pattern
✅ All tests passing (2430 tests)

## Pattern Benefits

1. **Reduced Verbosity**: `this.blocks` instead of `this.deps.blocks`
2. **Maintained Auditability**: All dependencies declared in constructor
3. **Grep-able**: Easy to search for `this.blocks` to find usages
4. **No Behavior Change**: Functionally equivalent to `this.deps.*`
5. **Explicit Contracts**: Dependencies still injected, not global

This addresses reviewer feedback about excessive `this._deps.*` usage
while preserving the architectural benefits of dependency injection.

Addresses #5529 (Audit and Reduce Implicit Global State Usage)

* style: Apply Prettier formatting to GLOBAL_STATE_AUDIT.md

Author: vanshika2720

Docs/GLOBAL_STATE_AUDIT.md

@@ -0,0 +1,277 @@
+# Global State Audit - Logo Subsystem
+
+## Purpose
+
+This document audits implicit global state dependencies in the **Logo subsystem** as part of the architectural improvement initiative to reduce global coupling and improve testability.
+
+## Scope
+
+-   **Subsystem**: Logo (`js/logo.js`)
+-   **Related Issue**: Audit and Reduce Implicit Global State Usage
+-   **Date**: 2026-02-04
+
+## Current Architecture
+
+### Logo Class Dependencies
+
+The Logo class currently depends on a single `activity` object passed to its constructor, which acts as a facade to access multiple subsystems:
+
+```javascript
+constructor(activity) {
+    this.activity = activity;
+    // ... initialization
+}
+```
+
+### Identified Global Dependencies (via `this.activity`)
+
+#### 1. **Blocks Subsystem** (`this.activity.blocks`)
+
+-   **Usage Count**: ~50+ references
+-   **Access Pattern**: `this.activity.blocks.*`
+-   **Key Methods Used**:
+    -   `blockList` - Direct property access
+    -   `unhighlightAll()` - Visual feedback
+    -   `bringToTop()` - Z-index management
+    -   `showBlocks()` / `hideBlocks()` - Visibility control
+    -   `sameGeneration()` - Block relationship queries
+    -   `visible` - State query
+
+**Impact**: High - Logo heavily depends on Blocks for execution flow and visual feedback
+
+#### 2. **Turtles Subsystem** (`this.activity.turtles`)
+
+-   **Usage Count**: ~80+ references
+-   **Access Pattern**: `this.activity.turtles.*`
+-   **Key Methods Used**:
+    -   `turtleList` - Direct iteration over turtles
+    -   `ithTurtle(index)` - Get specific turtle
+    -   `getTurtle(index)` - Get turtle by index
+    -   `getTurtleCount()` - Count query
+    -   `add()` - Create new turtle
+    -   `markAllAsStopped()` - State management
+
+**Impact**: Critical - Logo is the execution engine for turtle commands
+
+#### 3. **Stage** (`this.activity.stage`)
+
+-   **Usage Count**: ~10+ references
+-   **Access Pattern**: `this.activity.stage.*`
+-   **Key Methods Used**:
+    -   `addEventListener()` - Event handling
+    -   `removeEventListener()` - Cleanup
+
+**Impact**: Medium - Used for interaction and event handling
+
+#### 4. **UI/Error Handling**
+
+-   **Methods**:
+    -   `this.activity.errorMsg()` - Error display
+    -   `this.activity.hideMsgs()` - Message management
+    -   `this.activity.saveLocally()` - Persistence
+
+**Impact**: Medium - UI feedback and state persistence
+
+#### 5. **Configuration/State**
+
+-   **Properties**:
+    -   `this.activity.showBlocksAfterRun` - Boolean flag
+    -   `this.activity.onStopTurtle` - Callback
+    -   `this.activity.onRunTurtle` - Callback
+    -   `this.activity.meSpeak` - Speech synthesis
+
+**Impact**: Low-Medium - Configuration and callbacks
+
+## Dependency Graph
+
+```
+Logo
+ ├─► Activity (facade)
+      ├─► Blocks (execution context, visual feedback)
+      ├─► Turtles (command execution, state management)
+      ├─► Stage (event handling)
+      ├─► ErrorMsg (UI feedback)
+      └─► Configuration (flags, callbacks)
+```
+
+## Analysis
+
+### Current Problems
+
+1. **Tight Coupling**: Logo cannot be instantiated or tested without a full Activity object
+2. **Hidden Dependencies**: The Activity facade obscures what Logo actually needs
+3. **Circular Dependencies**: Logo ↔ Activity ↔ Blocks ↔ Turtles creates complex initialization
+4. **Testing Difficulty**: Mocking requires recreating entire Activity object graph
+5. **Unclear Contracts**: No explicit interface defining what Logo needs from Activity
+
+### Unavoidable Dependencies
+
+Some dependencies are fundamental to Logo's role as the execution engine:
+
+-   **Turtles**: Logo executes turtle commands, so this dependency is core
+-   **Blocks**: Logo interprets block programs, so this dependency is core
+
+### Refactorable Dependencies
+
+These could be made explicit or injected:
+
+-   **Stage**: Could be injected as an event bus interface
+-   **Error handling**: Could be injected as a logger/error handler interface
+-   **Configuration**: Could be passed as a config object
+-   **Callbacks**: Could be injected explicitly
+
+## Proposed Refactoring Strategy
+
+### Phase 1: Document Current State ✅
+
+-   Create this audit document
+-   Identify all `this.activity.*` references
+-   Categorize by subsystem and impact
+
+### Phase 2: Extract Interfaces (Small, Safe Changes)
+
+Create explicit interfaces for Logo's dependencies:
+
+```javascript
+// LogoDependencies interface
+class LogoDependencies {
+    constructor({
+        blocks, // Blocks subsystem
+        turtles, // Turtles subsystem
+        stage, // Event bus
+        errorHandler, // Error display
+        messageHandler, // Message display
+        storage, // Persistence
+        config, // Configuration
+        callbacks // onStop, onRun, etc.
+    }) {
+        this.blocks = blocks;
+        this.turtles = turtles;
+        this.stage = stage;
+        this.errorHandler = errorHandler;
+        this.messageHandler = messageHandler;
+        this.storage = storage;
+        this.config = config;
+        this.callbacks = callbacks;
+    }
+}
+```
+
+### Phase 3: Refactor Constructor (Backward Compatible)
+
+```javascript
+constructor(activityOrDeps) {
+    // Support both old and new patterns
+    if (activityOrDeps.blocks && activityOrDeps.turtles) {
+        // New explicit dependencies
+        this.deps = activityOrDeps;
+    } else {
+        // Old activity facade - extract dependencies
+        this.deps = new LogoDependencies({
+            blocks: activityOrDeps.blocks,
+            turtles: activityOrDeps.turtles,
+            stage: activityOrDeps.stage,
+            errorHandler: activityOrDeps.errorMsg.bind(activityOrDeps),
+            // ... etc
+        });
+    }
+}
+```
+
+### Phase 4: Bind Dependencies Locally for Readability
+
+To reduce verbosity while maintaining explicit dependency injection, bind commonly-used dependencies as local properties in the constructor:
+
+```javascript
+constructor(activityOrDeps) {
+    // ... dependency injection setup ...
+
+    // Bind commonly-used dependencies locally for readability
+    // This reduces verbosity while maintaining explicit dependency injection
+    this.blocks = this.deps.blocks;
+    this.turtles = this.deps.turtles;
+    this.stage = this.deps.stage;
+}
+```
+
+This allows using `this.blocks.doSomething()` instead of `this.deps.blocks.doSomething()` throughout the class, while still preserving:
+
+-   **Explicit dependency tracking**: All dependencies are declared in the constructor
+-   **Grep-ability**: Can search for `this.blocks` to find all usages
+-   **Auditability**: Clear what external dependencies the class uses
+-   **No behavior change**: Functionally equivalent to `this.deps.*` access
+
+**Note**: Both `this.deps.*` (maximum audit clarity) and locally bound references (improved readability) are acceptable patterns. Choose based on the specific needs of each subsystem.
+
+### Phase 5: Add Tests
+
+With explicit dependencies, Logo becomes testable:
+
+```javascript
+const mockDeps = {
+    blocks: createMockBlocks(),
+    turtles: createMockTurtles()
+    // ... minimal mocks
+};
+const logo = new Logo(mockDeps);
+```
+
+## Benefits
+
+1. **Explicit Contracts**: Clear interface showing what Logo needs
+2. **Improved Testability**: Can inject minimal mocks instead of full Activity
+3. **Better Documentation**: Dependencies are self-documenting
+4. **Reduced Coupling**: Logo depends on interfaces, not concrete Activity
+5. **Migration Path**: Backward compatible during transition
+6. **Foundation for v4**: Establishes pattern for future architecture
+
+## Risks & Mitigation
+
+### Risk 1: Breaking Changes
+
+**Mitigation**: Use adapter pattern to support both old and new constructors
+
+### Risk 2: Incomplete Refactoring
+
+**Mitigation**: Keep scope limited to Logo subsystem only
+
+### Risk 3: Testing Overhead
+
+**Mitigation**: Create helper functions for common mock setups
+
+## Success Metrics
+
+-   [x] All Logo dependencies explicitly documented
+-   [x] Dependency interface created and documented
+-   [x] Logo constructor supports explicit dependencies
+-   [x] Backward compatibility maintained (both patterns supported)
+-   [ ] No behavior changes (existing tests pass) - _needs verification_
+-   [x] New unit tests for Logo with mocked dependencies
+-   [x] Pattern documented for future subsystems
+
+## Implementation Status
+
+The Logo subsystem has been updated to support the `LogoDependencies` pattern. This implementation is backward-compatible with the existing `Activity` facade.
+
+### Completed
+
+-   [x] Initial audit of global state in Logo subsystem
+-   [x] Creation of `LogoDependencies` class
+-   [x] Update to `Logo` constructor to support dependency injection
+-   [x] Unit tests for `LogoDependencies` pattern
+
+### Planned
+
+-   [ ] Gradual refactoring of internal `this.activity` references
+-   [ ] Application of pattern to other core subsystems (Blocks, Turtles)
+
+## References
+
+-   Issue #2767: Identify and/or fix high-level inconsistencies
+-   Related work: PhraseMaker widget isolation
+-   RequireJS migration considerations
+
+---
+
+**Status**: Phase 3 Complete
+**Owner**: @vanshika2720