@tangle-network/starter-foundry 0.5.3 → 0.7.0

package/registry/layers/framework/ecommerce-headless/manifest.json

@@ -0,0 +1,81 @@
+{
+  "id": "ecommerce-headless",
+  "description": "Headless commerce framework layer — products/variants/carts/line_items/orders/payments/webhook_events schema, Stripe PaymentIntent checkout, signature-verified idempotent Stripe webhooks.",
+  "appliesTo": ["ecommerce-headless"],
+  "files": [
+    { "source": "files/package.json", "target": "package.json" },
+    { "source": "files/tsconfig.json", "target": "tsconfig.json" },
+    { "source": "files/.env.example", "target": ".env.example" },
+    { "source": "files/AGENTS.md", "target": "AGENTS.md" },
+    { "source": "files/server.ts", "target": "src/server.ts" },
+    { "source": "files/schema.ts", "target": "src/db/schema.ts" },
+    { "source": "files/db.ts", "target": "src/db/client.ts" },
+    { "source": "files/products.ts", "target": "src/api/products.ts" },
+    { "source": "files/cart.ts", "target": "src/api/cart.ts" },
+    { "source": "files/checkout.ts", "target": "src/api/checkout.ts" },
+    { "source": "files/stripe-webhook.ts", "target": "src/webhooks/stripe.ts" },
+    { "source": "files/drizzle.config.ts", "target": "drizzle.config.ts" }
+  ],
+  "packageDeps": {
+    "dependencies": {
+      "drizzle-orm": "^0.36.0",
+      "postgres": "^3.4.5",
+      "stripe": "^17.0.0"
+    },
+    "devDependencies": {
+      "drizzle-kit": "^0.30.0",
+      "typescript": "^5.9.0",
+      "@types/node": "^20.17.0"
+    }
+  },
+  "buildHints": {
+    "apiRoutes": [
+      "GET /health",
+      "GET /api/products / GET /api/products/:id",
+      "POST /api/carts (create cart)",
+      "POST /api/carts/:id/items (add line item)",
+      "DELETE /api/carts/:id/items/:lineItemId",
+      "POST /api/carts/:id/checkout (creates Order + Stripe PaymentIntent, returns client_secret)",
+      "POST /webhooks/stripe (signature-verified, idempotent)"
+    ],
+    "dataModels": [
+      "Product (handle, title, description, status: active|draft|archived)",
+      "Variant (productId, sku, priceCents, currency, inventoryQty, attributes jsonb)",
+      "Cart (customerId nullable, status: active|checked_out|abandoned, currency)",
+      "LineItem (cartId, variantId, qty, unitPriceCents snapshot)",
+      "Order (cartId, customerId, subtotalCents, taxCents, totalCents, status: pending|paid|fulfilled|refunded|cancelled, placedAt, paidAt)",
+      "Payment (orderId, processor: stripe, processorId piId, amountCents, status, capturedAt)",
+      "WebhookEvent (processor, eventId UNIQUE, type, receivedAt, processedAt, payloadJson) — idempotency key"
+    ],
+    "integrations": [
+      "Stripe PaymentIntents for checkout (confirm on client with client_secret)",
+      "Stripe webhooks with signature verification (stripe.webhooks.constructEvent)",
+      "Drizzle ORM with Postgres"
+    ],
+    "architectureNotes": [
+      "Prices captured on LineItem at add-to-cart time — product price changes don't retroactively alter carts",
+      "Inventory decremented on ORDER PLACEMENT (not payment success) to prevent overselling during payment processing",
+      "Webhook idempotency: webhook_events.event_id is UNIQUE; duplicate Stripe deliveries no-op instead of double-crediting the order",
+      "Amounts are integer cents, currency per-row (Stripe minimum amount is also in cents)"
+    ],
+    "firstSteps": [
+      "Copy .env.example to .env and fill in DATABASE_URL (postgres://...) and STRIPE_SECRET_KEY (sk_test_...)",
+      "Run `pnpm db:generate` then `pnpm db:migrate` to create the schema in your database",
+      "Run `pnpm dev` — server starts on PORT (default 8105); confirm with GET /health",
+      "For local webhook testing: `stripe listen --forward-to localhost:8105/webhooks/stripe` and set STRIPE_WEBHOOK_SECRET to the printed whsec_ value",
+      "To add a product: INSERT into products + variants tables (priceCents is integer cents, currency is 3-char ISO code)",
+      "Extend src/db/schema.ts for new fields, then re-run db:generate + db:migrate — Drizzle infers the migration diff automatically"
+    ],
+    "gotchas": [
+      "Stripe webhook signatures MUST be verified with the raw request body BEFORE JSON parsing. Parsing first, then verifying against a re-serialized body, fails because of whitespace differences.",
+      "Webhooks MUST be idempotent. Stripe retries on any non-2xx AND on timeouts even after you succeed. Use webhook_events.event_id UNIQUE as the lock.",
+      "PCI-DSS: NEVER store card numbers (PAN), CVV, or full track data. Only Stripe's payment_intent_id / payment_method_id. PCI-SAQ A requires card data never touches your server — use Stripe.js on the client, server only sees tokens.",
+      "Oversell bug: decrement inventory in the SAME transaction as order placement. Decrementing on webhook 'payment_succeeded' leaves a race where two customers claim the last unit.",
+      "Price drift: snapshot the unit_price onto LineItem at add-to-cart. Reading product.price at checkout means catalog edits retroactively charge customers more (or less).",
+      "Tax is jurisdictional and this scaffold does NOT compute it. Integrate TaxJar / Stripe Tax / Avalara before going live; don't hard-code a percentage.",
+      "Refunds are NEW records (refund payment with negative amount OR separate Refund entity), not UPDATEs to the original payment. Financial auditability demands it.",
+      "Cart expiration / abandoned cart cleanup must NOT release inventory that was decremented on order placement — inventory is released by cancelling the order explicitly.",
+      "Currency minor units differ: JPY has 0 decimals, USD has 2, TND has 3. amountCents isn't literally 'cents' for every currency — follow Stripe's currency docs."
+    ]
+  }
+}

