@interopio/iocd-cli 1.0.2 → 1.1.0

package/dist/templates/launchpad/apps/launchpad/README.md

@@ -0,0 +1,220 @@
+# Launchpad App for io.Connect Desktop
+
+Template for creating a custom desktop Launchpad app for **io.Connect Desktop**, built on top of the
+`IOLaunchpadDesktop` feature exported by [`@interopio/components-react`](https://www.npmjs.com/package/@interopio/components-react). Clone
+this app and customize only the pieces you need — everything else keeps working out of the box.
+
+## Prerequisites
+
+**io.Connect Desktop** is required, since this app only configures the `desktop` factory (see
+[src/constants/constants.ts](src/constants/constants.ts)).
+
+## Setup
+
+- Run `npm install` to install all dependencies.
+- Run `npm run start` to start the app (dev server runs on `http://localhost:4242` by default, see
+  [vite.config.ts](vite.config.ts)).
+- Point your io.Connect Desktop configuration's Launchpad/System application entry to this app's URL, then start
+  io.Connect Desktop to see your customized Launchpad. Refer to your io.Connect Desktop version's documentation for
+  the exact application-definition file and property to update.
+- Run `npm run build` to produce a production build in `dist/`.
+- Start **io.Connect Desktop** to start using and modifying your Launchpad App.
+
+## How it's wired
+
+`src/components/launchpad.tsx` wires up the required providers around a single `<Launchpad />` component. You
+don't need to pass a `components` prop at all - `<Launchpad />` already renders a fully working default header
+(`DragHandle` + `LogoButton` before search, `ExtendedArea` + `NotificationsButton` + `MainContextMenu` after
+search) out of the box:
+
+```tsx
+import {
+  ThemeProvider,
+  PlatformPrefsProvider,
+  IOActivePanelRenderer,
+  IODownloadManager,
+  IOLaunchpadDesktop,
+  IONotifications,
+} from "@interopio/components-react";
+
+const { LaunchpadProvider, LaunchpadBodyPopupProvider, PanelPopupProvider, Launchpad } = IOLaunchpadDesktop;
+const { NotificationsProvider } = IONotifications;
+const { DownloadManagerProvider } = IODownloadManager;
+const { PanelManagerProvider } = IOActivePanelRenderer;
+
+function LaunchpadWrapper() {
+  return (
+    <ThemeProvider>
+      <PlatformPrefsProvider>
+        <NotificationsProvider>
+          <DownloadManagerProvider>
+            <PanelManagerProvider>
+              <LaunchpadProvider>
+                <LaunchpadBodyPopupProvider>
+                  <PanelPopupProvider>
+                    <Launchpad />
+                  </PanelPopupProvider>
+                </LaunchpadBodyPopupProvider>
+              </LaunchpadProvider>
+            </PanelManagerProvider>
+          </DownloadManagerProvider>
+        </NotificationsProvider>
+      </PlatformPrefsProvider>
+    </ThemeProvider>
+  );
+}
+```
+
+All customization happens through the `components` prop of `<Launchpad />` - you shouldn't need to touch the
+provider chain above.
+
+## Customization
+
+### 1. Replacing the default io.Connect Desktop Launchpad with a custom implementation
+
+For details on how io.Connect Desktop discovers and loads a custom Launchpad app, see the
+[Launchpad documentation](https://docs.interop.io/desktop/capabilities/launcher/index.html#launchpad).
+
+
+### 2. The `components` prop
+
+`<Launchpad components={{ ... }} />` forwards straight to the native `IOLaunchpad.ContentsContainer`, so it only
+accepts `header` (`BeforeSearch` / `AfterSearch`) and `sections` - there's no per-piece override system.
+`DragHandle`, `LogoButton`, `NotificationsButton`, `MainContextMenu`, `ExtendedArea` are exported standalone so you
+compose them yourself into `header.BeforeSearch` / `AfterSearch`, as shown above.
+
+> **Tip:** define `BeforeSearch` / `AfterSearch` (and the `components` object) **outside** your component's render
+> function (module scope), or memoize them. Passing a brand-new inline function on every render forces
+> `<Launchpad />` to remount that zone on every render - wasteful in general, and it can also break in-flight
+> async work started by a piece inside it (e.g. opening the docked search popup).
+
+### 3. Default `BeforeSearch` / `AfterSearch`
+
+`<Launchpad />` fills in `header.BeforeSearch` / `AfterSearch` with its own defaults whenever you don't specify
+them, so there are 3 possible outcomes per zone:
+
+1. **Omitted** (key not present, or `undefined`) - the library default renders (`DragHandle` + `LogoButton` for
+   `BeforeSearch`; `ExtendedArea` + `NotificationsButton` + `MainContextMenu` for `AfterSearch`).
+2. **Explicitly empty** (e.g. `BeforeSearch: () => null`) - the default is overridden and nothing renders in that
+   zone.
+3. **A real custom component** - that component renders in place of the default.
+
+```tsx
+// 1. Omitted - renders the library defaults
+<Launchpad />;
+
+// 2. Explicitly empty - hides the zone entirely
+<Launchpad components={{ header: { AfterSearch: () => null } }} />;
+
+// 3. Custom component - fully replaces the zone
+function CustomBeforeSearch() {
+  return <MyCustomLogo />;
+}
+
+<Launchpad components={{ header: { BeforeSearch: CustomBeforeSearch } }} />;
+```
+
+### 4. Removing a piece
+
+Since `header.BeforeSearch` / `AfterSearch` **fully replace** the zone, just omit a piece from your composition to
+hide it - e.g. hide the notifications bell:
+
+```tsx
+function AfterSearch() {
+  return (
+    <>
+      <ExtendedArea />
+      <MainContextMenu />
+    </>
+  );
+}
+```
+
+### 5. Passing your own component
+
+Compose your own implementation alongside (or instead of) the default pieces:
+
+```tsx
+function MyMainContextMenu() {
+  return <button onClick={() => console.log("clicked!")}>⋮</button>;
+}
+
+function AfterSearch() {
+  return (
+    <>
+      <ExtendedArea />
+      <NotificationsButton />
+      <MyMainContextMenu />
+    </>
+  );
+}
+```
+
+### 6. Overriding `BeforeSearch` / `AfterSearch`
+
+Pass `components.header` to fully replace either zone with something entirely custom:
+
+```tsx
+function CustomBeforeSearch() {
+  return <MyCustomLogo />;
+}
+
+function CustomAfterSearch() {
+  return <MyCustomButton />;
+}
+
+const launchpadComponents = { header: { BeforeSearch: CustomBeforeSearch, AfterSearch: CustomAfterSearch } };
+
+<Launchpad components={launchpadComponents} />;
+```
+
+Since `header.BeforeSearch` / `AfterSearch` **fully replace** the zone, if you just want to add something
+alongside the defaults, import the default pieces (they're also exported standalone) and compose them yourself:
+
+```tsx
+import { IOLaunchpadDesktop } from "@interopio/components-react";
+
+const { DragHandle, LogoButton } = IOLaunchpadDesktop;
+
+function CustomBeforeSearch() {
+  return (
+    <>
+      <DragHandle />
+      <LogoButton />
+      <MyExtraBadge />
+    </>
+  );
+}
+
+const launchpadComponents = { header: { BeforeSearch: CustomBeforeSearch } };
+```
+
+### 7. Customizing the `LogoButton`
+
+`LogoButton` itself accepts `icon`, `iconSrc`, and `onClick` props, so you don't need to replace it entirely just
+to change the logo or its click behavior:
+
+```tsx
+import { IOLaunchpadDesktop } from "@interopio/components-react";
+
+const { DragHandle, LogoButton } = IOLaunchpadDesktop;
+
+function BeforeSearch() {
+  return (
+    <>
+      <DragHandle />
+      <LogoButton iconSrc="/my-logo.png" onClick={() => console.log("logo clicked")} />
+    </>
+  );
+}
+```
+
+- `icon` — an icon variant name (ignored if `iconSrc` is set); defaults to `"logo"`.
+- `iconSrc` — a custom image URL/data-URI to render instead of `icon`.
+- `onClick` — replaces the default collapse/popup-toggle behavior; drag-to-move still works either way.
+
+### 7. `ExtendedArea` visibility
+
+`ExtendedArea` self-guards: it renders `null` unless the Launchpad is both docked and the
+`LAUNCHPAD_SHOW_EXTENDED_AREA` platform pref is enabled, so it's safe to always include it in `AfterSearch` - it
+simply won't render anything otherwise.

package/dist/templates/launchpad/apps/launchpad/config/iocd.app.def.dev.json

@@ -9,7 +9,7 @@
                 "autoInjectAPI": {
                     "enabled": true
                 },
-                "url": "http://localhost:5178/",
+                "url": "http://localhost:4242/",
                 "mode": "frameless",
                 "showInTaskbar": true,
                 "hasSizeAreas": true,

package/dist/templates/launchpad/apps/launchpad/index.html

@@ -1,16 +1,15 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en" class="dark">
-    <head>
-        <meta charset="utf-8" />
-        <title>Launchpad</title>
-        <base href="./" />
-
-        <meta name="viewport" content="width=device-width, initial-scale=1" />
-        <link rel="icon" type="image/x-icon" href="/favicon.ico" />
-        <link rel="stylesheet" href="/src/styles.css" />
-    </head>
-    <body>
-        <div id="root"></div>
-        <script type="module" src="/src/main.tsx"></script>
-    </body>
+  <head>
+    <meta charset="utf-8" />
+    <title>Launchpad</title>
+    <base href="./" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="icon" type="image/x-icon" href="/favicon.ico" />
+    <link rel="stylesheet" href="/src/styles.css" />
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
 </html>

package/dist/templates/launchpad/apps/launchpad/package.json

@@ -1,6 +1,6 @@
 {
-  "name": "dev-launchpad",
-  "version": "1.0.5",
+  "name": "io-connect-desktop-launchpad",
+  "version": "4.6.0",
   "homepage": "./",
   "private": true,
   "scripts": {
@@ -8,14 +8,22 @@
     "build": "vite build"
   },
   "dependencies": {
-    "@interopio/components-react": "^0.8.0",
-    "@interopio/home-ui-react": "^2.1.1",
-    "@interopio/react-hooks": "^4.1.1",
-    "@interopio/workspaces-ui-react": "^4.1.1"
+    "@interopio/components-react": "~4.6.0",
+    "@interopio/desktop": "~6.16.0",
+    "@interopio/react-hooks": "~4.6.0",
+    "@interopio/workspaces-ui-react": "~4.6.0",
+    "@interopio/modals-api": "~4.6.0",
+    "@interopio/search-api": "^3.3.0",
+    "@interopio/theme": "~4.6.0",
+    "react": "~18.2.0",
+    "react-dom": "~18.2.0"
   },
   "devDependencies": {
-    "@vitejs/plugin-react": "^5.0.2",
-    "vite": "^7.1.5",
-    "vite-plugin-environment": "^1.1.3"
+    "@types/node": "~20.12.7",
+    "@types/react": "~18.2.79",
+    "@types/react-dom": "~18.2.25",
+    "@vitejs/plugin-react": "~3.0.0",
+    "typescript": "~5.8.2",
+    "vite": "~4.0.1"
   }
 }

package/dist/templates/launchpad/apps/launchpad/src/app/app.tsx

@@ -1,45 +1,39 @@
-import { IOConnectProvider } from "@interopio/react-hooks";
-import {
-  LaunchpadBody,
-  LaunchpadHeader,
-  LaunchpadContentsContainer,
-  PlatformPrefsProvider,
-} from "@interopio/home-ui-react";
-import { ioConfig } from "./constants";
-import { ThemeProvider, IONotifications } from "@interopio/components-react";
-import Logo from "../components/logo";
-import NotificationsButton from "../components/notifications-button";
-import MainContextMenu from "../components/main-context-menu";
+import { lazy, Suspense, useContext, useEffect } from "react";
+import { IOConnectContext, IOConnectProvider } from "@interopio/react-hooks";
+import { ioConfig } from "../constants/constants";
 import "@interopio/workspaces-ui-react/dist/styles/workspaces.css";
-import "@interopio/home-ui-react/index.css";
+import "@interopio/components-react/dist/styles/components/ui/dropdown-menu.css";
+import "@interopio/components-react/dist/styles/components/ui/overlay-scrollbars-container.css";
+import "@interopio/components-react/dist/styles/features/active-panel-renderer/styles.css";
+import "@interopio/components-react/dist/styles/features/notifications/styles.css";
+import "@interopio/components-react/dist/styles/features/preferences/styles.css";
+import "@interopio/components-react/dist/styles/features/profile/styles.css";
+import "@interopio/components-react/dist/styles/features/launchpad/styles.css";
+import "@interopio/components-react/dist/styles/features/launchpad-desktop/styles.css";
 
-export function App() {
-  const { NotificationsProvider } = IONotifications;
+const Launchpad = lazy(() => import("../components/launchpad"));
+
+// IOConnectProvider owns the only io.Connect initialization - read the resulting instance from context instead of initializing again.
+function GlobalIOBinder() {
+  const io = useContext(IOConnectContext);
+
+  useEffect(() => {
+    if (io) {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      (globalThis as any).io = io;
+    }
+  }, [io]);
 
+  return null;
+}
+
+export function App() {
   return (
     <IOConnectProvider settings={ioConfig}>
-      <PlatformPrefsProvider>
-        <ThemeProvider>
-          <NotificationsProvider>
-            <LaunchpadContentsContainer
-              components={{
-                header: {
-                  BeforeSearch: () => <Logo />,
-                  AfterSearch: () => (
-                    <>
-                      <NotificationsButton />
-                      <MainContextMenu />
-                    </>
-                  ),
-                },
-              }}
-            >
-              <LaunchpadHeader />
-              <LaunchpadBody />
-            </LaunchpadContentsContainer>
-          </NotificationsProvider>
-        </ThemeProvider>
-      </PlatformPrefsProvider>
+      <GlobalIOBinder />
+      <Suspense fallback={null}>
+        <Launchpad />
+      </Suspense>
     </IOConnectProvider>
   );
 }

package/dist/templates/launchpad/apps/launchpad/src/components/launchpad.tsx

@@ -0,0 +1,37 @@
+import {
+  ThemeProvider,
+  PlatformPrefsProvider,
+  IOActivePanelRenderer,
+  IODownloadManager,
+  IOLaunchpadDesktop,
+  IONotifications,
+} from "@interopio/components-react";
+
+const { PanelManagerProvider } = IOActivePanelRenderer;
+const { DownloadManagerProvider } = IODownloadManager;
+const { LaunchpadProvider, LaunchpadBodyPopupProvider, PanelPopupProvider, Launchpad } = IOLaunchpadDesktop;
+const { NotificationsProvider } = IONotifications;
+
+function LaunchpadWrapper() {
+  return (
+    <ThemeProvider>
+      <PlatformPrefsProvider>
+        <NotificationsProvider>
+          <DownloadManagerProvider>
+            <PanelManagerProvider>
+              <LaunchpadProvider>
+                <LaunchpadBodyPopupProvider>
+                  <PanelPopupProvider>
+                    <Launchpad />
+                  </PanelPopupProvider>
+                </LaunchpadBodyPopupProvider>
+              </LaunchpadProvider>
+            </PanelManagerProvider>
+          </DownloadManagerProvider>
+        </NotificationsProvider>
+      </PlatformPrefsProvider>
+    </ThemeProvider>
+  );
+}
+
+export default LaunchpadWrapper;

package/dist/templates/launchpad/apps/launchpad/src/{app → constants}/constants.ts

@@ -1,6 +1,7 @@
 import IODesktop from "@interopio/desktop";
 import IOSearch from "@interopio/search-api";
 import IOWorkspaces from "@interopio/workspaces-api";
+import IOModalsAPI from "@interopio/modals-api";
 import { IOConnectInitSettings } from "@interopio/react-hooks";
 
 export const ioConfig = {
@@ -12,7 +13,7 @@ export const ioConfig = {
           level: "warn",
         },
       },
-      libraries: [IOWorkspaces, IOSearch],
+      libraries: [IOWorkspaces, IOSearch, IOModalsAPI],
       appManager: "full",
       layouts: "full",
       activities: "trackAll",

package/dist/templates/launchpad/apps/launchpad/src/main.tsx

@@ -1,8 +1,6 @@
 import * as ReactDOM from "react-dom/client";
 import App from "./app/app";
 
-const root = ReactDOM.createRoot(
-  document.getElementById("root") as HTMLElement
-);
+const root = ReactDOM.createRoot(document.getElementById("root") as HTMLElement);
 
 root.render(<App />);

package/dist/templates/launchpad/apps/launchpad/src/styles.css

@@ -1,17 +1,2 @@
-/* You can add global styles to this file, and also import other style files */
-.launchpad-header-notifications-button {
-  position: relative;
-}
-
-.launchpad-header-notifications-button .io-badge {
-  position: absolute;
-  top: 7px;
-  right: -2px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  min-width: var(--spacing-16);
-  height: var(--spacing-16);
-  margin: calc(var(--spacing-10) * -1) auto 0 calc(var(--spacing-4) * -1);
-  font-size: var(--spacing-10);
-}
+/* App-specific overrides go here. Launchpad desktop styling now ships with
+   @interopio/components-react/dist/styles/features/launchpad-desktop/styles.css */

package/dist/templates/launchpad/apps/launchpad/tsconfig.json

@@ -1,10 +1,12 @@
 {
-    "compilerOptions": {
-        "jsx": "react-jsx",
-        "esModuleInterop": true,
-        "resolveJsonModule": true,
-        "allowJs": false,
-        "allowSyntheticDefaultImports": true,
-        "strict": true
-    }
+  "compilerOptions": {
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "jsx": "react-jsx",
+    "esModuleInterop": true,
+    "resolveJsonModule": true,
+    "allowJs": false,
+    "allowSyntheticDefaultImports": true,
+    "strict": true
+  }
 }

package/dist/templates/launchpad/apps/launchpad/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/dist/templates/launchpad/apps/launchpad/vite.config.ts

@@ -2,10 +2,15 @@ import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react";
 
 export default defineConfig({
+  plugins: [react()],
+  base: "./",
   server: {
-    port: 5178,
+    port: 4242,
     host: "localhost",
   },
-  base: "./",
-  plugins: [react()],
+  build: {
+    commonjsOptions: {
+      include: [/@interopio\/components-react/, /node_modules/],
+    },
+  },
 });

package/dist/templates/tests/.agents/skills/iocd-wdio-testing/references/configuration.md

@@ -17,11 +17,12 @@ The config the platform runs with is three layers, each deep-merged over the pre
 | Layer | Owner | Where |
 |-------|-------|-------|
 | Default `system.json` | io.Connect Desktop | inside the installed `iocd` component |
-| Seed modifications | the seed | `modifications/**/iocd/config/system.json.merge` — dev *and* packed build |
+| Seed modifications | the seed | `modifications/base/` plus `modifications/dev/` for tests; packed builds use `modifications/build/` |
 | Test overrides | the test package | `config/system.json`, merged on top for the test process only |
 
 **Keep the test layer minimal.** Whatever the seed configures is already in effect during a test
-run — don't restate it. Override only what makes the run isolated and reproducible: the fixture app
+run because `iocd test` prepares the component in dev mode — don't restate it. Override only what
+makes the run isolated and reproducible: the fixture app
 store, `folders.userData`, log/crash output locations, and similar plumbing. Changing platform
 behavior here (window mode, Channels, gateway, auth, themes) means the tests no longer exercise the
 platform the seed ships — you'd be testing something else. Behavior changes belong in

package/dist/templates/tests/.agents/skills/iocd-wdio-testing/references/models.md

@@ -11,7 +11,7 @@ over copying internal IOCD selectors into a spec.
 
 ## Current Generated Version
 
-The generated test package currently pins `@interopio/wdio-iocd-service@1.0.0-next.3`. Its
+The generated test package currently pins `@interopio/wdio-iocd-service@1.0.0-next.4`. Its
 `@interopio/wdio-iocd-service/models` subpath exports:
 
 | Area | Models and types |

package/dist/templates/tests/.agents/skills/iocd-wdio-testing/references/troubleshooting.md

@@ -2,18 +2,17 @@
 
 ## Missing platform executable
 
-Ensure the configured `iocd` component is installed: run `npm run setup`, or start the seed once with
-`npm run dev` and close it before `npm test` (the service starts its own instance).
-
-If `iocd test` searches for an executable named after the seed's `productName`, but the installed
-component still has its default `io.Connect Desktop` name, run `npm run dev` once. Development
-preparation applies the seed branding and creates the executable path that the test command expects;
-close that development instance before rerunning the tests.
+Ensure the configured `iocd` component is installed by running `npm run setup`. `iocd test`
+automatically performs the same bundle preparation as `iocd dev`: it generates application-owned
+base modifications, applies the seed's base and dev modifications, copies the configured output
+license when enabled, and signs the macOS bundle before resolving the executable. It does not launch
+a separate development instance.
 
 ## License prompt or failure
 
-Run from the seed root through `npm test` so the CLI can use `config/iocd.license.key`. In CI, supply
-the license via secrets. Never hard-code a license in a spec or fixture.
+Run from the seed root through `npm test` so the CLI can read `config/iocd.license.key` and forward it
+to the test platform as `IOCD_LICENSE_KEY`. In CI, supply the license via secrets. Never hard-code a
+license in a spec or fixture.
 
 ## Startup timeout
 

package/dist/templates/tests/tests/package.json

@@ -10,7 +10,7 @@
   },
   "devDependencies": {
     "@interopio/desktop": "^6.21.0",
-    "@interopio/wdio-iocd-service": "1.0.0-next.3",
+    "@interopio/wdio-iocd-service": "next",
     "@interopio/workspaces-api": "^4.5.0",
     "@types/chai": "^5.2.3",
     "@types/mocha": "^10.0.10",

package/dist/utils/template-update.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getTemplateUpdateWarning = void 0;
+const getTemplateUpdateWarning = (appNames) => `Updating ${appNames.join(", ")} will permanently delete the existing template application files and replace them with the current CLI templates. Any customizations in those app directories will be lost. Commit or copy your work before continuing.`;
+exports.getTemplateUpdateWarning = getTemplateUpdateWarning;
+//# sourceMappingURL=template-update.js.map

package/dist/utils/template-update.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"template-update.js","sourceRoot":"","sources":["../../src/utils/template-update.ts"],"names":[],"mappings":";;;AAAO,MAAM,wBAAwB,GAAG,CAAC,QAAkB,EAAU,EAAE,CACrE,YAAY,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,yNAAyN,CAAC;AAD9O,QAAA,wBAAwB,4BACsN"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@interopio/iocd-cli",
-  "version": "1.0.2",
+  "version": "1.1.0",
   "description": "CLI tool for setting up, building and packaging io.Connect Desktop platforms",
   "engines": {
     "node": ">=22.0.0",
@@ -60,6 +60,7 @@
     "jsonwebtoken": "^9.0.2",
     "log4js": "^6.9.1",
     "plist": "^3.1.0",
+    "proper-lockfile": "^4.1.2",
     "undici": "^7.16.0"
   },
   "devDependencies": {
@@ -73,6 +74,7 @@
     "@types/jsonwebtoken": "^9.0.10",
     "@types/log4js": "^0.0.33",
     "@types/node": "^22.19.17",
+    "@types/proper-lockfile": "^4.1.4",
     "@typescript-eslint/eslint-plugin": "^8.47.0",
     "@typescript-eslint/parser": "^8.47.0",
     "cross-env": "^10.1.0",