// cnc-workspace showcase controller (issue #46). // // The template calls the `$`-methods below over RPC from `@workspacechange` and // `@layout-changed`. Nothing is written onto `$page`: it is rebuilt per request // from request identity only and never ships to the client. // // State lives in plain (non-`$`) keys: they ship to the client in the // embedded block state and come back on every RPC via `plainBlockState`. With no // database behind this demo, that round-trip IS the persistence. const DEFAULT_STATE = { _focusedTab: null, _searching: false, _searchQuery: '', _searchInclude: '', _searchIgnore: '', _searchResults: [], commandPaletteOpen: false, commandPaletteQuery: '', commandPaletteIndex: 0, contextMenu: null, tabContextMenu: null, _shortcuts: { 'ctrl+q': 'closeActiveTab', 'ctrl+p': 'openCommandPalette', 'alt+z': 'toggleWordWrap', 'ctrl+shift+e': 'toggleExplorer', 'ctrl+shift+f': 'toggleSearch', }, } const DEFAULT_WORKSPACES = [{ _key: 'Workspace/1', name: null }] const DEFAULT_ITEMS = [ { _key: 'WorkspaceItem/1', workspace: 'Workspace/1', name: 'blocks', type: 'folder', parent: null, contents: null, }, { _key: 'WorkspaceItem/2', workspace: 'Workspace/1', name: 'widgets', type: 'folder', parent: null, contents: null, }, { _key: 'WorkspaceItem/3', workspace: 'Workspace/1', name: 'emptyFolder', type: 'folder', parent: null, contents: null, }, { _key: 'WorkspaceItem/4', workspace: 'Workspace/1', name: 'README.md', type: 'file', parent: null, contents: '# Demo CNC App\n\nThis is a demo application built with the CNC framework.\n\n## Structure\n\n- `blocks/` - Page components\n- `widgets/` - Reusable UI components\n\n## Features\n\n- Counter widget with increment/decrement\n- Button widget with variants\n- Reactive data binding', }, { _key: 'WorkspaceItem/5', workspace: 'Workspace/1', name: 'index.html', type: 'file', parent: 'WorkspaceItem/1', contents: '

My CNC App

\n \n

Counter Demo

\n \n

Greeting

Hello, !

\n \n

', }, { _key: 'WorkspaceItem/6', workspace: 'Workspace/1', name: 'index.mjs', type: 'file', parent: 'WorkspaceItem/1', contents: "export default {\n name: 'World',\n\n init() {\n console.log('Block initialized!')\n }\n}", }, { _key: 'WorkspaceItem/7', workspace: 'Workspace/1', name: 'about.html', type: 'file', parent: 'WorkspaceItem/1', contents: '

About Page

\n \n \n Back to Home\n \n

', }, { _key: 'WorkspaceItem/8', workspace: 'Workspace/1', name: 'about.mjs', type: 'file', parent: 'WorkspaceItem/1', contents: "export default {\n description: 'This is a simple CNC demo app built with the monaco-dev workspace.',\n\n goHome() {\n console.log('Navigate home')\n }\n}", }, { _key: 'WorkspaceItem/9', workspace: 'Workspace/1', name: 'demo-counter', type: 'folder', parent: 'WorkspaceItem/2', contents: null, }, { _key: 'WorkspaceItem/10', workspace: 'Workspace/1', name: 'demo-button', type: 'folder', parent: 'WorkspaceItem/2', contents: null, }, { _key: 'WorkspaceItem/11', workspace: 'Workspace/1', name: 'demo-counter.html', type: 'file', parent: 'WorkspaceItem/9', contents: '

\n \n \n \n \n \n