package/registry/layers/framework/electron-native-os/files/App.tsx

@@ -0,0 +1,87 @@
+import { useEffect, useState } from "react";
+
+// The renderer exercises every native-OS seam exposed via the preload.
+// Each card is a smoke-test for one capability — agents can rip them
+// out once a real UI is designed but the wiring stays identical.
+
+declare global {
+  interface Window {
+    native: {
+      openFile: () => Promise<string | null>;
+      saveFile: (name: string) => Promise<string | null>;
+      notify: (payload: { title: string; body: string }) => Promise<boolean>;
+      onDeepLink: (handler: (url: string) => void) => () => void;
+      onMenuCommand: (handler: (command: string) => void) => () => void;
+    };
+  }
+}
+
+export default function App() {
+  const [lastFile, setLastFile] = useState<string | null>(null);
+  const [lastDeepLink, setLastDeepLink] = useState<string | null>(null);
+  const [lastMenu, setLastMenu] = useState<string | null>(null);
+
+  useEffect(() => {
+    const unsubDeep = window.native?.onDeepLink((url) => setLastDeepLink(url));
+    const unsubMenu = window.native?.onMenuCommand((cmd) => setLastMenu(cmd));
+    return () => {
+      unsubDeep?.();
+      unsubMenu?.();
+    };
+  }, []);
+
+  return (
+    <main className="shell">
+      <header>
+        <h1>{{headline}}</h1>
+        <p>{{subheadline}}</p>
+      </header>
+
+      <section className="cards">
+        <article className="card">
+          <h2>Native file dialog</h2>
+          <p>Opens the OS file picker via IPC — renderer stays sandboxed.</p>
+          <button
+            onClick={async () => {
+              const file = await window.native.openFile();
+              if (file) setLastFile(file);
+            }}
+          >
+            Open file…
+          </button>
+          {lastFile && <code>{lastFile}</code>}
+        </article>
+
+        <article className="card">
+          <h2>OS notification</h2>
+          <p>Dispatches a native banner / action-center toast.</p>
+          <button
+            onClick={() =>
+              window.native.notify({
+                title: "{{projectName}}",
+                body: "Notifications are wired.",
+              })
+            }
+          >
+            Send notification
+          </button>
+        </article>
+
+        <article className="card">
+          <h2>Deep link handler</h2>
+          <p>
+            Try <code>{{packageName}}://ping</code> from a browser — the URL
+            routes into this renderer.
+          </p>
+          <code>{lastDeepLink ?? "waiting…"}</code>
+        </article>
+
+        <article className="card">
+          <h2>Menu-bar commands</h2>
+          <p>File → Open (Cmd+O) and File → Save (Cmd+S) fire IPC here.</p>
+          <code>{lastMenu ?? "waiting…"}</code>
+        </article>
+      </section>
+    </main>
+  );
+}

