- implement drag-drop interface in TabUI with svelte-dnd-action
- add notifyOrderChanged event to persist input order to node properties
- update getAPIInputs to sort by order field and assign sequential ids
- add order? optional field to APIInputSettings for tracking display order
- listen for MTB_API_ORDER_CHANGED_EVENT in APIPanel and apply reordering via applyInputOrder
- remove html stripping from doc assignments, keep raw content
- refactor graphToPrompt to delegate to comfyui's built-in implementation and post-process for mtb metadata
- add export api functionality to inspector with json download
- expand api input types to include audio and video with type-specific config ui
- implement number (min/max/step), string (multiline), and media (accept/duration/trim) configuration panels
- fix widget value syncing with untrack to prevent reverting user input
- update bun.lock with configVersion field
- register alchemy bridge extension for cross-window workflow communication
- enable loading, serialization, and queuing of workflows via postMessage api
- introduced MTB_API_CHANGED_EVENT custom event for triggering panel updates
- added notifyAPIChanged() function dispatched on API modifications
- setup event listener in APIPanel constructor to debounce updates via requestAnimationFrame
- improved boolean value handling to recognize numeric 1/'1' as true
- ensures UI stays in sync when API properties change across extension, widget manager, and panel
Split monolithic 1400-line comfy_shared.js into focused TypeScript modules in web_source/src/comfy_shared/:
- api.ts: server API utilities (runAction, getServerInfo, setServerInfo)
- colors.ts: color brightness utilities
- documentation.ts: node documentation widget system
- dom.ts: DOM and HTML utilities
- dynamic-connections.ts: dynamic input/output management
- logger.ts: logging utilities with toast notifications
- node-extensions.ts: node type extension helpers
- storage.ts: namespaced localStorage management
- types.ts: comprehensive type definitions
- utils.ts: base utilities (UUID, debounce, deep merge)
- widgets.ts: LiteGraph widget utilities
Benefits:
- ~200 LOC reduction through proper typing and elimination of redundant code
- Better code organization with single-responsibility modules
- Full TypeScript type safety with proper generics
- Improved documentation and maintainability
- Easier to tree-shake unused utilities
Updated vite.config.ts to build comfy_shared as separate entry point and marked external dependencies (/mtb_async modules).
Modified InspectorItem.svelte to use extracted item.value instead of always pulling from widgets[0].
Renamed panel.ts to panel.svelte.ts to enable Svelte 5 runes and made APIPanel reactive using $state instead of $$set.
- migrate Inspector components to Svelte 5 runes ($state, $derived, $props)
- replace on:event directives with new onclick/onconsider/onfinalize syntax
- add mtb_api module with widget manager, graph-to-prompt conversion, and extension registration
- implement APIPanel controller for managing exposed workflow inputs
- add mock implementations for ComfyUI scripts (app, api, ui, comfy_shared)
- create constants module for API colors and styling
- update vite config to handle mtb_api entry point and external @mtb/shared imports
- refactor api_nodes.css to use css custom properties instead of template variables
- add postbuild script to copy dist files to web/dist
- initialize web_source project with vite, svelte 5, and typescript
- add mtb_inspector: interactive node inspector panel for comfyui workflow authoring
- add note-plus: markdown/html editor node with live preview and ace editor integration
- add python repl: interactive frontend repl with syntax highlighting and linting
- implement draggable/resizable UI components with custom actions
- add color picker, dnd support, and tabbed interface
- configure build system with css injection and external comfyui script imports
- add web/dist to .gitignore for built artifacts
- Extract pagination setup logic into initPagination() function for reuse
- Initialize observer as global variable to manage lifecycle across resets
- Call initPagination() after content resets to properly reinitialize infinite scroll
- Add observer cleanup in widget cleanup to prevent memory leaks
- Safely handle observer disconnect with null checks to avoid errors
- Add MTB_PromptPresets node to load and manage prompt presets from json files
- Add MTB_FloatsToFloatList node for converting FLOATS type to float list for loops
- Update MTB_FloatToFloats docstring to include KJ extension
- changed MTB_AudioCut length and offset from FLOAT to INT type, expecting milliseconds
- added sys.maxsize for parameter limits and millisecond tooltips
- fixed calculation to explicitly cast to float before math operations
- uncommented hex_to_rgb import in legacy.py
- expanded MTB_ColorInput to return hex and RGB formats alongside color
- added return names and output tooltips for better usability
it is now backed by a python node.
I'm leveraging litegraph custom widgets in a bit of an hacky way.
The main idea is:
- python endpoints for the editor: to execute, lint, format code live without
queuing anything, this doesn't support inputs but you can use the
`IS_LIVE` global variable to conditionally set inputs.
- a backend singleton class that is used to execute both the live and
"in flow" version.
- a custom widget `CODE_EDITOR` that wraps ACE editor automatically adding
the needed de/serialization hooks on the node it targets
TLDR this node can be either used as a scratchpad akin to a notebook,
isolated from the graph, or part of the graph and can receive inputs
and produce outputs
Mel Massadian