- Add GroupConfig with 7 variants (default, card, section, inset, flex-row, flex-col, centered)
- Add TextInputConfig with 2 variants (default, error) and 4 states
- Add ImageConfig with 3 variants (default, rounded, circle)
- Register all 5 configs in initElementConfigs()
- Node creation hook already implemented in NodeGraphNode constructor
- Total: 5 configs with 28 variants across all elements
- All configs use design tokens for theming
MVP 2 Status: ✅ Complete (ready for integration testing)
- Added ElementConfigRegistry import to NodeGraphNode
- Modified constructor to call applyDefaults() for new nodes
- Only applies when node has typename and no existing parameters
- Completes MVP 2: Node Integration + Auto-defaults
New nodes (Button, Text, etc.) now automatically get:
- Sensible default values from their config
- Token-based styling (e.g., var(--theme-color-primary))
- Proper sizing (Text gets display: flex, width: auto)
Part of STYLE-002 MVP implementation.
Next: Test in app, then MVP 3 (Variants + UI).
- Added initElementConfigs() function in ElementConfigs/index.ts
- Calls registry.register() for ButtonConfig and TextConfig
- Integrated into Router constructor (called after LessonTemplatesModel init)
- Configs now load when editor starts
- Console log shows '[ ElementConfigs] Initialized with X configs'
Part of STYLE-002 MVP 2 implementation.
Next: Hook into node creation to auto-apply defaults.
- TextConfig with 10 semantic typography variants
* display, h1, h2, h3, h4 (headings)
* body, body-sm (body text)
* caption, label, code (special text)
- All variants use design tokens
- Fix Text element bug: width 'auto' instead of stretching to 100%
- Text now properly sizes to content with display: flex + width: auto
Part of STYLE-002 MVP 1 implementation.
Next: MVP 2 - Node Integration.
- Implemented StyleTokensModel for managing design tokens
- Added StyleTokensInjector to inject tokens into viewer preview
- 10 essential default tokens (primary, background, foreground, border, spacing, radius, shadows)
- Token storage in project metadata (styleTokens field)
- Real-time CSS variable injection in preview
- Fixed bug: tokens now inject for legacy projects without styleTokens field
- Tested and validated (see TEST-REPORT.md)
MVP does NOT include:
- UI panel for editing tokens
- Token picker component
- Import/export functionality
- Full token set (only 10 essentials)
These features are planned for STYLE-001 Full implementation.
- Created PHASE-C-COMPLETE.md with full architecture overview
- Updated CHANGELOG with Session 2 details
- Complete feature summary and testing checklist
- Ready for manual testing and user feedback
Phase A-C Status: COMPLETE ✅
Next: Phase D (Testing & Polish)
Wired up complete code generation and I/O detection pipeline:
- Created BlocklyEditorGlobals to expose detectIO and generateCode
- Runtime node accesses detectIO via window.NoodlEditor
- Dynamic port updates based on workspace changes
- Full integration between editor and runtime
- Auto-initialization via side-effect import
Complete flow now works:
1. User edits blocks in BlocklyWorkspace
2. Workspace JSON saved to node parameter
3. IODetector scans workspace for inputs/outputs/signals
4. Dynamic ports created automatically
5. Code generated for runtime execution
Next: Testing and verification
Full integration of canvas tabs into NodeGraphEditor:
- Added renderCanvasTabs() method to render React tab system
- Added handleBlocklyWorkspaceChange() for workspace persistence
- Added cleanup in dispose() for React roots
- Added event listener for LogicBuilder.OpenTab events
- Tabs now render above canvas with provider wrapping
Ready for Phase C Steps 6-7 (property panel + code generation)
- Updated nodegrapheditor.html template with canvas-tabs-root
- Added imports for CanvasTabsProvider and CanvasTabs
- Added canvasTabsRoot property to NodeGraphEditor class
Next: Add render logic and event handlers
Created complete tab system foundation:
- CanvasTabsContext: React Context for tab state management
- CanvasTabs component: Tab UI with canvas/Blockly switching
- Theme-aware SCSS styling using design tokens
- Full TypeScript types and exports
Next: Integrate into NodeGraphEditor, add property panel button
- Updated PHASE-B1-COMPLETE.md with test results and bugfix info
- Updated CHANGELOG.md with testing confirmation
- Added color scheme learning to LEARNINGS.md
- Phase B1 is complete and tested successfully
Changed category from 'Logic' to 'CustomCode' and color from 'purple' to 'javascript' to match Expression node pattern. This ensures the node picker can find the correct color scheme.
Fixes: EditorNode crash 'Cannot read properties of undefined (reading text)'
Issue: colors prop was undefined because color scheme 'purple' doesn't exist
- Created IODetector utility to scan workspaces for I/O blocks
- Implemented Logic Builder runtime node with:
- Dynamic port detection from workspace
- Code execution context with Noodl API access
- Signal input triggers for logic execution
- Error handling and reporting
- Registered node in runtime and added to Custom Code category
The node should now appear in the node picker under Custom Code.
Next: Phase C - Tab system prototype
Part of TASK-012: Blockly Visual Logic Integration
- Added MIME type mappings for .otf, .woff, and .woff2 font formats
- Fixed missing break statement after .wav case (was falling through to .mp4)
- Fonts now load correctly in editor preview without 404 errors
- Resolves OTS parsing error messages in console
The web server was already serving project directory files correctly,
but browsers were rejecting font files due to missing/incorrect MIME types.
Related to TASK-006