package/registry/layers/framework/electron-native-os/files/deeplinks.ts

@@ -0,0 +1,59 @@
+// Deep-link routing. Two OS-specific paths:
+//
+//   - macOS: app.on("open-url", ...) fires when the user clicks a
+//     `{{packageName}}://` URL. It can fire BEFORE app.whenReady() on
+//     cold launch, so we buffer until the renderer exists.
+//
+//   - Windows/Linux: no open-url event; the URL arrives as argv on a
+//     second-instance launch. We listen to app.on("second-instance")
+//     which requires the single-instance lock to be held.
+//
+// Both paths funnel into a single queue that main/index.ts drains after
+// the BrowserWindow is ready.
+
+import { app } from "electron";
+
+type UrlHandler = (url: string) => void;
+
+export interface DeepLinkState {
+  flushTo(handler: UrlHandler): void;
+  onUrl(handler: UrlHandler): void;
+}
+
+export function installDeepLinkHandlers(): DeepLinkState {
+  const buffered: string[] = [];
+  const subscribers: UrlHandler[] = [];
+
+  function emit(url: string): void {
+    if (subscribers.length === 0) {
+      buffered.push(url);
+      return;
+    }
+    for (const handler of subscribers) handler(url);
+  }
+
+  // macOS cold-launch + warm open-url.
+  app.on("open-url", (event, url) => {
+    event.preventDefault();
+    emit(url);
+  });
+
+  // Windows/Linux: the running instance is told about the new argv.
+  app.on("second-instance", (_event, argv) => {
+    const url = argv.find((arg) => arg.startsWith("{{packageName}}://"));
+    if (url) emit(url);
+  });
+
+  return {
+    flushTo(handler) {
+      const pending = buffered.splice(0, buffered.length);
+      for (const url of pending) handler(url);
+    },
+    onUrl(handler) {
+      subscribers.push(handler);
+      // Any URLs that arrived before any subscriber existed will have
+      // been captured by `buffered` and flushed via flushTo(); nothing
+      // to replay here.
+    },
+  };
+}

package/registry/layers/framework/electron-native-os/files/electron-builder.json

@@ -0,0 +1,39 @@
+{
+  "appId": "com.starterfoundry.{{packageName}}",
+  "productName": "{{projectName}}",
+  "directories": {
+    "output": "release"
+  },
+  "files": [
+    "out/**/*",
+    "node_modules/**/*",
+    "package.json"
+  ],
+  "protocols": [
+    {
+      "name": "{{projectName}}",
+      "schemes": ["{{packageName}}"]
+    }
+  ],
+  "mac": {
+    "hardenedRuntime": true,
+    "gatekeeperAssess": false,
+    "entitlements": "build/entitlements.mac.plist",
+    "entitlementsInherit": "build/entitlements.mac.plist",
+    "notarize": true
+  },
+  "win": {
+    "target": ["nsis"],
+    "publisherName": "{{projectName}}"
+  },
+  "linux": {
+    "target": ["AppImage", "deb"],
+    "category": "Utility"
+  },
+  "publish": [
+    {
+      "provider": "github",
+      "releaseType": "release"
+    }
+  ]
+}

package/registry/layers/framework/electron-native-os/files/electron.vite.config.ts

@@ -0,0 +1,14 @@
+import { defineConfig, externalizeDepsPlugin } from 'electron-vite'
+import react from '@vitejs/plugin-react'
+
+export default defineConfig({
+  main: {
+    plugins: [externalizeDepsPlugin()]
+  },
+  preload: {
+    plugins: [externalizeDepsPlugin()]
+  },
+  renderer: {
+    plugins: [react()]
+  }
+})

package/registry/layers/framework/electron-native-os/files/index.ts