', }, { _key: 'WorkspaceItem/12', workspace: 'Workspace/1', name: 'demo-counter.mjs', type: 'file', parent: 'WorkspaceItem/9', contents: "export default {\n count: 0,\n\n init() {\n console.log('Counter widget initialized!')\n }\n}", }, { _key: 'WorkspaceItem/13', workspace: 'Workspace/1', name: 'demo-button.html', type: 'file', parent: 'WorkspaceItem/10', contents: "", }, { _key: 'WorkspaceItem/14', workspace: 'Workspace/1', name: 'demo-button.mjs', type: 'file', parent: 'WorkspaceItem/10', contents: "export default {\n variant: 'primary',\n onClick: null\n}", }, { _key: 'WorkspaceItem/15', workspace: 'Workspace/1', name: 'cnc.toml', type: 'file', parent: null, contents: 'name = "monaco-dev"\n\n[themes.theme1.colors.primary]\n50 = "#eef2ff"\n100 = "#e0e7ff"\n200 = "#c6d2ff"\n300 = "#a3b3ff"\n400 = "#7c86ff"\n500 = "#615fff"\n600 = "#4f39f6"\n700 = "#432dd7"\n800 = "#372aac"\n900 = "#312c85"\n950 = "#1e1a4d"\n', }, ] // The actions the widget's `workspacechange` event is allowed to route to. The // widget also fires `workspacechange` for client-only pokes ('search', // 'inspectorState', 'commandPalette', 'contextMenu', 'tabcontextMenu') that this // block has no handler for; those fall through to a bare re-render, exactly as // the pre-rust `if (!fn) return` did. const ACTIONS = new Set([ 'createWorkspaceItem', 'deleteWorkspaceItem', 'renameWorkspaceItem', 'startRenaming', 'moveWorkspaceItem', 'updateWorkspaceItemContents', 'applyInspectorChanges', 'saveMarkdownEdit', 'loadWorkspaceItem', 'getAllWorkspaceItems', 'getWorkspaceItemTree', 'searchWorkspace', ]) export default { workspaceId: 'Workspace/1', // These literal defaults ARE the demo seed — they are NOT placeholders waiting // for `$update` to fill in. That is forced by the client: `deriveBundle` // (src/client/cnc.mjs) does `def.state = ns.default`, REPLACING the server's // `$update`-seeded state with this object literal on every block that ships a // bundle. Seed the literals to `null` and the SSR page is correct but hydration // immediately blanks it. Same convention as app-layout (`appLayoutNav: NAV`) // and /live (`count: 0`): literal default == cold-render value, so the hydrate // re-render is a no-op instead of a wipe. state: DEFAULT_STATE, workspaces: DEFAULT_WORKSPACES, workspaceItems: DEFAULT_ITEMS, files: _buildTree(DEFAULT_ITEMS), // Pure round-trip: set by `$saveLayout`, never seeded. `$update` must not touch // it, or every action would reset the docked layout to null. layoutConfig: null, // Defensive only — the literals above already hold the seed, and a well-formed // round-trip already carries the live values. This just re-seeds anything a // malformed post nulled out, so a bad payload degrades to the demo data rather // than throwing in the methods below. $update() { this.state ??= DEFAULT_STATE this.workspaces ??= DEFAULT_WORKSPACES this.workspaceItems ??= DEFAULT_ITEMS // `??=`, NOT `=`. The mutating `$`-methods below rebuild `files` themselves // and then stamp per-node UI flags onto it (`renaming`, `_collapsed`, // `_collapsable`, `closable`). `$update` runs AFTER the method on every RPC, // so an unconditional rebuild here would wipe those flags before the state is // serialized back — and the widget's rename auto-focus MutationObserver // depends on `renaming` surviving into the re-render. this.files ??= _buildTree(this.workspaceItems) }, // `cnc-layout` dispatches `layout-changed` with the new config (or null on // reset); without persisting it, opening a file never shows its tab. $saveLayout(layout) { this.layoutConfig = { layout: layout ?? null } }, // Single entry point for every workspace mutation — the widget fires one // `workspacechange` event carrying `{ action, params }`. Unlike the pre-rust // version there is no `JSON.parse` here: the template passes `$event.detail.params` // straight through as an RPC argument, so it arrives as a real object. $handler(action, params) { if (!ACTIONS.has(action)) return return this['$' + action](params || {}) }, $createWorkspaceItem(input) { const { workspaceId, name, type, parent = null, contents = '' } = input const siblings = this.workspaceItems.filter( (i) => i.workspace === workspaceId && i.parent === parent && i.name === name, ) if (siblings.length > 0) return const _key = _nextKey(this.workspaceItems, 'WorkspaceItem') this.workspaceItems = [ ...this.workspaceItems, { _key, name, type, workspace: workspaceId, parent, contents: type === 'folder' ? null : contents, }, ] this.files = _buildTree(this.workspaceItems) const newNode = _findNode(this.files, _key) if (newNode) { newNode._collapsed = true newNode._collapsable = type === 'folder' newNode.closable = true newNode.renaming = true } }, $deleteWorkspaceItem(input) { const { _key, workspaceId } = input const item = this.workspaceItems.find((i) => i._key === _key && i.workspace === workspaceId) if (!item) return const toDelete = new Set() _collectRecursive(_key, toDelete, this.workspaceItems) this.workspaceItems = this.workspaceItems.filter((i) => !toDelete.has(i._key)) this.files = _buildTree(this.workspaceItems) }, $getAllWorkspaceItems(input) { const { workspaceId } = input return this.workspaceItems.filter((i) => i.workspace === workspaceId) }, $getWorkspaceItemTree(input) { const { workspaceId } = input return _buildTree(this.workspaceItems.filter((i) => i.workspace === workspaceId)) }, $loadWorkspaceItem(input) { const { workspaceId, _key } = input return this.workspaceItems.find((i) => i._key === _key && i.workspace === workspaceId) ?? null }, // #602 — reached at last: the explorer now fires this on every drop. // // Every REFUSAL still rebuilds `files`. The widget's drag engine has already // reordered the live DOM as its preview, and the client posts that same tree // back in `$page.files`; returning early would leave the refused move standing // on screen. Rebuilding from `workspaceItems` — the only thing that actually // records where an item lives — is what puts the row back. $moveWorkspaceItem(input) { const { _key, workspaceId, newParent = null, afterKey = null } = input const mine = (i) => i.workspace === workspaceId const item = this.workspaceItems.find((i) => i._key === _key && mine(i)) if (!item) return const rebuild = () => { this.files = _buildTree(this.workspaceItems) } // Only a folder can hold children — `_buildTree` gives a file node no // `children` array, so parenting under one would drop the item silently. const byKey = (k) => (k ? this.workspaceItems.find((i) => i._key === k && mine(i)) : null) const parent = byKey(newParent) if (newParent && parent?.type !== 'folder') return rebuild() // A folder cannot move inside itself or its own descendants. for (let p = parent; p; p = byKey(p.parent)) { if (p._key === _key) return rebuild() } const conflict = this.workspaceItems.find( (i) => mine(i) && i.parent === newParent && i.name === item.name && i._key !== _key, ) if (conflict) return rebuild() // `_buildTree` orders each folder's children by their order in this array, // so sibling ORDER is expressed by where the item sits in it — splice it to // the slot after `afterKey` (or to the front of the destination when null) // rather than reassigning `parent` in place, which would move the item and // leave it in its old slot. const rest = this.workspaceItems.filter((i) => i._key !== _key) const moved = { ...item, parent: newParent } const at = afterKey ? rest.findIndex((i) => i._key === afterKey && mine(i)) : -1 if (at !== -1) { rest.splice(at + 1, 0, moved) } else { // No `afterKey` means "first child": sit just before the destination's // current first child, or at the end when it has none. const first = rest.findIndex((i) => mine(i) && i.parent === newParent) first === -1 ? rest.push(moved) : rest.splice(first, 0, moved) } this.workspaceItems = rest rebuild() }, $startRenaming(input) { const { _key } = input const node = _findNode(this.files, _key) if (node) node.renaming = true }, $renameWorkspaceItem(input) { const { _key, workspaceId, newName } = input const item = this.workspaceItems.find((i) => i._key === _key && i.workspace === workspaceId) if (!item) return const conflict = this.workspaceItems.find( (i) => i.workspace === workspaceId && i.parent === item.parent && i.name === newName && i._key !== _key, ) if (conflict) return this.workspaceItems = this.workspaceItems.map((i) => i._key === _key ? { ...i, name: newName } : i ) this.files = _buildTree(this.workspaceItems) const renamedNode = _findNode(this.files, _key) if (renamedNode) renamedNode.renaming = false }, $searchWorkspace(input) { const { workspaceId, searchString, includeKeys = null, excludeKeys = null } = input const q = String(searchString ?? '').toLowerCase() return this.workspaceItems.filter((i) => { if (i.workspace !== workspaceId || i.type !== 'file') return false if (includeKeys && !includeKeys.includes(i._key)) return false if (excludeKeys && excludeKeys.includes(i._key)) return false return i.contents?.toLowerCase().includes(q) }) }, $updateWorkspaceItemContents(input) { const { _key, workspaceId, contents } = input const item = this.workspaceItems.find((i) => i._key === _key && i.workspace === workspaceId) if (!item || item.type === 'folder') return this.workspaceItems = this.workspaceItems.map((i) => i._key === _key ? { ...i, contents, updatedAt: Date.now() } : i ) this.files = _buildTree(this.workspaceItems) }, // Inspector "Apply to Code": persist the edited source AND the regenerated // preview srcdoc into `layoutConfig` in ONE round-trip. The preview panel is // SSR'd from `layoutConfig.previewContent`, which is otherwise only updated by // `$saveLayout` — doing both here avoids a second, racing round-trip. $applyInspectorChanges(input) { const { _key, workspaceId, contents, blockPath, previewContent, positionMap } = input const item = this.workspaceItems.find((i) => i._key === _key && i.workspace === workspaceId) if (item && item.type !== 'folder') { this.workspaceItems = this.workspaceItems.map((i) => i._key === _key ? { ...i, contents, updatedAt: Date.now() } : i ) this.files = _buildTree(this.workspaceItems) } if (previewContent != null && this.layoutConfig?.layout) { const walk = (node) => { if (!node) return for (const t of node.children ?? []) { if (t.type === 'preview' && t.path === blockPath) { t.previewContent = previewContent if (positionMap) t.positionMap = positionMap } walk(t) } } walk(this.layoutConfig.layout) } }, // Markdown editor (cnc-markdown-tiptap) save: persist the file AND, in the same // round-trip, update the .md preview tab's previewContent + the editor tab's // mdContent in `layoutConfig` — so the preview reflects the edit and the editor // keeps the latest content across tab switches. $saveMarkdownEdit(input) { const { _key, workspaceId, contents, path, previewContent } = input const item = this.workspaceItems.find((i) => i._key === _key && i.workspace === workspaceId) if (item && item.type !== 'folder') { this.workspaceItems = this.workspaceItems.map((i) => i._key === _key ? { ...i, contents, updatedAt: Date.now() } : i ) this.files = _buildTree(this.workspaceItems) } if (this.layoutConfig?.layout) { const walk = (node) => { if (!node) return for (const t of node.children ?? []) { if (t.path === path) { if (t.type === 'preview' && previewContent != null) { t.previewContent = previewContent } if (t.type === 'mdeditor') t.mdContent = contents } walk(t) } } walk(this.layoutConfig.layout) } }, } function _nextKey(items, schema) { const nums = items .filter((i) => i._key.startsWith(schema + '/')) .map((i) => parseInt(i._key.split('/')[1], 10)) .filter((n) => !isNaN(n)) return `${schema}/${nums.length ? Math.max(...nums) + 1 : 1}` } function _collectRecursive(key, acc, items) { acc.add(key) const children = items.filter((i) => i.parent === key) for (const child of children) _collectRecursive(child._key, acc, items) } function _buildTree(items) { const map = new Map() const root = { children: [] } for (const item of items) { map.set(item._key, { ...item, ...(item.type === 'folder' ? { children: [] } : {}), }) } for (const item of items) { const node = map.get(item._key) if (item.parent) { const parent = map.get(item.parent) if (parent) parent.children.push(node) } else { root.children.push(node) } } function setPaths(node, parentPath = '') { node.path = parentPath ? `${parentPath}/${node.name}` : node.name if (node.children) node.children.forEach((c) => setPaths(c, node.path)) } root.children.forEach((c) => setPaths(c)) return root } function _findNode(root, key) { for (const child of root.children || []) { if (child._key === key) return child if (child.children) { const found = _findNode(child, key) if (found) return found } } return null }

cnc-workspace

Properties

Slots

Events

Variants

Declaration problems