Monorepo for Aesthetic.Computer
aesthetic.computer
1# KidLisp Editor Architecture Analysis
2
3## Current State: The Problem
4
5**File:** `system/public/kidlisp.com/index.html`
6**Size:** 6,682 lines (HTML + CSS + JS all inline)
7**Functions:** 69
8**Event Listeners:** 48
9**Global Variables:** ~100+
10
11### Issues
12
131. **Monolithic Blob** - Everything in one file with no separation of concerns
142. **No Module System** - Just inline `<script type="module">` with global variable soup
153. **Event Listener Chaos** - Multiple `document.addEventListener('click')` fighting each other
164. **State Management** - Scattered `let` declarations across 4000+ lines
175. **Initialization Order** - Variables like `acToken` declared in wrong order, causing bugs
186. **UI Components Mixed** - Platform selector, language dropdown, auth, keeps, editor all intertwined
197. **CSS in HTML** - ~1700 lines of inline styles
20
21---
22
23## Current Code Structure (Approximate Line Ranges)
24
25```
26Lines Section
27------ -------
281-170 HTML head, meta, fonts
29170-2540 CSS (inline <style>)
302540-2558 External scripts (Split.js, Monaco)
312558-2685 i18n translations
322685-2770 Language/translation functions
332770-3010 Split.js panel layout
343010-3500 Mobile panel collapse/drag system
353500-3630 Center square drag positioning
363630-3800 Console logging + QR code
373800-3900 URL/database code loading
383900-4600 Monaco Editor setup + syntax highlighting
394600-4720 Language dropdown logic
404720-4860 Theme toggle
414860-4950 Reference panel wizard
424950-5040 Playback state (play/pause/stop)
435040-5200 iframe postMessage communication
445200-5550 Test runner integration
455550-5700 Function word grid
465700-5790 Tab switching
475790-6000 Auth0 (AC login)
486000-6100 initACLogin + event binding
496100-6200 Platform selector (NEW)
506200-6400 Keeps (Tezos wallet/minting)
516400-6682 More keeps + misc
52```
53
54---
55
56## Identified Component Groups
57
58### 1. **Core Editor** (should be its own module)
59- Monaco Editor setup
60- Syntax highlighting / decorations
61- Line numbers + padding
62- Clear button
63- Code loading from URL/localStorage
64
65### 2. **Playback Controller** (should be its own module)
66- `isPlaying`, `isPaused`, `lastCode` state
67- `updatePreview()`, `stopPlayback()`
68- iframe postMessage communication
69- Play/Pause/Stop button handling
70
71### 3. **Layout Manager** (should be its own module)
72- Split.js initialization
73- Mobile panel system
74- Panel collapse/expand
75- Center square positioning
76
77### 4. **UI Components** (each should be separate)
78- Platform selector dropdown
79- Language dropdown
80- Theme toggle
81- QR code modal
82- Console panel
83- Reference panel / wizard
84
85### 5. **Auth System** (should be its own module)
86- Auth0 SDK loading
87- Login/logout flow
88- Token management (`acToken`)
89- UI state updates
90
91### 6. **Keeps/Blockchain** (should be its own module)
92- Tezos SDK loading
93- Wallet connection
94- Minting flow
95- Transaction state
96
97---
98
99## Proposed New Architecture
100
101```
102kidlisp.com/
103├── index.html (slim: just HTML structure + boot)
104├── styles/
105│ ├── main.css (core layout)
106│ ├── editor.css (monaco overrides)
107│ ├── components.css (dropdowns, buttons, panels)
108│ └── themes.css (light/dark)
109├── js/
110│ ├── app.js (main entry, orchestrator)
111│ ├── state.js (centralized state management)
112│ ├── editor/
113│ │ ├── monaco.js (editor setup)
114│ │ ├── syntax.js (highlighting + decorations)
115│ │ └── actions.js (clear, format, etc)
116│ ├── playback/
117│ │ ├── controller.js (play/pause/stop logic)
118│ │ └── iframe.js (postMessage bridge)
119│ ├── layout/
120│ │ ├── splits.js (Split.js setup)
121│ │ ├── mobile.js (mobile collapse)
122│ │ └── panels.js (panel management)
123│ ├── components/
124│ │ ├── platform-selector.js
125│ │ ├── language-dropdown.js
126│ │ ├── theme-toggle.js
127│ │ ├── qr-modal.js
128│ │ └── console.js
129│ ├── auth/
130│ │ ├── auth0.js
131│ │ └── ui.js
132│ └── keeps/
133│ ├── tezos.js
134│ └── minting.js
135└── lib/
136 └── (vendored deps if needed)
137```
138
139---
140
141## Centralized State Object
142
143```javascript
144// state.js
145export const state = {
146 // Editor
147 editor: null,
148 code: '',
149
150 // Playback
151 isPlaying: false,
152 isPaused: false,
153 lastCode: '',
154
155 // Platform
156 currentPlatform: 'aesthetic-computer',
157
158 // Auth
159 auth0Client: null,
160 user: null,
161 token: null,
162 handle: null,
163
164 // Keeps
165 wallet: null,
166 walletAddress: null,
167 isMinting: false,
168
169 // UI
170 theme: 'auto',
171 language: 'en',
172
173 // Layout
174 panelStates: {},
175 isMobile: false
176};
177
178// Event emitter for state changes
179export const events = new EventTarget();
180
181export function setState(key, value) {
182 const old = state[key];
183 state[key] = value;
184 events.dispatchEvent(new CustomEvent('stateChange', {
185 detail: { key, old, value }
186 }));
187}
188```
189
190---
191
192## Event System (Replace scattered listeners)
193
194```javascript
195// Instead of multiple document.addEventListener('click')
196// Use a single delegated handler:
197
198document.addEventListener('click', (e) => {
199 // Close all dropdowns
200 if (!e.target.closest('.dropdown-trigger')) {
201 closeAllDropdowns();
202 }
203
204 // Route to specific handlers
205 const handler = e.target.closest('[data-action]');
206 if (handler) {
207 const action = handler.dataset.action;
208 actions[action]?.(e, handler);
209 }
210});
211```
212
213---
214
215## Migration Path
216
217### Phase 1: Extract CSS (Low risk)
2181. Move all `<style>` content to external `.css` files
2192. Keep JS untouched
2203. Test thoroughly
221
222### Phase 2: Extract State (Medium risk)
2231. Create `state.js` with all global variables
2242. Import and use throughout
2253. Add event emitter for reactivity
226
227### Phase 3: Extract Modules (Higher risk)
2281. Start with isolated features (QR modal, theme toggle)
2292. Move to larger systems (auth, keeps)
2303. Finally extract editor + playback
231
232### Phase 4: Event Consolidation
2331. Replace multiple `addEventListener` calls
2342. Use event delegation
2353. Data attributes for actions
236
237---
238
239## Quick Wins (Can do now)
240
2411. **Move `acToken` declaration to top** - Already done
2422. **Create `stopPlayback()` function** - Already done
2433. **Consolidate dropdown close logic** - Single handler for all dropdowns
2444. **Use CSS classes instead of inline styles** - For dropdowns open/close
245
246---
247
248## Decision Point
249
250**Option A: Incremental Refactor**
251- Lower risk, slower progress
252- Keep adding features on shaky foundation
253- Tech debt compounds
254
255**Option B: Clean Room Rewrite**
256- Create new `kidlisp-v2/` alongside current
257- Build with proper architecture from start
258- Swap when ready
259
260**Option C: Hybrid**
261- Extract CSS first (quick win)
262- Create state.js module
263- Progressively migrate JS to modules
264- Keep HTML as shell
265
266---
267
268## Recommendation
269
270Go with **Option C (Hybrid)** starting with:
271
2721. **Extract CSS to files** - 1 hour of work, huge clarity gain
2732. **Create `state.js`** - Centralize all those scattered `let` variables
2743. **Create `events.js`** - Single event delegation system
2754. **Migrate one component at a time** - Start with platform-selector
276
277Would you like me to start with any of these?