@@ -0,0 +1,119 @@
+// Main-process entry. The order of operations below is load-bearing:
+//
+//   1. acquire the single-instance lock FIRST (without it, Windows deep
+//      links launch a second copy of the app instead of routing to the
+//      running one).
+//   2. register custom protocol schemes BEFORE app.whenReady().
+//   3. install deep-link listeners BEFORE whenReady so macOS cold-launch
+//      open-url events are not lost.
+//   4. whenReady: register the app:// file protocol, build the menu,
+//      open the main window, boot the updater.
+
+import { app, BrowserWindow, ipcMain, dialog, Notification } from "electron";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+import log from "electron-log";
+import { registerAppProtocol, registerPrivilegedSchemes } from "./protocol.js";
+import { installDeepLinkHandlers } from "./deeplinks.js";
+import { buildApplicationMenu } from "./menu.js";
+import { bootAutoUpdater } from "./updater.js";
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+
+log.initialize();
+
+// (1) single-instance lock — required for Windows/Linux deep-link routing.
+const gotLock = app.requestSingleInstanceLock();
+if (!gotLock) {
+  app.quit();
+  process.exit(0);
+}
+
+// (2) privileged scheme registration must happen before whenReady().
+registerPrivilegedSchemes();
+
+// (3) deep-link plumbing — must attach before whenReady so we catch
+// cold-launch open-url on macOS.
+const deepLinkState = installDeepLinkHandlers();
+
+let mainWindow: BrowserWindow | null = null;
+
+function createMainWindow(): BrowserWindow {
+  const win = new BrowserWindow({
+    width: 1000,
+    height: 700,
+    title: "{{projectName}}",
+    webPreferences: {
+      preload: path.join(__dirname, "../preload/index.cjs"),
+      contextIsolation: true,
+      nodeIntegration: false,
+      sandbox: true,
+    },
+  });
+
+  if (process.env.VITE_DEV_SERVER_URL) {
+    win.loadURL(process.env.VITE_DEV_SERVER_URL);
+  } else {
+    win.loadURL("app://local/index.html");
+  }
+
+  return win;
+}
+
+// Renderer-side dialogs are proxied through IPC so the renderer stays
+// sandboxed (contextIsolation on, nodeIntegration off).
+ipcMain.handle("dialog:open-file", async () => {
+  const result = await dialog.showOpenDialog({
+    properties: ["openFile"],
+    filters: [{ name: "All Files", extensions: ["*"] }],
+  });
+  return result.canceled ? null : result.filePaths[0];
+});
+
+ipcMain.handle("dialog:save-file", async (_event, suggestedName: string) => {
+  const result = await dialog.showSaveDialog({ defaultPath: suggestedName });
+  return result.canceled ? null : result.filePath;
+});
+
+ipcMain.handle("notify", async (_event, { title, body }: { title: string; body: string }) => {
+  if (!Notification.isSupported()) return false;
+  new Notification({ title, body }).show();
+  return true;
+});
+
+app.whenReady().then(() => {
+  // (4a) Install the app:// file protocol now that we have a ready session.
+  registerAppProtocol();
+
+  // (4b) Platform menu.
+  buildApplicationMenu();
+
+  // (4c) Main window.
+  mainWindow = createMainWindow();
+
+  // (4d) Replay any deep link that arrived before the window existed.
+  deepLinkState.flushTo((url) => {
+    mainWindow?.webContents.send("deeplink", url);
+  });
+
+  // (4e) Forward future deep links into the renderer.
+  deepLinkState.onUrl((url) => {
+    if (mainWindow && !mainWindow.isDestroyed()) {
+      mainWindow.focus();
+      mainWindow.webContents.send("deeplink", url);
+    }
+  });
+
+  // (4f) Auto-update channel.
+  bootAutoUpdater(log);
+
+  app.on("activate", () => {
+    if (BrowserWindow.getAllWindows().length === 0) {
+      mainWindow = createMainWindow();
+    }
+  });
+});
+
+app.on("window-all-closed", () => {
+  if (process.platform !== "darwin") app.quit();
+});

package/registry/layers/framework/electron-native-os/files/menu.ts

