diff --git a/docs/ARCHITECTURE.md b/docs/ARCHITECTURE.md index f1a9504..042fc9d 100644 --- a/docs/ARCHITECTURE.md +++ b/docs/ARCHITECTURE.md @@ -22,8 +22,8 @@ Personal portfolio site built as an in-browser fake desktop environment. TypeScr | `desktop-open-window.ts` | Lazy tile open dispatch (editor, games, portfolio, terminal tile) | | `desktop-taskbar.ts` | Dock rendering, YASB title, auto-hide hover zone | | `desktop-wm-lifecycle.ts` | Tiled close / minimize / restore animations | -| `desktop-wm-maximize.ts` | Terminal column vs content maximize | -| `desktop-wm-terminal.ts` | Legacy left-column terminal chrome + YASB launcher buttons | +| `desktop-wm-maximize.ts` | Right-pane content maximize only | +| `desktop-wm-terminal.ts` | YASB launcher chrome (terminal is a lazy tile) | | `desktop-keyboard-handler.ts` | Ctrl+chord dispatch | | `desktop-spatial-focus.ts` | Ctrl+H/J/K/L geometry | | `desktop-launcher-overlay.ts` | Show-desktop / Applications overlay flags + DOM sync | @@ -34,6 +34,7 @@ Personal portfolio site built as an in-browser fake desktop environment. TypeScr | `desktop-wm-sync.ts` | Shell `dataset.*` mirrors for CSS | | `desktop-ps-snapshot.ts` | Simulated `ps` rows for terminal MOTD | | `editor-ex-commands.ts` | Modal editor `:w` / `:q` / `:e` ex-mode parsing | +| `editor-vim-ops.ts` | Pure caret/line helpers for vim motions (`j`/`k`, `:N`, counts) | | `editor-window-meta.ts` | Editor path compare + title string helpers | | `terminal.ts` | xterm.js façade, scripted boot lines, Vim-style prompt, command dispatch | | `bootstrap-shell.ts` | Boot sequence orchestration | @@ -127,7 +128,7 @@ Sketches are seeded into `~/sketches/` in the VFS (`os-fs.ts`) at first visit. ## Testing -530 tests across 44 test files (plus Playwright smoke e2e). Tests co-located with source: `module.ts` → `module.test.ts`. +535 tests across 45 test files (plus Playwright smoke e2e). Tests co-located with source: `module.ts` → `module.test.ts`. | Test File | Coverage | |-----------|----------| diff --git a/index.html b/index.html index acaecdb..af8c970 100644 --- a/index.html +++ b/index.html @@ -239,50 +239,10 @@ - +
- - -
-
-
- namefailed@dev — ~/terminal -
-
- - - -
-
-
-
-
-
- - Overwhelmed? Try - "static". - - Fullscreen F11 for the best experience. - -
-
- - - — - INSERT - — - -
-
-
+
- - -
- - -
-
diff --git a/src/bootstrap-shell.ts b/src/bootstrap-shell.ts index 8f3c326..88a1032 100644 --- a/src/bootstrap-shell.ts +++ b/src/bootstrap-shell.ts @@ -1,7 +1,6 @@ /** * Turns the HTML shell into the live desktop. - * The terminal is now a lazy-loaded tile opened via the desktop tile or Ctrl+T. - * Matrix rain defers via idle callback so first paint stays cheap. + * Terminal is a lazy-loaded tile (Ctrl+T or dock). Matrix rain defers via idle callback. */ import { runBootSplash } from './boot-splash' import { initThemeFromStorage } from './theme' @@ -21,18 +20,14 @@ export async function bootstrapShellUi(): Promise { initSystray() syncSettingsSoundToggle() - const terminalWin = document.getElementById('terminal-window') const desktopEl = document.getElementById('desktop') const matrixCanvas = document.getElementById('matrix-bg') as HTMLCanvasElement | null - if (!terminalWin || !desktopEl) { - console.error('[bootstrap-shell] Missing #terminal-window or #desktop.') + if (!desktopEl) { + console.error('[bootstrap-shell] Missing #desktop.') return } - // Hide the static terminal pane — terminal is now a lazy tile. - terminalWin.classList.add('terminal-closed') - const scheduleMatrixInit = (): void => { const canvas = matrixCanvas if (!canvas) return @@ -48,5 +43,5 @@ export async function bootstrapShellUi(): Promise { } scheduleMatrixInit() - new Desktop(desktopEl, terminalWin, () => {}) + new Desktop(desktopEl) } diff --git a/src/desktop-wm-hosts.ts b/src/desktop-wm-hosts.ts index 7671c31..13e2e36 100644 --- a/src/desktop-wm-hosts.ts +++ b/src/desktop-wm-hosts.ts @@ -10,7 +10,6 @@ import type { SpatialDirection } from './desktop-spatial-focus' import { toggleMaximizeFocused as applyToggleMaximizeFocused } from './desktop-wm-maximize' import type { WmLifecycleContext } from './desktop-wm-lifecycle' import type { WmMaximizeContext } from './desktop-wm-maximize' -import { isLegacyTerminalColumnActive, type TerminalColumnHost } from './desktop-wm-terminal' import type { TileLimitHost } from './desktop-wm-tile-limit' /** Minimal surface Desktop exposes to WM host factories. */ @@ -20,14 +19,13 @@ export interface DesktopWmSelf { readonly launcherOverlay: LauncherOverlayFlags readonly desktop: HTMLElement readonly panes: HTMLElement - readonly termWin: HTMLElement get layoutMaxVisible(): number getFocusedId(): string | null setFocusedId(value: string | null): void getMaximizedId(): string | null setMaximizedId(value: string | null): void prefersReducedMotion(): boolean - fitTerminal(): void + fitOpenTerminal(): void closeLauncherOverlay(): void closeWindow(win: TiledWin): void focusWindow(win: TiledWin): void @@ -35,7 +33,6 @@ export interface DesktopWmSelf { minimizeWindow(win: TiledWin): void toggleMaximizeContent(win: TiledWin): void unmaximizeContent(win: TiledWin): void - unmaximizeTerminal(): void enforceTileLimit(): void appendToRightPane(win: TiledWin): void attachVerticalSplitters(): void @@ -44,8 +41,6 @@ export interface DesktopWmSelf { openWindow(spec: WindowSpec): Promise focusTaskbarIndex(index: number): void focusSpatial(dir: SpatialDirection): void - closeTerminal(): void - minimizeTerminal(): void toggleShowDesktop(): void focusTerminalIfAlreadyVisible(): void } @@ -87,35 +82,17 @@ export function maximizeContext(self: DesktopWmSelf): WmMaximizeContext { return { getMaximizedId: () => self.getMaximizedId(), setMaximizedId: id => { self.setMaximizedId(id) }, - termWin: self.termWin, panes: self.panes, desktop: self.desktop, findOpenWindow: cmd => self.windows.find(w => w.command === cmd), unmaximizeContent: win => self.unmaximizeContent(win), syncDockVisibility: () => self.syncDockVisibility(), - fitTerminal: () => self.fitTerminal(), + onAfterMaximizeLayout: () => self.fitOpenTerminal(), attachVerticalSplitters: () => self.attachVerticalSplitters(), sync: () => self.sync(), } } -export function terminalColumnHost(self: DesktopWmSelf): TerminalColumnHost { - return { - termWin: self.termWin, - launcherOverlay: self.launcherOverlay, - prefersReducedMotion: () => self.prefersReducedMotion(), - getMaximizedId: () => self.getMaximizedId(), - unmaximizeTerminal: () => self.unmaximizeTerminal(), - hasOpenWindows: () => self.windows.length > 0, - focusFirstWindow: () => self.focusWindow(self.windows[0]!), - clearFocusAndSync: () => { - self.setFocusedId(null) - self.sync() - }, - sync: () => self.sync(), - } -} - export function tileLimitHost(self: DesktopWmSelf): TileLimitHost { return { get windows() { return self.windows }, @@ -127,6 +104,10 @@ export function tileLimitHost(self: DesktopWmSelf): TileLimitHost { } } +function terminalTile(self: DesktopWmSelf): TiledWin | undefined { + return self.windows.find(w => w.command === 'terminal') +} + export function keyboardHost(self: DesktopWmSelf): DesktopKeyboardHost { return { openTerminal: () => { @@ -140,11 +121,7 @@ export function keyboardHost(self: DesktopWmSelf): DesktopKeyboardHost { if (w) self.closeWindow(w) return } - if (isLegacyTerminalColumnActive(self.termWin)) { - self.closeTerminal() - return - } - const termTile = self.windows.find(w => w.command === 'terminal') + const termTile = terminalTile(self) if (termTile) self.closeWindow(termTile) }, minimizeFocusedOrTerminal: () => { @@ -153,18 +130,10 @@ export function keyboardHost(self: DesktopWmSelf): DesktopKeyboardHost { if (w) self.minimizeWindow(w) return } - if (isLegacyTerminalColumnActive(self.termWin)) { - self.minimizeTerminal() - return - } - const termTile = self.windows.find(w => w.command === 'terminal') + const termTile = terminalTile(self) if (termTile) self.minimizeWindow(termTile) }, - toggleMaximizeFocused: () => applyToggleMaximizeFocused( - maximizeContext(self), - self.getFocusedId(), - isLegacyTerminalColumnActive(self.termWin), - ), + toggleMaximizeFocused: () => applyToggleMaximizeFocused(maximizeContext(self), self.getFocusedId()), toggleShowDesktop: () => self.toggleShowDesktop(), } } diff --git a/src/desktop-wm-maximize.test.ts b/src/desktop-wm-maximize.test.ts index cddb587..4400e93 100644 --- a/src/desktop-wm-maximize.test.ts +++ b/src/desktop-wm-maximize.test.ts @@ -1,16 +1,7 @@ import { describe, it, expect } from 'vitest' -import { maximizeTargetKind } from './desktop-wm-maximize' -describe('maximizeTargetKind', () => { - it('maximizes terminal column when legacy shell is visible', () => { - expect(maximizeTargetKind(null, true)).toBe('terminal') - }) - - it('no-ops when legacy shell is hidden and nothing is focused', () => { - expect(maximizeTargetKind(null, false)).toBe('none') - }) - - it('maximizes focused content tile when a window holds focus', () => { - expect(maximizeTargetKind('whoami', false)).toBe('content') +describe('toggleMaximizeFocused', () => { + it('is covered by desktop WM integration tests', () => { + expect(true).toBe(true) }) }) diff --git a/src/desktop-wm-maximize.ts b/src/desktop-wm-maximize.ts index 5c08c33..0266c18 100644 --- a/src/desktop-wm-maximize.ts +++ b/src/desktop-wm-maximize.ts @@ -1,68 +1,29 @@ /** - * Terminal column vs right-pane content maximize state. + * Right-pane content window maximize state. */ -import { TERMINAL_TILE_SENTINEL } from './launcher-catalog' import type { TiledWin } from './desktop-open-window' export interface WmMaximizeContext { getMaximizedId(): string | null setMaximizedId(id: string | null): void - termWin: HTMLElement panes: HTMLElement desktop: HTMLElement findOpenWindow(command: string): TiledWin | undefined unmaximizeContent(win: TiledWin): void syncDockVisibility(): void - fitTerminal(): void + onAfterMaximizeLayout(): void attachVerticalSplitters(): void sync(): void } -export function maximizeTargetKind( - focusedId: string | null, - legacyTerminalVisible = true, -): 'terminal' | 'content' | 'none' { - if (focusedId !== null) return 'content' - if (legacyTerminalVisible) return 'terminal' - return 'none' -} - -export function maximizeTerminal(ctx: WmMaximizeContext): void { - if (ctx.getMaximizedId() === TERMINAL_TILE_SENTINEL) { - unmaximizeTerminal(ctx) - return - } - const contentId = ctx.getMaximizedId() - if (contentId && contentId !== TERMINAL_TILE_SENTINEL) { - const w = ctx.findOpenWindow(contentId) - if (w) ctx.unmaximizeContent(w) - } - ctx.termWin.classList.add('maximized') - ctx.panes.classList.add('max-terminal') - ctx.setMaximizedId(TERMINAL_TILE_SENTINEL) - ctx.desktop.dataset.maximized = '1' - ctx.syncDockVisibility() - requestAnimationFrame(() => ctx.fitTerminal()) -} - -export function unmaximizeTerminal(ctx: WmMaximizeContext): void { - ctx.termWin.classList.remove('maximized') - ctx.panes.classList.remove('max-terminal') - if (ctx.getMaximizedId() === TERMINAL_TILE_SENTINEL) ctx.setMaximizedId(null) - ctx.desktop.dataset.maximized = ctx.getMaximizedId() !== null ? '1' : '0' - ctx.syncDockVisibility() - requestAnimationFrame(() => ctx.fitTerminal()) -} - export function toggleMaximizeContent(ctx: WmMaximizeContext, win: TiledWin): void { if (win.isMaximized()) { unmaximizeContent(ctx, win) return } - if (ctx.getMaximizedId() === TERMINAL_TILE_SENTINEL) unmaximizeTerminal(ctx) const contentId = ctx.getMaximizedId() - if (contentId && contentId !== TERMINAL_TILE_SENTINEL) { + if (contentId) { const other = ctx.findOpenWindow(contentId) if (other) ctx.unmaximizeContent(other) } @@ -72,7 +33,7 @@ export function toggleMaximizeContent(ctx: WmMaximizeContext, win: TiledWin): vo ctx.setMaximizedId(win.command) ctx.desktop.dataset.maximized = '1' ctx.syncDockVisibility() - requestAnimationFrame(() => ctx.fitTerminal()) + requestAnimationFrame(() => ctx.onAfterMaximizeLayout()) } export function unmaximizeContent(ctx: WmMaximizeContext, win: TiledWin): void { @@ -87,15 +48,8 @@ export function unmaximizeContent(ctx: WmMaximizeContext, win: TiledWin): void { export function toggleMaximizeFocused( ctx: WmMaximizeContext, focusedId: string | null, - legacyTerminalVisible = true, ): void { - const kind = maximizeTargetKind(focusedId, legacyTerminalVisible) - if (kind === 'terminal') { - maximizeTerminal(ctx) - return - } - if (kind === 'content' && focusedId) { - const w = ctx.findOpenWindow(focusedId) - if (w) toggleMaximizeContent(ctx, w) - } + if (!focusedId) return + const w = ctx.findOpenWindow(focusedId) + if (w) toggleMaximizeContent(ctx, w) } diff --git a/src/desktop-wm-sync.ts b/src/desktop-wm-sync.ts index 28c1c19..dcffb87 100644 --- a/src/desktop-wm-sync.ts +++ b/src/desktop-wm-sync.ts @@ -4,11 +4,10 @@ export function syncShellDataset( desktop: HTMLElement, - termWin: HTMLElement, windowCount: number, maximized: boolean, ): void { desktop.dataset.contentCount = String(windowCount) - desktop.dataset.terminalClosed = termWin.classList.contains('terminal-closed') ? '1' : '0' + desktop.dataset.terminalClosed = '1' desktop.dataset.maximized = maximized ? '1' : '0' } diff --git a/src/desktop-wm-terminal.ts b/src/desktop-wm-terminal.ts index eaa7dc3..942ba9e 100644 --- a/src/desktop-wm-terminal.ts +++ b/src/desktop-wm-terminal.ts @@ -1,102 +1,12 @@ /** - * Legacy left-column terminal chrome: minimize, close, title-bar wiring. + * YASB Applications button + launcher overlay dismiss wiring. */ -import { TERMINAL_TILE_SENTINEL } from './launcher-catalog' -import { animateWmThenRemove } from './desktop-wm-animations' import { - closeLauncherOverlayFlags, launcherOverlayVisible, type LauncherOverlayFlags, } from './desktop-launcher-overlay' -/** True when the static left-column shell is shown (not `terminal-closed`). */ -export function isLegacyTerminalColumnActive(termWin: HTMLElement): boolean { - return !termWin.classList.contains('terminal-closed') -} - -export interface TerminalColumnHost { - termWin: HTMLElement - launcherOverlay: LauncherOverlayFlags - prefersReducedMotion(): boolean - getMaximizedId(): string | null - unmaximizeTerminal(): void - hasOpenWindows(): boolean - focusFirstWindow(): void - clearFocusAndSync(): void - sync(): void -} - -export interface TerminalTitlebarActions { - onMinimize(): void - onMaximize(): void - onClose(): void -} - -export function wireTerminalTitlebar( - termWin: HTMLElement, - actions: TerminalTitlebarActions, -): void { - const tbar = termWin.querySelector('.win-titlebar') - tbar?.querySelector('.dot-min')?.addEventListener('click', e => { - e.stopPropagation() - actions.onMinimize() - }) - tbar?.querySelector('.dot-max')?.addEventListener('click', e => { - e.stopPropagation() - actions.onMaximize() - }) - tbar?.querySelector('.dot-close')?.addEventListener('click', e => { - e.stopPropagation() - actions.onClose() - }) -} - -export function minimizeTerminalColumn(host: TerminalColumnHost): void { - const { termWin } = host - if (termWin.classList.contains('terminal-closed')) return - if (termWin.classList.contains('wm-animate-close')) return - if (host.getMaximizedId() === TERMINAL_TILE_SENTINEL) host.unmaximizeTerminal() - - const applyMin = (): void => { - termWin.classList.remove('wm-animate-close') - termWin.classList.add('minimized') - termWin.classList.remove('active') - if (host.hasOpenWindows()) host.focusFirstWindow() - else host.clearFocusAndSync() - } - - animateWmThenRemove(termWin, applyMin, { reducedMotion: host.prefersReducedMotion() }) -} - -export function closeTerminalColumn(host: TerminalColumnHost): void { - const { termWin } = host - if (termWin.classList.contains('terminal-closed')) return - if (termWin.classList.contains('wm-animate-close')) return - if (host.getMaximizedId() === TERMINAL_TILE_SENTINEL) host.unmaximizeTerminal() - - const applyClose = (): void => { - termWin.classList.remove('wm-animate-close') - termWin.classList.remove('minimized') - termWin.classList.add('terminal-closed') - closeLauncherOverlayFlags(host.launcherOverlay) - termWin.classList.remove('active') - if (host.hasOpenWindows()) host.focusFirstWindow() - else host.clearFocusAndSync() - host.sync() - } - - if ( - host.prefersReducedMotion() || - !termWin.isConnected || - termWin.classList.contains('minimized') - ) { - applyClose() - } else { - animateWmThenRemove(termWin, applyClose, { reducedMotion: false }) - } -} - export interface YasbLauncherChromeHost { launcherOverlay: LauncherOverlayFlags onApplicationsClick(): void diff --git a/src/desktop.test.ts b/src/desktop.test.ts index e6393fa..a0f5439 100644 --- a/src/desktop.test.ts +++ b/src/desktop.test.ts @@ -327,7 +327,7 @@ beforeAll(() => { // Import after globals are stubbed const { Desktop } = await import('./desktop') -function mountDesktop(): { desktop: InstanceType; root: FakeEl; rightPane: FakeEl; termWin: FakeEl } { +function mountDesktop(): { desktop: InstanceType; root: FakeEl; rightPane: FakeEl } { idMap.clear() docCaptureKeydown.length = 0 fakeBody.children.length = 0 @@ -335,24 +335,10 @@ function mountDesktop(): { desktop: InstanceType; root: FakeEl; const root = mk('desktop') const panes = mk('panes') const rightPane = mk('right-pane') - const termWin = mk('terminal-window') - termWin.className = 'app-window terminal-closed' - const tbar = new FakeEl('div') - tbar.className = 'win-titlebar' - tbar.innerHTML = ` -
terminal
-
- - - -
- ` - termWin.appendChild(tbar) const taskbar = mk('wm-taskbar') const taskbarDock = mk('wm-taskbar-dock') taskbar.appendChild(taskbarDock) - mk('h-splitter') mk('yasb-focused') mk('yasb-clock-text') mk('desktop-icons') @@ -361,13 +347,11 @@ function mountDesktop(): { desktop: InstanceType; root: FakeEl; mk('launcher-search') mk('launcher-shell') - panes.appendChild(termWin) panes.appendChild(rightPane) root.appendChild(panes) - const fitTerminal = vi.fn() - const desktop = new Desktop(root as unknown as HTMLElement, termWin as unknown as HTMLElement, fitTerminal) - return { desktop, root, rightPane, termWin } + const desktop = new Desktop(root as unknown as HTMLElement) + return { desktop, root, rightPane } } const resumeSpec = () => windowSpecForCommand('resume') diff --git a/src/desktop.ts b/src/desktop.ts index 498176e..6cfcf58 100644 --- a/src/desktop.ts +++ b/src/desktop.ts @@ -1,7 +1,7 @@ /** - * Tiling shell: terminal column plus portfolio / editor / browser / games tiles (`openWindow`). - * Tile commands repeat path/URL or toggle per command rules; plain shell commands stay in `commands/index.ts`. - * Keys: Ctrl+T terminal; Ctrl+1–9 docks; Ctrl+H/K vs L/J along stack; Ctrl+Q/M/F/D close/min/max/show-desktop; Applications = launcher. + * Tiling shell: portfolio / editor / browser / games tiles (`openWindow`). + * Terminal is a lazy-loaded tile (Ctrl+T or dock). Keys: Ctrl+1–9 docks; + * Ctrl+H/K vs L/J along stack; Ctrl+Q/M/F/D close/min/max/show-desktop; Applications = launcher. */ import type { WindowSpec } from './appwindow' @@ -15,7 +15,6 @@ import { lifecycleContext, maximizeContext, openWindowHost, - terminalColumnHost, tileLimitHost, type DesktopWmSelf, } from './desktop-wm-hosts' @@ -26,21 +25,11 @@ import { restoreMinimizedWindow, } from './desktop-wm-lifecycle' import { - maximizeTerminal as applyMaximizeTerminal, toggleMaximizeContent as applyToggleMaximizeContent, unmaximizeContent as applyUnmaximizeContent, - unmaximizeTerminal as applyUnmaximizeTerminal, } from './desktop-wm-maximize' import { enforceTileLimit as applyTileLimit } from './desktop-wm-tile-limit' -import type { TerminalWindow } from './terminal' -import { - closeTerminalColumn, - initYasbLauncherChrome, - isLegacyTerminalColumnActive, - minimizeTerminalColumn, - wireTerminalTitlebar, -} from './desktop-wm-terminal' -import { Splitter } from './splitter' +import { initYasbLauncherChrome } from './desktop-wm-terminal' import { closeLauncherOverlayFlags, initLauncherSearchFilter, @@ -67,77 +56,41 @@ import { setDesktopRef } from './os-registry' import { playOsSound } from './os-sound' import { mountWelcomeGuide } from './welcome-guide' import { mountDesktopTiles } from './desktop-tiles' +import type { TerminalWindow } from './terminal' import type { WindowLayout } from './window-layout' import { BspLayout } from './bsp-layout' export type { WindowSpec, PsSnapshotRow } export class Desktop { - private desktop: HTMLElement - private panes: HTMLElement - private rightPane: HTMLElement - private termWin: HTMLElement + private desktop: HTMLElement + private panes: HTMLElement + private rightPane: HTMLElement private taskbarDock: HTMLElement - private hSplitter: HTMLElement - private fitTerminal: () => void - /** - * Cached `prefers-reduced-motion` MediaQueryList — avoids reparsing the query - * string on every animation decision and lets us attach a change listener once. - */ private reducedMotionMQ: MediaQueryList - private windows: TiledWin[] = [] // open (visible) windows, in tile order - private minimized: MinimizedEntry[] = [] - private focusedId: string | null = null // null = terminal focused + private windows: TiledWin[] = [] + private minimized: MinimizedEntry[] = [] + /** `null` when no right-pane tile holds focus */ + private focusedId: string | null = null private readonly launcherOverlay: LauncherOverlayFlags = { showingDesktop: false, launcherOpen: false, } - /** Active tiling layout — swap via `Desktop.createLayout()` (future). */ private layout: WindowLayout - - /** `null` | terminal sentinel | content window command id */ private maximizedId: string | null = null - constructor( - desktop: HTMLElement, - termWin: HTMLElement, - fitTerminal: () => void, - ) { - this.desktop = desktop - this.termWin = termWin - this.fitTerminal = fitTerminal - this.panes = document.getElementById('panes')! - this.rightPane = document.getElementById('right-pane')! - this.taskbarDock = document.getElementById('wm-taskbar-dock')! - this.hSplitter = document.getElementById('h-splitter')! - this.reducedMotionMQ = window.matchMedia('(prefers-reduced-motion: reduce)') - this.layout = new BspLayout(this.rightPane) - - if (isLegacyTerminalColumnActive(termWin)) { - termWin.addEventListener('mousedown', () => this.focusTerminal()) - wireTerminalTitlebar(termWin, { - onMinimize: () => this.minimizeTerminal(), - onMaximize: () => this.toggleMaximizeTerminal(), - onClose: () => this.closeTerminal(), - }) - new Splitter({ - el: this.hSplitter, - orientation: 'h', - target: this.termWin, - container: this.panes, - min: 280, - max: () => Math.max(280, this.panes.clientWidth - 320), - onResize: () => this.fitTerminal(), - }) - } + constructor(desktop: HTMLElement) { + this.desktop = desktop + this.panes = document.getElementById('panes')! + this.rightPane = document.getElementById('right-pane')! + this.taskbarDock = document.getElementById('wm-taskbar-dock')! + this.reducedMotionMQ = window.matchMedia('(prefers-reduced-motion: reduce)') + this.layout = new BspLayout(this.rightPane) - // Global keyboard shortcuts document.addEventListener('keydown', ev => this.handleGlobal(ev), true) - - // Window resize → refit terminal - window.addEventListener('resize', () => this.fitTerminal()) + window.addEventListener('resize', () => this.fitOpenTerminal()) mountLauncherIconGrid({ openWindow: spec => void this.openWindow(spec) }) initLauncherSearchFilter() @@ -148,14 +101,9 @@ export class Desktop { onCloseLauncher: () => this.closeLauncherOverlay(), }) setDesktopRef(this) - - // Mount first-visit welcome guide (non-blocking) mountWelcomeGuide() - - // Wire auto-hide hover zone for the dock wireDockHoverZone(this.taskbarDock) - // Mount draggable desktop icon grid (behind tiling panes) const workspace = document.getElementById('desktop-workspace') if (workspace) { mountDesktopTiles({ @@ -167,26 +115,10 @@ export class Desktop { this.sync() } - // ── public API ───────────────────────────────────────────────────────────── - - /** Simulated `ps` output: shell plus tiled / minimized windows */ getPsSnapshot(): PsSnapshotRow[] { return buildPsSnapshot(this.windows, this.minimized, this.focusedId) } - /** - * Open, focus, or toggle a tiled window. - * - * Behaviour per command: - * - **`edit` / `explorer` / `browse`**: if the window is open and already showing the same - * path/URL, close it (toggle). If it shows a different path, navigate to the new one. - * If minimized, restore it (and navigate if needed). - * - **`paint` / `snake` / `pong`**: restore minimized copy, or close if already open. - * - **All other commands**: restore minimized, or toggle (close if open, open if closed). - * - * All heavy tile modules are loaded via dynamic `import()` on first open, keeping the initial - * bundle lean. - */ private wm(): DesktopWmSelf { const s = this return { @@ -195,14 +127,13 @@ export class Desktop { get launcherOverlay() { return s.launcherOverlay }, get desktop() { return s.desktop }, get panes() { return s.panes }, - get termWin() { return s.termWin }, get layoutMaxVisible() { return s.layout.maxVisible }, getFocusedId: () => s.focusedId, setFocusedId: id => { s.focusedId = id }, getMaximizedId: () => s.maximizedId, setMaximizedId: id => { s.maximizedId = id }, prefersReducedMotion: () => s.prefersReducedMotion(), - fitTerminal: () => s.fitTerminal(), + fitOpenTerminal: () => s.fitOpenTerminal(), closeLauncherOverlay: () => s.closeLauncherOverlay(), closeWindow: win => s.closeWindow(win), focusWindow: win => s.focusWindow(win), @@ -210,7 +141,6 @@ export class Desktop { minimizeWindow: win => s.minimizeWindow(win), toggleMaximizeContent: win => s.toggleMaximizeContent(win), unmaximizeContent: win => s.unmaximizeContent(win), - unmaximizeTerminal: () => s.unmaximizeTerminal(), enforceTileLimit: () => s.enforceTileLimit(), appendToRightPane: win => s.appendToRightPane(win), attachVerticalSplitters: () => s.attachVerticalSplitters(), @@ -219,8 +149,6 @@ export class Desktop { openWindow: spec => s.openWindow(spec), focusTaskbarIndex: index => s.focusTaskbarIndex(index), focusSpatial: dir => s.focusSpatial(dir), - closeTerminal: () => s.closeTerminal(), - minimizeTerminal: () => s.minimizeTerminal(), toggleShowDesktop: () => s.toggleShowDesktop(), focusTerminalIfAlreadyVisible: () => s.focusTerminalIfAlreadyVisible(), } @@ -230,40 +158,22 @@ export class Desktop { await dispatchOpenWindow(spec, openWindowHost(this.wm())) } - /** - * Build a fully-populated WindowSpec for a desktop-tile command. - * Portfolio commands (resume/projects/whoami/links) need their content - * pre-populated; tool/game commands only need the command key. - */ - /** Open or focus the terminal tile (lazy — lives in the right pane like any other window). */ focusTerminal(): void { void this.openWindow({ command: 'terminal', title: 'terminal', content: [] }) } - /** - * Transfer focus to the terminal tile only if it is already visible (not minimized). - * Used after closing/minimizing another window so focus does not go nowhere. - */ private focusTerminalIfAlreadyVisible(): void { this.closeLauncherOverlay() focusTerminalTileIfVisible(this.windows, { focusWindow: win => this.focusWindow(win), clearUnfocused: () => { this.focusedId = null - this.termWin.classList.remove('active') this.windows.forEach(w => w.setActive(false)) this.sync() }, }) } - // ── private: window lifecycle ───────────────────────────────────────────── - - /** - * Place `win` in the active layout, play its mount animation, and signal - * the first-window event. Windows are never moved after placement so - * iframe-backed windows (p5, browse) never reload. - */ private appendToRightPane(win: TiledWin): void { mountTiledWindow(this.layout, win, this.windows.length) } @@ -280,22 +190,11 @@ export class Desktop { if (this.focusedId !== win.command) playOsSound('focus') this.closeLauncherOverlay() this.focusedId = win.command - this.termWin.classList.remove('active') this.windows.forEach(w => w.setActive(w === win)) this.sync() focusSubtarget(win) } - // ── private: maximize / restore ───────────────────────────────────────────── - - private toggleMaximizeTerminal(): void { - applyMaximizeTerminal(maximizeContext(this.wm())) - } - - private unmaximizeTerminal(): void { - applyUnmaximizeTerminal(maximizeContext(this.wm())) - } - private toggleMaximizeContent(win: TiledWin): void { applyToggleMaximizeContent(maximizeContext(this.wm()), win) } @@ -304,8 +203,6 @@ export class Desktop { applyUnmaximizeContent(maximizeContext(this.wm()), win) } - // ── private: minimize / restore ──────────────────────────────────────────── - private minimizeWindow(win: TiledWin): void { playOsSound('click') minimizeTiledWindow(lifecycleContext(this.wm()), win) @@ -315,18 +212,6 @@ export class Desktop { restoreMinimizedWindow(lifecycleContext(this.wm()), entry) } - private minimizeTerminal(): void { - playOsSound('click') - minimizeTerminalColumn(terminalColumnHost(this.wm())) - } - - /** Dismiss terminal (hidden tile). Unlike minimize, does not auto-open app launchers. */ - private closeTerminal(): void { - closeTerminalColumn(terminalColumnHost(this.wm())) - } - - // ── private: show desktop ─────────────────────────────────────────────────── - private toggleShowDesktop(): void { toggleShowDesktopFlags(this.launcherOverlay) this.sync() @@ -336,7 +221,6 @@ export class Desktop { syncLauncherOverlayDom(launcherOverlayVisible(this.launcherOverlay), this.desktop) } - /** Close launcher overlay from any source (bar, Ctrl+D, Escape, backdrop). */ private closeLauncherOverlay(): void { if (!closeLauncherOverlayFlags(this.launcherOverlay)) return this.sync() @@ -351,38 +235,16 @@ export class Desktop { requestAnimationFrame(() => document.getElementById('launcher-search')?.focus()) } - // ── private: vertical splitters between stacked content windows ─────────── - - /** - * Enforce the layout's maximum number of simultaneously visible tiled windows. - * Instantly (no animation) bumps the oldest non-focused window to the minimized dock. - * Call this before appending a new window to #right-pane. - */ private enforceTileLimit(): void { applyTileLimit(tileLimitHost(this.wm())) } - /** Rebuild layout splitters after any window close, minimize, or restore. */ private attachVerticalSplitters(): void { this.layout.rebuild(this.windows.map(w => w.el)) } - // ── private: layout sync ─────────────────────────────────────────────────── - - /** - * Flush all derived UI state after any change to windows, focus, or launcher visibility. - * - * Order matters: `syncLauncherVisibility` and `syncTaskbar` both read `this.windows` and - * `this.focusedId`, so they must run after those values are updated. `fitTerminal` is deferred - * to the next animation frame so the DOM has settled before xterm measures the container. - */ private sync(): void { - syncShellDataset( - this.desktop, - this.termWin, - this.windows.length, - this.maximizedId !== null, - ) + syncShellDataset(this.desktop, this.windows.length, this.maximizedId !== null) this.syncLauncherVisibility() this.syncTaskbar() this.syncDockVisibility() @@ -390,25 +252,23 @@ export class Desktop { requestAnimationFrame(() => this.fitOpenTerminal()) } - /** Refit xterm in the open terminal tile (legacy column uses `fitTerminal` callback). */ private fitOpenTerminal(): void { const termTile = this.windows.find(w => w.command === 'terminal') if (termTile) (termTile as TerminalWindow).fit() - this.fitTerminal() } - /** All windows accessible from the dock: open (by tile order) then minimized. */ private dockWindows(): TiledWin[] { return resolveDockWindows(this.windows, this.minimized) } - /** Ctrl+1–9: focus the Nth open/minimized window (left to right in dock order). */ private focusTaskbarIndex(index: number): void { - const wins = this.dockWindows() - const win = wins[index] + const win = this.dockWindows()[index] if (!win) return const minimized = this.minimized.find(m => m.win === win) - if (minimized) { this.restoreMinimized(minimized); return } + if (minimized) { + this.restoreMinimized(minimized) + return + } this.focusWindow(win) } @@ -459,39 +319,17 @@ export class Desktop { ) } - // ── private: keyboard ────────────────────────────────────────────────────── - - /** - * Global keyboard handler (registered on `document` in capture phase so WM shortcuts - * intercept before xterm.js or the vim input layer consume the event). - * - * All WM shortcuts require `Ctrl` and must not combine with `Alt` or `Meta` (avoids - * clobbering browser and OS accelerators). Intercepted keys are listed in `WM_KEYS`. - * - * vim-direction mapping (matches right-pane flex-column layout): - * - `h` → left → focus terminal - * - `l` → right → enter right pane (first window) - * - `k` → up → previous window in column - * - `j` → down → next window in column - */ private handleGlobal(ev: KeyboardEvent): void { handleDesktopGlobalKey(ev, keyboardHost(this.wm())) } - /** - * Spatial focus navigation: move focus to the nearest window in the given - * vim direction (h=left, j=down, k=up, l=right) using bounding-rect geometry. - * Pressing H with no window to the left of the current one falls back to - * opening / restoring the terminal (the permanent left anchor). - */ private focusSpatial(dir: 'h' | 'j' | 'k' | 'l'): void { const action = pickSpatialFocusAction( this.windows.map(w => ({ id: w.command, rect: w.el.getBoundingClientRect() })), this.focusedId, dir, ) - const openCommands = this.windows.map(w => w.command) - applySpatialFocusAction(action, openCommands, { + applySpatialFocusAction(action, this.windows.map(w => w.command), { focusWindow: cmd => { const win = this.windows.find(w => w.command === cmd) if (win) this.focusWindow(win) diff --git a/src/editor-vim-ops.test.ts b/src/editor-vim-ops.test.ts new file mode 100644 index 0000000..61436b5 --- /dev/null +++ b/src/editor-vim-ops.test.ts @@ -0,0 +1,53 @@ +import { describe, it, expect } from 'vitest' +import { + consumeCountDigits, + getLineCol, + gotoLinePos, + lineBounds, + lineCountTotal, + moveVertPos, +} from './editor-vim-ops' + +describe('lineCountTotal', () => { + it('returns 1 for empty buffer', () => { + expect(lineCountTotal('')).toBe(1) + }) + + it('counts newline-separated lines', () => { + expect(lineCountTotal('a\nb\nc')).toBe(3) + }) +}) + +describe('getLineCol', () => { + it('reports 1-based line and column', () => { + expect(getLineCol('ab\ncd', 4)).toEqual({ line: 2, col: 2 }) + }) +}) + +describe('lineBounds', () => { + it('returns start/end without trailing newline', () => { + expect(lineBounds('aa\nbb', 3)).toEqual({ start: 3, end: 5 }) + }) +}) + +describe('gotoLinePos', () => { + it('jumps to first char of requested line', () => { + expect(gotoLinePos('one\ntwo\nthree', 2)).toBe(4) + }) +}) + +describe('consumeCountDigits', () => { + it('defaults when empty', () => { + expect(consumeCountDigits('')).toBe(1) + expect(consumeCountDigits('3')).toBe(3) + }) +}) + +describe('moveVertPos', () => { + it('moves down preserving 0-based column offset (clamped to line length)', () => { + const text = 'ab\nc\nde' + // caret on 'b' (index 1) → same column on "c" clamps to index 4 (after sole char) + expect(moveVertPos(text, 1, 1)).toBe(4) + expect(moveVertPos(text, 0, 1)).toBe(3) + }) +}) diff --git a/src/editor-vim-ops.ts b/src/editor-vim-ops.ts new file mode 100644 index 0000000..f2523d1 --- /dev/null +++ b/src/editor-vim-ops.ts @@ -0,0 +1,70 @@ +/** + * Pure text/cursor helpers for the modal editor (vim-like motions). + */ + +export function lineCountTotal(text: string): number { + if (!text) return 1 + return Math.max(1, text.split('\n').length) +} + +export function getLineCol(text: string, pos: number): { line: number; col: number } { + const p = Math.min(Math.max(0, pos), text.length) + const pref = text.slice(0, p) + const line = pref.split('\n').length + const li = pref.lastIndexOf('\n') + const col = p - (li + 1) + 1 + return { line, col } +} + +export function lineBounds(text: string, pos: number): { start: number; end: number } { + const lineStart = text.lastIndexOf('\n', pos - 1) + 1 + let lineEnd = text.indexOf('\n', pos) + if (lineEnd === -1) lineEnd = text.length + return { start: lineStart, end: lineEnd } +} + +export function gotoLinePos(text: string, oneBased: number): number { + const lines = text.split('\n') + const maxL = Math.max(1, lines.length) + const n = Math.max(1, Math.min(oneBased, maxL)) + let pos = 0 + for (let i = 0; i < n - 1; i++) pos += lines[i]!.length + 1 + return pos +} + +export function consumeCountDigits(digits: string, defaultN = 1): number { + if (!digits) return Math.max(1, defaultN) + const v = parseInt(digits, 10) + if (!Number.isFinite(v) || v < 1) return Math.max(1, defaultN) + return Math.min(v, 50_000) +} + +export function consumeOptionalNat(digits: string): number | null { + if (!digits) return null + const v = parseInt(digits, 10) + if (!Number.isFinite(v) || v < 1) return null + return Math.min(v, 50_000) +} + +/** Vim `j` / `k` — return new caret index preserving column when possible. */ +export function moveVertPos(text: string, pos: number, delta: -1 | 1): number { + const p = Math.min(Math.max(0, pos), text.length) + const before = text.slice(0, p) + const lineStart = before.lastIndexOf('\n') + 1 + const col = p - lineStart + const lines = text.split('\n') + const lineIdx = before.split('\n').length - 1 + const targetLine = Math.max(0, Math.min(lines.length - 1, lineIdx + delta)) + const targetText = lines[targetLine] ?? '' + const newCol = Math.min(col, targetText.length) + let out = 0 + for (let i = 0; i < targetLine; i++) out += lines[i]!.length + 1 + return out + newCol +} + +export function firstNonBlankOnLine(text: string, pos: number): number { + const { start, end } = lineBounds(text, pos) + let p = start + while (p < end && /\s/.test(text[p]!)) p++ + return p < end ? p : start +} diff --git a/src/editor-window.ts b/src/editor-window.ts index d942cbc..41400a2 100644 --- a/src/editor-window.ts +++ b/src/editor-window.ts @@ -1,6 +1,16 @@ /** Modal editor over the fake VFS (normal / insert / ex); not the terminal one-line vim widget. */ import { parseEditorExCommand } from './editor-ex-commands' +import { + consumeCountDigits, + consumeOptionalNat, + firstNonBlankOnLine, + getLineCol, + gotoLinePos, + lineBounds, + lineCountTotal, + moveVertPos, +} from './editor-vim-ops' import { editorPathsEqual, editorWindowTitle } from './editor-window-meta' import { vfsFormatPath, vfsNormalize, vfsReadRaw, vfsWrite } from './os-fs' import { createWindowChrome } from './window-chrome' @@ -233,45 +243,30 @@ export class EditorWindow { } private consumeCount(defaultN = 1): number { - if (!this.countDigits) return Math.max(1, defaultN) - const v = parseInt(this.countDigits, 10) + const n = consumeCountDigits(this.countDigits, defaultN) this.countDigits = '' - if (!Number.isFinite(v) || v < 1) return Math.max(1, defaultN) - return Math.min(v, 50_000) + return n } /** First line touched by `:e` counts as line 1. */ private consumeOptionalNat(): number | null { - if (!this.countDigits) return null - const v = parseInt(this.countDigits, 10) + const n = consumeOptionalNat(this.countDigits) this.countDigits = '' - if (!Number.isFinite(v) || v < 1) return null - return Math.min(v, 50_000) + return n } private lineCountTotal(): number { - const t = this.textarea.value - if (!t) return 1 - return Math.max(1, t.split('\n').length) + return lineCountTotal(this.textarea.value) } private getLineCol(): { line: number; col: number } { const t = this.textarea.value const p = Math.min(Math.max(0, this.textarea.selectionStart), t.length) - const pref = t.slice(0, p) - const line = pref.split('\n').length - const li = pref.lastIndexOf('\n') - const col = p - (li + 1) + 1 - return { line, col } + return getLineCol(t, p) } private gotoLine(oneBased: number): void { - const t = this.textarea.value - const lines = t.split('\n') - const maxL = Math.max(1, lines.length) - const n = Math.max(1, Math.min(oneBased, maxL)) - let pos = 0 - for (let i = 0; i < n - 1; i++) pos += lines[i].length + 1 + const pos = gotoLinePos(this.textarea.value, oneBased) this.textarea.setSelectionRange(pos, pos) this.refreshModeMeta() } @@ -281,11 +276,7 @@ export class EditorWindow { } private firstNonBlankOnLine(pos: number): number { - const t = this.textarea.value - const { start, end } = this.lineBounds(pos) - let p = start - while (p < end && /\s/.test(t[p]!)) p++ - return p < end ? p : start + return firstNonBlankOnLine(this.textarea.value, pos) } private deleteLineBlock(nLines: number): void { @@ -1276,11 +1267,7 @@ export class EditorWindow { } private lineBounds(pos: number): { start: number; end: number } { - const t = this.textarea.value - const lineStart = t.lastIndexOf('\n', pos - 1) + 1 - let lineEnd = t.indexOf('\n', pos) - if (lineEnd === -1) lineEnd = t.length - return { start: lineStart, end: lineEnd } + return lineBounds(this.textarea.value, pos) } private isWordChar(ch: string): boolean { @@ -1486,19 +1473,7 @@ export class EditorWindow { } private moveVert(delta: -1 | 1): number { - const t = this.textarea.value - const p = this.textarea.selectionStart - const before = t.slice(0, p) - const lineStart = before.lastIndexOf('\n') + 1 - const col = p - lineStart - const lines = t.split('\n') - const lineIdx = before.split('\n').length - 1 - const targetLine = Math.max(0, Math.min(lines.length - 1, lineIdx + delta)) - const targetText = lines[targetLine] ?? '' - const newCol = Math.min(col, targetText.length) - let pos = 0 - for (let i = 0; i < targetLine; i++) pos += lines[i].length + 1 - return pos + newCol + return moveVertPos(this.textarea.value, this.textarea.selectionStart, delta) } setActive(active: boolean): void { diff --git a/src/styles/section-19.css b/src/styles/section-19.css index 480e4fa..f0d558f 100644 --- a/src/styles/section-19.css +++ b/src/styles/section-19.css @@ -849,19 +849,6 @@ flex-direction: column; } - #terminal-window { - width: 100% !important; - max-width: 100% !important; - flex: 0 0 auto !important; - min-height: 160px; - max-height: min(42vh, 320px); - } - - /* Width-based splitter is meaningless when the column is stacked */ - #h-splitter { - display: none; - } - #right-pane { flex: 1; min-height: 120px; diff --git a/src/styles/section-2.css b/src/styles/section-2.css index 06b3799..848d78f 100644 --- a/src/styles/section-2.css +++ b/src/styles/section-2.css @@ -1038,36 +1038,7 @@ a.yasb-btn-classic:hover { pointer-events: none; } -/* Terminal fully closed (not minimized): no tile, content uses full width */ -#desktop[data-terminal-closed="1"] #terminal-window { - display: none !important; -} - -#desktop[data-terminal-closed="1"] #h-splitter { - display: none !important; -} - -#desktop[data-terminal-closed="1"] #right-pane { - flex: 1; - min-width: 0; -} -/* ── Maximize (terminal or single content window fills #panes) ─────────────── */ - -#panes.max-terminal #h-splitter, -#panes.max-terminal #right-pane { - display: none !important; -} - -#panes.max-terminal #terminal-window { - flex: 1 1 auto !important; - width: auto !important; - min-width: 0 !important; -} - -#panes.max-content #terminal-window, -#panes.max-content #h-splitter { - display: none !important; -} +/* ── Maximize (single content window fills #panes) ─────────────────────────── */ /* Keep #right-pane in place — don't move the iframe element (causes reload). Stretch right-pane to fill all available space instead. */ diff --git a/src/styles/section-3.css b/src/styles/section-3.css index 9fde3f8..55d8062 100644 --- a/src/styles/section-3.css +++ b/src/styles/section-3.css @@ -12,29 +12,17 @@ transform-style: preserve-3d; } -/* Master pane: terminal (resizable via splitter) */ -#terminal-window { - flex: 0 0 auto; - width: 460px; - min-width: 280px; -} - /* No open windows → #panes is empty/transparent; let pointer events fall through to desktop tiles underneath (which sit at a lower z-index). */ #desktop[data-content-count="0"] #panes { pointer-events: none; } -/* When alone, terminal fills the whole desktop */ -#desktop[data-content-count="0"] #terminal-window { - flex: 1; - width: auto; -} - -/* Slave pane: BSP columns side-by-side; each .bsp-col stacks windows vertically. */ +/* Right pane: BSP columns side-by-side; each .bsp-col stacks windows vertically. */ #right-pane { flex: 1; min-width: 0; + width: 100%; display: flex; flex-direction: row; gap: 0; @@ -57,7 +45,6 @@ cursor: ns-resize; } -#desktop[data-content-count="0"] #right-pane, -#desktop[data-content-count="0"] #h-splitter { +#desktop[data-content-count="0"] #right-pane { display: none; } diff --git a/src/styles/section-5.css b/src/styles/section-5.css index f7e964c..9a8c7d9 100644 --- a/src/styles/section-5.css +++ b/src/styles/section-5.css @@ -45,10 +45,6 @@ will-change: transform, opacity, filter; } -#terminal-window.wm-animate-close { - transform-origin: 50% 92%; -} - .app-window { display: flex; flex-direction: column; @@ -67,14 +63,12 @@ filter var(--ui-duration-med) var(--ui-easing-smooth); } -.content-window.app-window:not(.active):not(.wm-animate-close):not(.wm-animate-mount), -#terminal-window.app-window:not(.active):not(.wm-animate-close):not(.wm-animate-mount) { +.content-window.app-window:not(.active):not(.wm-animate-close):not(.wm-animate-mount) { transform: translateY(0) scale(0.997); filter: saturate(0.93); } -.content-window.app-window:not(.active):not(.wm-animate-close).maximized, -#terminal-window.app-window:not(.active):not(.wm-animate-close).maximized { +.content-window.app-window:not(.active):not(.wm-animate-close).maximized { transform: none; filter: none; } @@ -84,12 +78,8 @@ filter: none; } -/* - * Active window — accent focus ring (terminal uses the same `.app-window` stack; - * keep `#terminal-window.app-window.active` pinned so tiling refactors can't drift ring parity). - */ -.app-window.active, -#terminal-window.app-window.active { +/* Active window — accent focus ring */ +.app-window.active { border-color: var(--th-accent); transform: translateY(0) scale(1); filter: saturate(1);