@owdproject/react-theme-win95 4.0.0-alpha.3 → 4.0.0-alpha.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@owdproject/react-theme-win95",
-  "version": "4.0.0-alpha.3",
+  "version": "4.0.0-alpha.4",
   "description": "Windows 95 theme for Open Web Desktop built with React, @owdproject/core and @owdproject/react.",
   "license": "MIT",
   "author": {
@@ -21,8 +21,7 @@
     "./package.json": "./package.json"
   },
   "files": [
-    "src",
-    "playground"
+    "src"
   ],
   "scripts": {
     "dev": "vite --config playground/vite.config.ts",

package/src/DesktopShell.tsx

@@ -6,15 +6,16 @@ import { DesktopRuntimeContext } from './desktop-context'
 import { DesktopWindow } from './components/DesktopWindow'
 import { SystemBar } from './components/SystemBar'
 import { StartMenuPanel } from './components/StartMenuPanel'
-import { builtinApps } from './apps'
+import { registerDesktopApps } from './applications'
 import type { DesktopApp } from './types'
 
 const SYSTEMBAR_HEIGHT = 28
+const EMPTY_APPS: DesktopApp[] = []
 
 export interface DesktopShellProps {
   /** A `@owdproject/core` Desktop instance. */
   desktop: Desktop
-  /** Applications exposed in the start menu / task bar. */
+  /** Menu entries; components/configs register with the engine on mount. */
   apps?: DesktopApp[]
   /** Centered desktop watermark text. */
   watermark?: ReactNode
@@ -25,12 +26,15 @@ export interface DesktopShellProps {
  * Composes `@owdproject/react-kit-react95` chrome with `@owdproject/react` hooks
  * and the headless `@owdproject/core` engine.
  */
-export function DesktopShell({ desktop, apps = builtinApps, watermark = 'Open Web Desktop' }: DesktopShellProps) {
+export function DesktopShell({ desktop, apps = EMPTY_APPS, watermark = 'Open Web Desktop' }: DesktopShellProps) {
   const rootRef = useRef<HTMLDivElement>(null)
   const [startOpen, setStartOpen] = useState(false)
-  const idRef = useRef(0)
   const { windows } = useWindowManager(desktop.windows)
 
+  useEffect(() => {
+    registerDesktopApps(desktop, apps)
+  }, [desktop, apps])
+
   const getWorkarea = useCallback(() => {
     const el = rootRef.current
     const width = el?.clientWidth ?? (typeof window !== 'undefined' ? window.innerWidth : 1024)
@@ -48,19 +52,7 @@ export function DesktopShell({ desktop, apps = builtinApps, watermark = 'Open We
   const runtime = useMemo(() => ({ desktop, getWorkarea }), [desktop, getWorkarea])
 
   const launch = (app: DesktopApp) => {
-    idRef.current += 1
-    const count = windows.length
-    const size = app.defaultSize ?? { width: 480, height: 340 }
-    desktop.windows.createWindow({
-      id: `${app.id}-${idRef.current}`,
-      model: app.id,
-      applicationId: app.id,
-      config: {
-        title: app.title,
-        size,
-        position: { x: 48 + (count % 7) * 26, y: 40 + (count % 7) * 26 },
-      },
-    })
+    void desktop.applications.launch(app.id, app.entryKey, app.argument)
     setStartOpen(false)
   }
 
@@ -74,7 +66,7 @@ export function DesktopShell({ desktop, apps = builtinApps, watermark = 'Open We
           <div className="owd-shell__desktop r95-owd-desktop">
             {watermark ? <div className="owd-shell__watermark">{watermark}</div> : null}
             {activeWindows.map((win) => (
-              <DesktopWindow key={win.id} window={win} app={appById.get(win.model)} />
+              <DesktopWindow key={win.id} window={win} app={appById.get(win.applicationId ?? '')} />
             ))}
           </div>
 

package/src/applications.ts

@@ -0,0 +1,25 @@
+import type { Desktop } from '@owdproject/core'
+import { registerReactApplication } from '@owdproject/react'
+import type { DesktopApp } from './types'
+
+/** Register shorthand apps once. Existing registrations remain owned by the consumer. */
+export function registerDesktopApps(desktop: Desktop, apps: readonly DesktopApp[]): void {
+  for (const app of apps) {
+    if (desktop.applications.get(app.id) || (!app.component && !app.config)) continue
+    const { entries = {}, ...config } = app.config ?? {}
+    registerReactApplication(desktop, {
+      ...config,
+      id: app.id,
+      title: app.title,
+      entries,
+      windows: config.windows ?? (app.component ? {
+        main: {
+          title: app.title,
+          size: app.defaultSize ?? { width: 480, height: 340 },
+          position: { x: 48, y: 40 },
+          component: app.component,
+        },
+      } : undefined),
+    })
+  }
+}

package/src/components/DesktopWindow.tsx

@@ -1,6 +1,6 @@
 import { useReducer, useRef, type CSSProperties } from 'react'
 import type { ResizeDirection, WindowBounds, WindowInstance, WindowState } from '@owdproject/core'
-import { useDesktopDrag, useDesktopResize, useWindowInstance } from '@owdproject/react'
+import { closeReactApplicationWindow, ReactApplicationWindow, useDesktopDrag, useDesktopResize, useWindowInstance } from '@owdproject/react'
 import { OwdWindow } from '@owdproject/react-kit-react95'
 import { useDesktopRuntime } from '../desktop-context'
 import type { DesktopApp } from '../types'
@@ -88,11 +88,10 @@ export function DesktopWindow({ window: instance, app }: DesktopWindowProps) {
   }
 
   const focus = () => desktop.windows.focusWindow(instance.id)
-  const AppComponent = app?.component
 
   return (
     <OwdWindow
-      title={app?.title ?? instance.config.title ?? instance.id}
+      title={instance.config.title ?? app?.title ?? instance.id}
       icon={app?.icon}
       active={state.focused}
       maximized={maximized}
@@ -104,6 +103,8 @@ export function DesktopWindow({ window: instance, app }: DesktopWindowProps) {
       onPointerDownCapture={focus}
       onTitlePointerDown={(event) => {
         if (event.button !== 0) return
+        // Capturing pointers from title-bar controls prevents their click action.
+        if (event.target instanceof Element && event.target.closest('button, [role="button"]')) return
         focus()
         startDrag(event.nativeEvent)
       }}
@@ -116,15 +117,15 @@ export function DesktopWindow({ window: instance, app }: DesktopWindowProps) {
         focus()
         startResize(event.nativeEvent, direction as ResizeDirection)
       }}
-      onClose={() => desktop.windows.closeWindow(instance.id)}
+      onClose={() => { void closeReactApplicationWindow(desktop, instance) }}
       onMinimize={() => instance.minimize()}
       onToggleMaximize={() => {
         if (state.maximizable === false) return
         instance.setLayout(maximized ? 'normal' : 'maximize', getWorkarea())
       }}
     >
-      {AppComponent ? (
-        <AppComponent window={instance} desktop={desktop} />
+      {instance.config.component ? (
+        <ReactApplicationWindow window={instance} desktop={desktop} />
       ) : (
         <div className="owd-window__empty">No component registered for “{instance.model}”.</div>
       )}

package/src/components/SystemBar.tsx

@@ -46,8 +46,8 @@ export function SystemBar({ apps, onStartClick, startActive }: SystemBarProps) {
 
       <Frame className="owd-taskbar__tasks">
         {windows.map((win) => {
-          const app = appById.get(win.model)
-          const title = app?.title ?? win.config.title ?? win.id
+          const app = appById.get(win.applicationId ?? '')
+          const title = win.config.title ?? app?.title ?? win.id
           const isActive = focused?.id === win.id
           return (
             <Button

package/src/index.ts

@@ -11,7 +11,6 @@ export { DesktopWindow, type DesktopWindowProps } from './components/DesktopWind
 export { SystemBar, type SystemBarProps } from './components/SystemBar'
 export { StartMenuPanel, type StartMenuPanelProps } from './components/StartMenuPanel'
 export { useDesktopRuntime, DesktopRuntimeContext, type DesktopRuntime } from './desktop-context'
-export { builtinApps, AboutApp, NotepadApp } from './apps'
 export type { DesktopApp, DesktopAppRenderProps } from './types'
 
 // Re-export the kit primitives so consumers get one entry point.

package/src/theme.css

@@ -3,6 +3,10 @@
  * Visual primitives come from @react95/core (via @owdproject/react-kit-react95).
  */
 
+/* The theme owns its kit: loading the theme styles also loads the kit's OWD
+   window glue, so consumers only import this single stylesheet. */
+@import '@owdproject/react-kit-react95/styles.css';
+
 .owd-shell {
   position: fixed;
   inset: 0;

package/src/types.ts

@@ -1,11 +1,8 @@
 import type { ComponentType, ReactElement } from 'react'
-import type { Desktop, WindowInstance } from '@owdproject/core'
+import type { ReactApplicationConfig, ReactApplicationWindowProps } from '@owdproject/react'
 
 /** Props passed to every application window component. */
-export interface DesktopAppRenderProps {
-  window: WindowInstance
-  desktop: Desktop
-}
+export type DesktopAppRenderProps = ReactApplicationWindowProps
 
 /** A React application that can be launched from the start menu / task bar. */
 export interface DesktopApp {
@@ -14,5 +11,12 @@ export interface DesktopApp {
   /** React95 icon used in the start menu, window title bar and task bar. */
   icon?: ReactElement
   defaultSize?: { width: number; height: number }
-  component: ComponentType<DesktopAppRenderProps>
+  /** Optional shorthand for a single `main` window. Registered apps need no component here. */
+  component?: ComponentType<DesktopAppRenderProps>
+  /** Engine options, including entries, models, singleton and lifecycle callbacks. */
+  config?: Omit<ReactApplicationConfig, 'id' | 'title' | 'entries'> & {
+    entries?: ReactApplicationConfig['entries']
+  }
+  entryKey?: string
+  argument?: string
 }

package/playground/index.html

@@ -1,12 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Open Web Desktop — React win95 theme</title>
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="/src/main.tsx"></script>
-  </body>
-</html>

package/playground/src/App.tsx

@@ -1,30 +0,0 @@
-import { useEffect, useRef } from 'react'
-import { createDesktop, type Desktop } from '@owdproject/core'
-import { DesktopShell } from '../../src'
-
-export function App() {
-  const desktopRef = useRef<Desktop | null>(null)
-  if (!desktopRef.current) {
-    desktopRef.current = createDesktop({
-      workspaces: ['workspace-1'],
-      workarea: { x: 0, y: 0, width: 0, height: 0 },
-    })
-  }
-  const desktop = desktopRef.current
-
-  // Open a welcome window on first mount.
-  useEffect(() => {
-    desktop.windows.createWindow({
-      id: 'about-welcome',
-      model: 'about',
-      applicationId: 'about',
-      config: {
-        title: 'About Open Web Desktop',
-        size: { width: 380, height: 240 },
-        position: { x: 72, y: 56 },
-      },
-    })
-  }, [desktop])
-
-  return <DesktopShell desktop={desktop} watermark="React win95" />
-}

package/playground/src/main.tsx

@@ -1,14 +0,0 @@
-import { StrictMode } from 'react'
-import { createRoot } from 'react-dom/client'
-import '@owdproject/react-kit-react95/styles.css'
-import '../../src/theme.css'
-import { App } from './App'
-
-const container = document.getElementById('root')
-if (!container) throw new Error('#root not found')
-
-createRoot(container).render(
-  <StrictMode>
-    <App />
-  </StrictMode>,
-)

package/playground/tsconfig.json

@@ -1,15 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "ES2022",
-    "lib": ["ES2022", "DOM", "DOM.Iterable"],
-    "module": "ESNext",
-    "moduleResolution": "bundler",
-    "jsx": "react-jsx",
-    "strict": true,
-    "skipLibCheck": true,
-    "esModuleInterop": true,
-    "types": ["vite/client"],
-    "noEmit": true
-  },
-  "include": ["src/**/*", "vite.config.ts"]
-}

package/playground/vite.config.ts

@@ -1,43 +0,0 @@
-import { fileURLToPath, URL } from 'node:url'
-import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react'
-
-const here = fileURLToPath(new URL('.', import.meta.url))
-// pnpm workspace root (client/)
-const workspaceRoot = fileURLToPath(new URL('../../..', import.meta.url))
-
-export default defineConfig({
-  root: here,
-  plugins: [react()],
-  build: {
-    outDir: '../dist',
-    emptyOutDir: true,
-    rollupOptions: {
-      treeshake: {
-        // @react95/* ships no `sideEffects: false`, so Rollup otherwise keeps
-        // every icon/component module (and its CSS). Prune pure-JS modules but
-        // keep `.css`/`.css.mjs` so component styles still load.
-        moduleSideEffects(id) {
-          if (id.includes('@react95/')) return id.includes('.css')
-          return true
-        },
-      },
-    },
-  },
-  server: {
-    port: 5173,
-    fs: {
-      // Allow serving sources of the linked workspace packages.
-      allow: [workspaceRoot],
-    },
-  },
-  optimizeDeps: {
-    // Workspace packages are consumed as raw TypeScript sources.
-    exclude: [
-      '@owdproject/core',
-      '@owdproject/react',
-      '@owdproject/react-kit-react95',
-      '@owdproject/react-theme-win95',
-    ],
-  },
-})

package/src/apps/About.tsx

@@ -1,27 +0,0 @@
-import { Computer } from '@react95/icons'
-import { Button } from '@owdproject/react-kit-react95'
-import type { DesktopAppRenderProps } from '../types'
-
-export function AboutApp({ window, desktop }: DesktopAppRenderProps) {
-  return (
-    <div className="owd-about">
-      <div className="owd-about__banner">
-        <Computer variant="32x32_4" />
-        <div>
-          <strong>Open Web Desktop</strong>
-          <div className="owd-about__small">React theme — win95 (React95)</div>
-        </div>
-      </div>
-      <hr className="owd-about__divider" />
-      <p className="owd-about__text">
-        Running on <code>@owdproject/core</code> + <code>@owdproject/react</code> +{' '}
-        <code>@react95/core</code>
-        <br />
-        Window <code>{window.id}</code> · model <code>{window.model}</code>
-      </p>
-      <div className="owd-about__actions">
-        <Button onClick={() => desktop.windows.closeWindow(window.id)}>OK</Button>
-      </div>
-    </div>
-  )
-}

package/src/apps/Notepad.tsx

@@ -1,24 +0,0 @@
-import { useState } from 'react'
-import type { DesktopAppRenderProps } from '../types'
-
-export function NotepadApp(_props: DesktopAppRenderProps) {
-  const [text, setText] = useState(
-    'Hello from a React window.\r\n\r\nDrag the title bar to move me, or grab an edge to resize.',
-  )
-  return (
-    <div className="owd-notepad">
-      <div className="owd-notepad__menu">
-        <span>File</span>
-        <span>Edit</span>
-        <span>Search</span>
-        <span>Help</span>
-      </div>
-      <textarea
-        className="owd-notepad__area"
-        value={text}
-        spellCheck={false}
-        onChange={(event) => setText(event.target.value)}
-      />
-    </div>
-  )
-}

package/src/apps/index.tsx

@@ -1,24 +0,0 @@
-import type { DesktopApp } from '../types'
-import { InfoBubble, Notepad } from '@react95/icons'
-import { AboutApp } from './About'
-import { NotepadApp } from './Notepad'
-
-/** Built-in apps shipped with the win95 React theme. */
-export const builtinApps: DesktopApp[] = [
-  {
-    id: 'about',
-    title: 'About Open Web Desktop',
-    icon: <InfoBubble variant="32x32_4" />,
-    defaultSize: { width: 380, height: 240 },
-    component: AboutApp,
-  },
-  {
-    id: 'notepad',
-    title: 'Untitled - Notepad',
-    icon: <Notepad variant="16x16_4" />,
-    defaultSize: { width: 480, height: 340 },
-    component: NotepadApp,
-  },
-]
-
-export { AboutApp, NotepadApp }