@@ -0,0 +1,99 @@
+// Platform menus diverge enough that a shared "roles" menu template
+// produces the wrong thing on macOS (no app-name item) or Windows (no
+// File submenu). Branch on process.platform and build each explicitly.
+
+import { app, BrowserWindow, Menu, shell, type MenuItemConstructorOptions } from "electron";
+
+export function buildApplicationMenu(): void {
+  const isMac = process.platform === "darwin";
+
+  const macAppMenu: MenuItemConstructorOptions = {
+    label: app.name,
+    submenu: [
+      { role: "about" },
+      { type: "separator" },
+      { role: "services" },
+      { type: "separator" },
+      { role: "hide" },
+      { role: "hideOthers" },
+      { role: "unhide" },
+      { type: "separator" },
+      { role: "quit" },
+    ],
+  };
+
+  const fileMenu: MenuItemConstructorOptions = {
+    label: "File",
+    submenu: [
+      {
+        label: "Open…",
+        accelerator: "CmdOrCtrl+O",
+        click: (_item, win) => {
+          (win as BrowserWindow | undefined)?.webContents.send("menu:open");
+        },
+      },
+      {
+        label: "Save",
+        accelerator: "CmdOrCtrl+S",
+        click: (_item, win) => {
+          (win as BrowserWindow | undefined)?.webContents.send("menu:save");
+        },
+      },
+      { type: "separator" },
+      isMac ? { role: "close" } : { role: "quit" },
+    ],
+  };
+
+  const editMenu: MenuItemConstructorOptions = {
+    label: "Edit",
+    submenu: [
+      { role: "undo" },
+      { role: "redo" },
+      { type: "separator" },
+      { role: "cut" },
+      { role: "copy" },
+      { role: "paste" },
+      { role: "selectAll" },
+    ],
+  };
+
+  const viewMenu: MenuItemConstructorOptions = {
+    label: "View",
+    submenu: [
+      { role: "reload" },
+      { role: "forceReload" },
+      { role: "toggleDevTools" },
+      { type: "separator" },
+      { role: "resetZoom" },
+      { role: "zoomIn" },
+      { role: "zoomOut" },
+      { type: "separator" },
+      { role: "togglefullscreen" },
+    ],
+  };
+
+  const windowMenu: MenuItemConstructorOptions = {
+    label: "Window",
+    submenu: isMac
+      ? [{ role: "minimize" }, { role: "zoom" }, { type: "separator" }, { role: "front" }]
+      : [{ role: "minimize" }, { role: "zoom" }, { role: "close" }],
+  };
+
+  const helpMenu: MenuItemConstructorOptions = {
+    label: "Help",
+    submenu: [
+      {
+        label: "Documentation",
+        click: async () => {
+          await shell.openExternal("https://www.electronjs.org/docs");
+        },
+      },
+    ],
+  };
+
+  const template: MenuItemConstructorOptions[] = isMac
+    ? [macAppMenu, fileMenu, editMenu, viewMenu, windowMenu, helpMenu]
+    : [fileMenu, editMenu, viewMenu, windowMenu, helpMenu];
+
+  Menu.setApplicationMenu(Menu.buildFromTemplate(template));
+}

package/registry/layers/framework/electron-native-os/files/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "{{packageName}}",
+  "version": "0.1.0",
+  "private": true,
+  "main": "out/main/index.cjs",
+  "scripts": {
+    "dev": "electron-vite dev",
+    "build": "electron-vite build",
+    "preview": "electron-vite preview",
+    "package": "electron-builder --config electron-builder.json",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "electron-log": "^5.2.4",
+    "electron-updater": "^6.3.9"
+  },
+  "devDependencies": {
+    "@types/node": "^20.17.6",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "@vitejs/plugin-react": "^4.3.3",
+    "electron": "^33.4.0",
+    "electron-builder": "^25.1.8",
+    "electron-vite": "^2.3.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "typescript": "^5.6.3",
+    "vite": "^5.4.10"
+  }
+}

package/registry/layers/framework/electron-native-os/files/preload.ts

