@fde-desktop/fde-core 0.4.1 → 0.4.4

package/README.md

@@ -20,6 +20,13 @@ yarn add @fde-desktop/fde-core
 bun add @fde-desktop/fde-core
 ```
 
+You also need to import Mantine styles in your entry point:
+
+```tsx
+import '@mantine/core/styles.css';
+import '@mantine/dates/styles.css';
+```
+
 ## Peer Dependencies
 
 - `react` ^19.0.0
@@ -31,6 +38,8 @@ The simplest way is to use the `FdeDesktop` component:
 
 ```tsx
 import { FdeDesktop, type AppRegistryEntry } from '@fde-desktop/fde-core';
+import '@mantine/core/styles.css';
+import '@mantine/dates/styles.css';
 
 // Define your custom apps (optional)
 const myApps: Record<string, AppRegistryEntry> = {
@@ -41,50 +50,159 @@ const myApps: Record<string, AppRegistryEntry> = {
 };
 
 function App() {
-  return <FdeDesktop customApps={myApps}>{/* Optional: custom desktop content */}</FdeDesktop>;
+  return <FdeDesktop customApps={myApps} />;
 }
 ```
 
 Core apps (Files, Settings, Notepad, etc.) are loaded automatically. Your custom apps are merged with the core registry.
 
+## FdeDesktop Props
+
+```tsx
+<FdeDesktop
+  customApps={userApps}          // Optional: your custom apps
+  defaultWallpaper={wallpaperUrl} // Optional: default wallpaper URL
+  initialApp="welcome"            // Optional: app ID to open on start
+  mode="dark"                     // Optional: force 'light' | 'dark' theme
+  prefetchLoaders={[              // Optional: preload lazy apps
+    { id: 'dos-emulator', loader: () => import('./DosEmulatorApp') },
+  ]}
+>
+  {/* Optional: extra desktop content */}
+</FdeDesktop>
+```
+
+## Creating a Custom App
+
+#### Step 1: Create the component
+
+Every app receives `WindowContentProps` — a `window` entity and a `notifyReady` callback:
+
+```tsx
+// MyApp.tsx
+import { type FC, useEffect } from 'react';
+import type { WindowContentProps } from '@fde-desktop/fde-core';
+
+const MyApp: FC<WindowContentProps> = ({ window: win, notifyReady }) => {
+  const { filePath } = (win?.contentData ?? {}) as { filePath?: string };
+
+  useEffect(() => {
+    notifyReady?.({});
+  }, [win, notifyReady]);
+
+  return (
+    <div>
+      <h1>My App</h1>
+      {filePath && <p>Opening: {filePath}</p>}
+    </div>
+  );
+};
+
+export default MyApp;
+```
+
+#### Step 2: Register the app
+
+```tsx
+// App.tsx
+import { FdeDesktop, type AppRegistryEntry } from '@fde-desktop/fde-core';
+
+const myApps: Record<string, AppRegistryEntry> = {
+  'my-app': {
+    loader: () => import('./MyApp'),
+    appName: 'My App',
+    isLazy: true,
+    defaultWidth: 800,
+    defaultHeight: 600,
+    minWidth: 640,
+    minHeight: 480,
+    fcIcon: 'FcFolder',
+  },
+};
+
+function App() {
+  return <FdeDesktop customApps={myApps} />;
+}
+```
+
+#### Step 3: Open the app programmatically
+
+```tsx
+import { useOpenApp } from '@fde-desktop/fde-core';
+
+function MyButton() {
+  const openApp = useOpenApp();
+
+  return (
+    <button onClick={() => openApp('my-app', { contentData: { filePath: '/docs/readme.md' } })}>
+      Open My App
+    </button>
+  );
+}
+```
+
+#### Step 4: Add a menu bar (optional)
+
+```tsx
+// MyAppMenuBar.tsx
+import { type FC, memo } from 'react';
+import { AppMenuBar } from '@fde-desktop/fde-core';
+import type { MenuBarComponentProps, AppMenuElement } from '@fde-desktop/fde-core';
+
+export const MyAppMenuBar: FC<MenuBarComponentProps> = memo(({ windowId, onExit }) => {
+  const elements: AppMenuElement[] = [
+    {
+      type: 'menu',
+      label: 'File',
+      items: [
+        { type: 'item', label: 'Exit', icon: 'FcLeave', onClick: onExit },
+      ],
+    },
+  ];
+
+  return <AppMenuBar elements={elements} />;
+});
+MyAppMenuBar.displayName = 'MyAppMenuBar';
+```
+
+Register it alongside the component:
+
+```tsx
+const myApps: Record<string, AppRegistryEntry> = {
+  'my-app': {
+    loader: () => import('./MyApp'),
+    menuBarLoader: () => import('./MyAppMenuBar').then(m => ({ default: m.MyAppMenuBar })),
+    appName: 'My App',
+    isLazy: true,
+  },
+};
+```
+
 ## Exports
 
 ### UI Components
 
 ```tsx
 import {
-  // Main wrapper
   FdeDesktop,
-
-  // Desktop components
   Desktop,
   DesktopIcon,
   Window,
   AppMenuBar,
   DynamicMenuBarRenderer,
-
-  // System UI
   Taskbar,
   Launcher,
   TaskbarContextMenu,
   LanguageSelector,
-
-  // Menus
   ContextMenu,
   CreateItemContextMenu,
-
-  // Theme
   ThemeProvider,
   useTheme,
   DEFAULT_FDE_THEME,
-
-  // Context
   FdeProvider,
   useFdeContext,
   AppReadyProvider,
   useAppReady,
-
-  // Registry helpers
   initRegistry,
   getAppComponent,
   getMenuBarComponent,
@@ -113,10 +231,7 @@ import {
   CORE_APPS,
   CORE_APP_IDS,
   DEFAULT_WINDOW_DIMENSIONS,
-} from '@fde-desktop/fde-core';
-
-// Menu bar components for apps
-import {
+  // Menu bars
   NotesMenuBar,
   SettingsMenuBar,
   PdfMenuBar,
@@ -184,6 +299,7 @@ import {
   fileSystem,
   resetFileSystem,
   resetWindowManager,
+  getPersistedThemeMode, // Read theme from localStorage before React mounts
 } from '@fde-desktop/fde-core';
 
 // Desktop state
@@ -415,7 +531,6 @@ import {
 
 ```tsx
 import {
-  // Layout
   DEFAULT_WINDOW_DIMENSIONS,
   ICON_COLUMN_WIDTH,
   ICON_ROW_HEIGHT,
@@ -423,32 +538,16 @@ import {
   TASKBAR_HEIGHT,
   DEFAULT_VIEWPORT_WIDTH,
   DEFAULT_VIEWPORT_HEIGHT,
-
-  // Breakpoints
   BREAKPOINTS,
-
-  // Animation
   ANIMATION_DURATION,
-
-  // Fonts
   AVAILABLE_FONTS,
   FONT_STACKS,
   GOOGLE_FONTS_HREF,
-
-  // Colors
   PRESET_COLORS,
-
-  // Icons
   PRESET_ICONS,
-
-  // Launcher
   DEFAULT_LAUNCHER_FOLDERS,
   CUSTOM_APPS_FOLDER_ID,
-
-  // App IDs
   APP_IDS,
-
-  // Themes
   DEFAULT_FDE_THEME,
 } from '@fde-desktop/fde-core';
 ```
@@ -459,7 +558,6 @@ import {
 import { i18n } from '@fde-desktop/fde-core';
 import { I18nextProvider } from 'react-i18next';
 
-// Use in your app
 function App() {
   return (
     <I18nextProvider i18n={i18n}>
@@ -471,32 +569,19 @@ function App() {
 
 ## Core Apps
 
-The following apps are included in `CORE_APPS`:
-
-| App ID         | Name         | Description            |
-| -------------- | ------------ | ---------------------- |
-| `files`        | Files        | File browser           |
-| `settings`     | Settings     | System settings        |
-| `notepad`      | Notepad      | Text editor (Tiptap)   |
-| `image-viewer` | Image Viewer | Image viewer           |
-| `pdf`          | PDF Viewer   | PDF viewer             |
-| `uploader`     | Uploader     | File uploader          |
-| `device-info`  | Device Info  | System information     |
-| `calendar`     | Calendar     | Calendar widget        |
-| `menuedit`     | MenuEdit     | Launcher folder editor |
-| `terminal`     | Terminal     | Terminal emulator      |
-| `code-server`  | VS Code      | VS Code in browser     |
-
-## Example App
-
-The main repository's `src/` directory contains a complete example application that demonstrates how to use this package. It includes:
-
-- **WelcomeApp**: Personal portfolio/profile app
-- **LinkedinApp** / **GithubApp**: External link apps
-- **DosEmulatorApp**: DOS game emulator using js-dos
-- **Custom App Registry**: Shows how to register custom apps
-
-See the [main repository](https://github.com/frannunpal/fde-desktop) for the complete example.
+| App ID         | Name         | Description             |
+| -------------- | ------------ | ----------------------- |
+| `files`        | Files        | File browser            |
+| `settings`     | Settings     | System settings         |
+| `notepad`      | Notepad      | Text editor (TipTap v3) |
+| `image-viewer` | Image Viewer | Image viewer            |
+| `pdf`          | PDF Viewer   | PDF viewer              |
+| `uploader`     | Uploader     | File uploader           |
+| `device-info`  | Device Info  | System information      |
+| `calendar`     | Calendar     | Calendar widget         |
+| `menuedit`     | MenuEdit     | Launcher folder editor  |
+| `terminal`     | Terminal     | Terminal emulator       |
+| `code-server`  | VS Code      | VS Code in browser      |
 
 ## Runtime Detection
 
@@ -518,6 +603,32 @@ if (isElectron()) {
 }
 ```
 
+## Docker Integration
+
+For Docker-based deployments:
+
+```typescript
+import { DockerFileSystemAdapter, FdeApiAdapter, initializeFdeApi } from '@fde-desktop/fde-core';
+
+initializeFdeApi();
+
+const dockerFs = new DockerFileSystemAdapter();
+
+// Custom app hot-reload
+useCustomAppHMR();
+```
+
+## Example App
+
+The main repository's `src/` directory contains a complete example application that demonstrates how to use this package. It includes:
+
+- **WelcomeApp**: Personal portfolio/profile app
+- **LinkedinApp** / **GithubApp**: External link apps
+- **DosEmulatorApp**: DOS game emulator using js-dos
+- **Custom App Registry**: Shows how to register custom apps
+
+See the [main repository](https://github.com/frannunpal/fde-desktop) for the complete example.
+
 ## License
 
-MIT
+Apache-2.0

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@fde-desktop/fde-core",
-  "version": "0.4.1",
+  "version": "0.4.4",
   "type": "module",
   "description": "Core library for building FDE Desktop environments",
   "author": "Francisco Núñez Palomares (frannunpal@gmail.com)",
-  "license": "MIT",
+  "license": "Apache-2.0",
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -30,7 +30,7 @@
     "test": "vitest run",
     "test:unit": "vitest run",
     "test:watch": "vitest",
-    "prepublishOnly": "bun run build && bun run test"
+    "prepublishOnly": ""
   },
   "publishConfig": {
     "access": "public"