@@ -0,0 +1,33 @@
+// The ONLY surface area the renderer sees. Keep this list small and
+// typed — every function here is a capability the renderer can exercise
+// without needing nodeIntegration. Anything not listed here is not
+// reachable from the renderer, by design.
+
+import { contextBridge, ipcRenderer } from "electron";
+
+const api = {
+  openFile: (): Promise<string | null> => ipcRenderer.invoke("dialog:open-file"),
+  saveFile: (suggestedName: string): Promise<string | null> =>
+    ipcRenderer.invoke("dialog:save-file", suggestedName),
+  notify: (payload: { title: string; body: string }): Promise<boolean> =>
+    ipcRenderer.invoke("notify", payload),
+  onDeepLink: (handler: (url: string) => void): (() => void) => {
+    const wrapper = (_event: unknown, url: string) => handler(url);
+    ipcRenderer.on("deeplink", wrapper);
+    return () => ipcRenderer.removeListener("deeplink", wrapper);
+  },
+  onMenuCommand: (handler: (command: string) => void): (() => void) => {
+    const wrapper = (_event: unknown, _payload: unknown, channel: string) =>
+      handler(channel.replace(/^menu:/, ""));
+    ipcRenderer.on("menu:open", (event, payload) => wrapper(event, payload, "menu:open"));
+    ipcRenderer.on("menu:save", (event, payload) => wrapper(event, payload, "menu:save"));
+    return () => {
+      ipcRenderer.removeAllListeners("menu:open");
+      ipcRenderer.removeAllListeners("menu:save");
+    };
+  },
+};
+
+contextBridge.exposeInMainWorld("native", api);
+
+export type NativeApi = typeof api;

package/registry/layers/framework/electron-native-os/files/protocol.ts

@@ -0,0 +1,56 @@
+// Two protocol responsibilities in one file:
+//
+//   1. `app://` — a bundled-asset protocol for loading the renderer in
+//      production without exposing the file:// surface. Must be declared
+//      as "privileged" (secure, supports fetch) BEFORE app.whenReady(),
+//      then registered as a file handler AFTER whenReady.
+//
+//   2. `{{packageName}}://` — the OS-wide deep-link scheme. Registration
+//      is handled by electron-builder's `protocols` block for installed
+//      builds and by app.setAsDefaultProtocolClient for dev.
+
+import { app, protocol, net } from "electron";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+import { pathToFileURL } from "node:url";
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const DEEP_LINK_SCHEME = "{{packageName}}";
+
+export function registerPrivilegedSchemes(): void {
+  protocol.registerSchemesAsPrivileged([
+    {
+      scheme: "app",
+      privileges: {
+        standard: true,
+        secure: true,
+        supportFetchAPI: true,
+        corsEnabled: true,
+      },
+    },
+  ]);
+
+  // Deep-link registration. On macOS this is declarative via Info.plist
+  // (generated by electron-builder's protocols block). On Windows/Linux
+  // we still call setAsDefaultProtocolClient for dev-mode runs.
+  if (process.defaultApp) {
+    if (process.argv.length >= 2) {
+      app.setAsDefaultProtocolClient(DEEP_LINK_SCHEME, process.execPath, [
+        path.resolve(process.argv[1]!),
+      ]);
+    }
+  } else {
+    app.setAsDefaultProtocolClient(DEEP_LINK_SCHEME);
+  }
+}
+
+export function registerAppProtocol(): void {
+  // Electron 25+ prefers protocol.handle over registerFileProtocol.
+  protocol.handle("app", async (request) => {
+    const url = new URL(request.url);
+    // "app://local/index.html" -> resolve against the packaged renderer.
+    const rendererRoot = path.join(__dirname, "../renderer");
+    const filePath = path.join(rendererRoot, url.pathname);
+    return net.fetch(pathToFileURL(filePath).toString());
+  });
+}

package/registry/layers/framework/electron-native-os/files/renderer-index.html

@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta http-equiv="Content-Security-Policy" content="default-src 'self' app:; script-src 'self'; style-src 'self' 'unsafe-inline'" />
+    <title>{{headline}}</title>
+    <link rel="stylesheet" href="/src/renderer/styles.css" />
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/renderer/main.tsx"></script>
+  </body>
+</html>

package/registry/layers/framework/electron-native-os/files/renderer-main.tsx

@@ -0,0 +1,12 @@
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import App from "./App";
+
+const container = document.getElementById("root");
+if (!container) throw new Error("missing #root");
+
+createRoot(container).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+);