@bardioc/create-bardioc-app 0.5.8 → 0.6.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bardioc/create-bardioc-app",
-  "version": "0.5.8",
+  "version": "0.6.1",
   "description": "Scaffold a Bardioc app with framework templates (vite, react, vue, angular, svelte, solid, preact, nextjs)",
   "license": "MIT",
   "private": false,

package/templates/_base/public/app-manifest.json

@@ -5,6 +5,5 @@
   "description": "{{DISPLAY_NAME}} — a Bardioc hosted app",
   "version": "0.0.1",
   "entry": "index.html",
-  "icon": "icon.svg",
-  "permissions": ["notify", "transport"]
+  "icon": "icon.svg"
 }

package/templates/angular/package.json

@@ -28,7 +28,7 @@
     "@angular/platform-browser": "^19.2.12",
     "@angular/platform-browser-dynamic": "^19.2.12",
     "@angular/router": "^19.2.12",
-    "@bardioc/app-sdk": "^0.5.0",
+    "@bardioc/app-sdk": "^1.0.1",
     "rxjs": "~7.8.2",
     "tslib": "^2.8.1",
     "zone.js": "~0.15.1"

package/templates/angular/scripts/dev-env.mjs

@@ -5,11 +5,11 @@ import { join } from 'node:path';
 const DEFAULT_PORT = {{PORT}};
 
 // The dev-auth proxy answers on the app port plus this offset — the same origin the app points
-// installDevBridge at.
+// installDevHost at.
 export const PROXY_PORT_OFFSET = 100;
 
-// Neither Next nor Angular exposes import.meta.env to a node script, so dotenv values are read
-// here the way Vite's loadEnv does it: a shell value always wins over the files.
+// Neither Next nor Angular exposes import.meta.env to a node script, so the dotenv files are read
+// here: .env, then .env.local, then the shell, which always wins — the precedence of Vite's loadEnv.
 export function readEnvValue(projectDir, key) {
   let value;
 
@@ -23,19 +23,40 @@ export function readEnvValue(projectDir, key) {
 
     for (const rawLine of source.split(/\r?\n/)) {
       const line = rawLine.trim();
-      if (!line.startsWith(`${key}=`)) {
-        continue;
+      if (line.startsWith(`${key}=`)) {
+        value = parseValue(line.slice(key.length + 1));
       }
-      value = line
-        .slice(key.length + 1)
-        .trim()
-        .replace(/^['"]|['"]$/g, '');
     }
   }
 
   return process.env[key] ?? value;
 }
 
+// A quoted value is taken verbatim; an unquoted one ends at a `#` comment, as dotenv reads it.
+function parseValue(raw) {
+  const value = raw.trim();
+  const quoted = /^(['"`])(.*?)\1/.exec(value);
+  return quoted ? quoted[2] : value.split('#')[0].trim();
+}
+
 export function resolveAppPort(projectDir) {
-  return Number(readEnvValue(projectDir, 'LOCALHOST_PORT')) || DEFAULT_PORT;
+  const raw = readEnvValue(projectDir, 'LOCALHOST_PORT');
+  if (!raw) {
+    return DEFAULT_PORT;
+  }
+
+  const port = Number(raw);
+  if (Number.isInteger(port) && port >= 1 && port <= 65535) {
+    return port;
+  }
+
+  console.warn(`[dev] LOCALHOST_PORT=${raw} is not a valid port — using ${DEFAULT_PORT}`);
+  return DEFAULT_PORT;
+}
+
+// The standalone dev-auth contract; null when either value is missing, which disables the proxy.
+export function readDevAuthEnv(projectDir) {
+  const devSecret = readEnvValue(projectDir, 'DEV_SECRET')?.trim();
+  const apiBaseUrl = readEnvValue(projectDir, 'API_BASE_URL')?.trim().replace(/\/$/, '');
+  return devSecret && apiBaseUrl ? { devSecret, apiBaseUrl } : null;
 }

package/templates/angular/scripts/dev.mjs

@@ -1,27 +1,56 @@
 #!/usr/bin/env node
 
-import { startDevAuthProxy } from '@bardioc/app-sdk/dev-proxy';
+import { createDevAuthProxyHandler } from '@bardioc/app-sdk/dev-proxy';
 import { spawn } from 'node:child_process';
+import { createServer } from 'node:http';
 import { dirname, resolve } from 'node:path';
 import { fileURLToPath } from 'node:url';
-import { PROXY_PORT_OFFSET, resolveAppPort } from './dev-env.mjs';
+import { PROXY_PORT_OFFSET, readDevAuthEnv, resolveAppPort } from './dev-env.mjs';
+
+const PROXY_HOST = '127.0.0.1';
 
 const projectDir = resolve(dirname(fileURLToPath(import.meta.url)), '..');
 const port = resolveAppPort(projectDir);
 
-// Angular's dev server cannot host the SDK Vite plugin, so the proxy runs beside it. Without a
-// DEV_SECRET / API_BASE_URL it stays unstarted and the dev server runs alone, matching how the
-// SDK Vite plugin disables itself.
-const proxy = await startDevAuthProxy({ projectDir, port: port + PROXY_PORT_OFFSET });
+// Angular's dev server cannot host the SDK Vite plugin, so the proxy runs beside it.
+const proxy = await startProxy(port + PROXY_PORT_OFFSET);
 
-// shell:true so npm's node_modules/.bin lookup works on Windows too, where the binary is a .cmd.
-const server = spawn('ng', ['serve', '--port', String(port)], { stdio: 'inherit', shell: true });
+// One command string: shell:true resolves the .cmd shim on Windows, and passing an args array
+// alongside it is deprecated (DEP0190).
+const server = spawn(`ng serve --port ${port}`, { stdio: 'inherit', shell: true });
 
 for (const signal of ['SIGINT', 'SIGTERM']) {
   process.on(signal, () => server.kill(signal));
 }
 
+// Exit only once the dev server has, carrying its exit code.
 server.on('exit', (code, signal) => {
   proxy?.close();
   process.exit(signal ? 1 : (code ?? 0));
 });
+
+// Built from the SDK handler rather than startDevAuthProxy, whose own SIGINT handler exits the
+// process before the dev server has shut down. Without DEV_SECRET / API_BASE_URL the dev server
+// runs alone, matching how the SDK Vite plugin disables itself.
+async function startProxy(proxyPort) {
+  const env = readDevAuthEnv(projectDir);
+  if (!env) {
+    console.warn(
+      '[bardioc-dev-auth] DEV_SECRET and API_BASE_URL are required for dev auth — proxy disabled'
+    );
+    return null;
+  }
+
+  const handler = createDevAuthProxyHandler({ ...env, allowOrigin: '*' });
+  const proxyServer = createServer((req, res) => void handler(req, res));
+
+  await new Promise((resolveListen, rejectListen) => {
+    proxyServer.once('error', rejectListen);
+    proxyServer.listen(proxyPort, PROXY_HOST, resolveListen);
+  });
+
+  console.log(
+    `[bardioc-dev-auth] proxying /rest/* → ${env.apiBaseUrl} on http://${PROXY_HOST}:${proxyPort}/rest`
+  );
+  return proxyServer;
+}

package/templates/angular/src/app/app.component.ts

@@ -1,8 +1,8 @@
-import { isDevStandalone, isInsideIframe } from '@bardioc/app-sdk/dev';
 import { JsonPipe } from '@angular/common';
 import { Component, inject, signal } from '@angular/core';
-import { BARDIOC_BRIDGE } from './bardioc.token';
-import type { HostBridge } from '@bardioc/app-sdk';
+import type { NotifyLevel } from '@bardioc/app-sdk';
+import { isDevStandalone, isInsideIframe } from '@bardioc/app-sdk/dev';
+import { BARDIOC } from './bardioc.token';
 
 type ResultState =
   | { status: 'idle' }
@@ -27,30 +27,38 @@ type ResultState =
 
           <div class="flex flex-wrap gap-2">
             <button
-              class="bg-primary text-primary-foreground hover:bg-primary/90 disabled:opacity-50 rounded px-3 py-1 text-xs font-medium disabled:cursor-not-allowed"
+              class="bg-primary text-primary-foreground hover:bg-primary/90 rounded px-3 py-1 text-xs font-medium disabled:cursor-not-allowed disabled:opacity-50"
               (click)="runGetProfile()"
-              [disabled]="running()">
+              [disabled]="running()"
+            >
               Get Profile
             </button>
             <button
-              class="bg-primary text-primary-foreground hover:bg-primary/90 disabled:opacity-50 rounded px-3 py-1 text-xs font-medium disabled:cursor-not-allowed"
+              class="bg-primary text-primary-foreground hover:bg-primary/90 rounded px-3 py-1 text-xs font-medium disabled:cursor-not-allowed disabled:opacity-50"
               (click)="handleNotify()"
-              [disabled]="running()">
+              [disabled]="running()"
+            >
               Send Notification OS
             </button>
             <button
               class="border-border text-muted-foreground hover:text-foreground rounded border px-3 py-1 text-xs"
               (click)="clearResult()"
-              [disabled]="running()">
+              [disabled]="running()"
+            >
               Clear
             </button>
           </div>
 
-          <div class="border-border bg-background flex min-h-0 flex-1 flex-col overflow-hidden rounded border">
+          <div
+            class="border-border bg-background flex min-h-0 flex-1 flex-col overflow-hidden rounded border"
+          >
             @switch (result().status) {
               @case ('idle') {
-                <div class="text-muted-foreground flex h-full items-center justify-center p-3 text-center text-xs leading-5">
-                  Run a query to see results. If the host session is missing, the transport route will return 401.
+                <div
+                  class="text-muted-foreground flex h-full items-center justify-center p-3 text-center text-xs leading-5"
+                >
+                  Run a query to see results. If the host session is missing, the transport route
+                  will return 401.
                 </div>
               }
               @case ('loading') {
@@ -64,15 +72,21 @@ type ResultState =
                   <div class="text-muted-foreground border-border border-b pb-2 font-mono text-xs">
                     {{ resultRequest() }}
                   </div>
-                  <div class="text-destructive break-all whitespace-pre-wrap">{{ resultMessage() }}</div>
+                  <div class="text-destructive whitespace-pre-wrap break-all">
+                    {{ resultMessage() }}
+                  </div>
                 </div>
               }
               @case ('success') {
                 <div class="flex h-full flex-col gap-0 overflow-hidden">
-                  <div class="border-border text-muted-foreground shrink-0 border-b px-3 py-1 font-mono text-xs">
+                  <div
+                    class="border-border text-muted-foreground shrink-0 border-b px-3 py-1 font-mono text-xs"
+                  >
                     {{ resultRequest() }}
                   </div>
-                  <pre class="text-foreground flex-1 overflow-auto p-3 text-[11px] leading-5">{{ resultData() | json }}</pre>
+                  <pre class="text-foreground flex-1 overflow-auto p-3 text-[11px] leading-5">{{
+                    resultData() | json
+                  }}</pre>
                 </div>
               }
             }
@@ -93,30 +107,30 @@ type ResultState =
   `,
 })
 export class AppComponent {
-  private bridge = inject(BARDIOC_BRIDGE, { optional: true }) as HostBridge | null;
+  private bardioc = inject(BARDIOC, { optional: true });
 
   showSdkDemo = isInsideIframe() || isDevStandalone();
   result = signal<ResultState>({ status: 'idle' });
   running = signal(false);
 
   async runGetProfile(): Promise<void> {
-    if (this.running() || !this.bridge) return;
+    if (this.running() || !this.bardioc) return;
     this.running.set(true);
 
-    const request = 'transport.os.profile.get()';
+    const request = 'os.profile.get()';
     this.result.set({ status: 'loading', request });
 
     const startTime = Date.now();
-    this.bridge.notify('Getting user profile…', 'info');
+    this.notify('Getting user profile…', 'info');
 
     try {
-      const data = await this.bridge.transport.os.profile.get();
+      const data = await this.bardioc.os.profile.get();
       const duration = Date.now() - startTime;
-      this.bridge.notify(`Profile loaded (${duration}ms).`, 'success');
+      this.notify(`Profile loaded (${duration}ms).`, 'success');
       this.result.set({ status: 'success', request, data });
     } catch (err) {
       const message = err instanceof Error ? err.message : String(err);
-      this.bridge.notify(`Failed: ${message}`, 'error');
+      this.notify(`Failed: ${message}`, 'error');
       this.result.set({ status: 'error', request, message });
     }
 
@@ -124,15 +138,19 @@ export class AppComponent {
   }
 
   handleNotify(): void {
-    if (!this.bridge) return;
-    this.bridge.notify('Hello from {{DISPLAY_NAME}}.', 'info');
+    if (!this.bardioc) return;
+    this.notify('Hello from {{DISPLAY_NAME}}.', 'info');
     this.result.set({
       status: 'success',
-      request: 'SDK_NOTIFY',
+      request: 'ui.notify',
       data: { ok: true, message: 'Notification sent to OS' },
     });
   }
 
+  private notify(message: string, level: NotifyLevel): void {
+    this.bardioc?.ui.notify(message, level).catch(console.error);
+  }
+
   clearResult(): void {
     this.result.set({ status: 'idle' });
   }

package/templates/angular/src/app/bardioc.token.ts

@@ -1,4 +1,4 @@
 import { InjectionToken } from '@angular/core';
-import type { HostBridge } from '@bardioc/app-sdk';
+import type { Bardioc } from '@bardioc/app-sdk';
 
-export const BARDIOC_BRIDGE = new InjectionToken<HostBridge>('BARDIOC_BRIDGE');
+export const BARDIOC = new InjectionToken<Bardioc>('BARDIOC');

package/templates/angular/src/main.ts

@@ -1,5 +1,6 @@
+import { connect } from '@bardioc/app-sdk';
 import {
-  installDevBridge,
+  installDevHost,
   isDevStandalone,
   isInsideIframe,
 } from '@bardioc/app-sdk/dev';
@@ -7,8 +8,7 @@ import { bootstrapApplication } from '@angular/platform-browser';
 import { provideHttpClient } from '@angular/common/http';
 import { type EnvironmentProviders, type Provider } from '@angular/core';
 import { AppComponent } from './app/app.component';
-import { createBardiocBridge } from './app/bardioc-bridge';
-import { BARDIOC_BRIDGE } from './app/bardioc.token';
+import { BARDIOC } from './app/bardioc.token';
 import './styles.css';
 
 function readAppPort(): number {
@@ -24,7 +24,7 @@ const useSdkProvider = insideIframe || devStandalone;
 
 async function bootstrap() {
   if (devStandalone) {
-    installDevBridge({
+    installDevHost({
       apiBaseUrl: `http://127.0.0.1:${proxyPort}/rest`,
     });
   }
@@ -34,10 +34,7 @@ async function bootstrap() {
   ];
 
   if (useSdkProvider) {
-    providers.push({
-      provide: BARDIOC_BRIDGE,
-      useValue: createBardiocBridge(),
-    });
+    providers.push({ provide: BARDIOC, useValue: await connect() });
   }
 
   bootstrapApplication(AppComponent, {

package/templates/nextjs/app/page.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { installDevBridge, isDevStandalone, isInsideIframe } from '@bardioc/app-sdk/dev';
+import { installDevHost, isDevStandalone, isInsideIframe } from '@bardioc/app-sdk/dev';
 import { AppSdkProvider, useNotify, useSdk } from '@bardioc/app-sdk/react';
 import { useEffect, useState } from 'react';
 
@@ -10,13 +10,11 @@ type ResultState =
   | { status: 'success'; request: string; data: unknown }
   | { status: 'error'; request: string; message: string };
 
-const APP_NAME = process.env.NEXT_PUBLIC_APP_NAME?.trim();
-
 // The port the app falls back to when it is not being served over HTTP (LOCALHOST_PORT moves it).
 const DEFAULT_PORT = Number('{{PORT}}');
 
 function SdkDemo() {
-  const bridge = useSdk();
+  const bardioc = useSdk();
   const notify = useNotify();
   const [result, setResult] = useState<ResultState>({ status: 'idle' });
   const [running, setRunning] = useState(false);
@@ -25,14 +23,14 @@ function SdkDemo() {
     if (running) return;
     setRunning(true);
 
-    const request = 'transport.os.profile.get()';
+    const request = 'os.profile.get()';
     setResult({ status: 'loading', request });
 
     const startTime = Date.now();
     notify('Getting user profile…', 'info');
 
     try {
-      const data = await bridge.transport.os.profile.get();
+      const data = await bardioc.os.profile.get();
 
       const duration = Date.now() - startTime;
       notify(`Profile loaded (${duration}ms).`, 'success');
@@ -50,7 +48,7 @@ function SdkDemo() {
     notify('Hello from {{DISPLAY_NAME}}.', 'info');
     setResult({
       status: 'success',
-      request: 'SDK_NOTIFY',
+      request: 'ui.notify',
       data: { ok: true, message: 'Notification sent to OS' },
     });
   }
@@ -106,7 +104,7 @@ function SdkDemo() {
             <div className="text-muted-foreground border-border border-b pb-2 font-mono text-xs">
               {result.request}
             </div>
-            <div className="text-destructive break-all whitespace-pre-wrap">{result.message}</div>
+            <div className="text-destructive whitespace-pre-wrap break-all">{result.message}</div>
           </div>
         )}
         {result.status === 'success' && (
@@ -141,23 +139,19 @@ function PreviewShell() {
 export default function Page() {
   const useSdkProvider = isInsideIframe() || isDevStandalone();
 
-  if (!APP_NAME) {
-    throw new Error('Missing NEXT_PUBLIC_APP_NAME for runtime');
-  }
-
   useEffect(() => {
     if (isDevStandalone()) {
       // scripts/dev.mjs runs the dev-auth proxy on the app port + 100, so read the port the page
       // is actually served on rather than the one baked in at scaffold time.
       const appPort = Number(window.location.port) || DEFAULT_PORT;
-      installDevBridge({ apiBaseUrl: `http://127.0.0.1:${appPort + 100}/rest` });
+      installDevHost({ apiBaseUrl: `http://127.0.0.1:${appPort + 100}/rest` });
     }
   }, []);
 
   return (
     <div className="bg-background text-foreground @container/app min-h-screen">
       {useSdkProvider ? (
-        <AppSdkProvider appId={APP_NAME}>
+        <AppSdkProvider>
           <SdkDemo />
         </AppSdkProvider>
       ) : (

package/templates/nextjs/package.json

@@ -17,7 +17,7 @@
     "release:publish": "changeset publish"
   },
   "dependencies": {
-    "@bardioc/app-sdk": "^0.5.0",
+    "@bardioc/app-sdk": "^1.0.1",
     "next": "^15.3.2",
     "react": "^19.2.5",
     "react-dom": "^19.2.5"

package/templates/nextjs/scripts/dev-env.mjs

@@ -5,11 +5,11 @@ import { join } from 'node:path';
 const DEFAULT_PORT = {{PORT}};
 
 // The dev-auth proxy answers on the app port plus this offset — the same origin the app points
-// installDevBridge at.
+// installDevHost at.
 export const PROXY_PORT_OFFSET = 100;
 
-// Neither Next nor Angular exposes import.meta.env to a node script, so dotenv values are read
-// here the way Vite's loadEnv does it: a shell value always wins over the files.
+// Neither Next nor Angular exposes import.meta.env to a node script, so the dotenv files are read
+// here: .env, then .env.local, then the shell, which always wins — the precedence of Vite's loadEnv.
 export function readEnvValue(projectDir, key) {
   let value;
 
@@ -23,19 +23,40 @@ export function readEnvValue(projectDir, key) {
 
     for (const rawLine of source.split(/\r?\n/)) {
       const line = rawLine.trim();
-      if (!line.startsWith(`${key}=`)) {
-        continue;
+      if (line.startsWith(`${key}=`)) {
+        value = parseValue(line.slice(key.length + 1));
       }
-      value = line
-        .slice(key.length + 1)
-        .trim()
-        .replace(/^['"]|['"]$/g, '');
     }
   }
 
   return process.env[key] ?? value;
 }
 
+// A quoted value is taken verbatim; an unquoted one ends at a `#` comment, as dotenv reads it.
+function parseValue(raw) {
+  const value = raw.trim();
+  const quoted = /^(['"`])(.*?)\1/.exec(value);
+  return quoted ? quoted[2] : value.split('#')[0].trim();
+}
+
 export function resolveAppPort(projectDir) {
-  return Number(readEnvValue(projectDir, 'LOCALHOST_PORT')) || DEFAULT_PORT;
+  const raw = readEnvValue(projectDir, 'LOCALHOST_PORT');
+  if (!raw) {
+    return DEFAULT_PORT;
+  }
+
+  const port = Number(raw);
+  if (Number.isInteger(port) && port >= 1 && port <= 65535) {
+    return port;
+  }
+
+  console.warn(`[dev] LOCALHOST_PORT=${raw} is not a valid port — using ${DEFAULT_PORT}`);
+  return DEFAULT_PORT;
+}
+
+// The standalone dev-auth contract; null when either value is missing, which disables the proxy.
+export function readDevAuthEnv(projectDir) {
+  const devSecret = readEnvValue(projectDir, 'DEV_SECRET')?.trim();
+  const apiBaseUrl = readEnvValue(projectDir, 'API_BASE_URL')?.trim().replace(/\/$/, '');
+  return devSecret && apiBaseUrl ? { devSecret, apiBaseUrl } : null;
 }

package/templates/nextjs/scripts/dev.mjs

@@ -1,27 +1,56 @@
 #!/usr/bin/env node
 
-import { startDevAuthProxy } from '@bardioc/app-sdk/dev-proxy';
+import { createDevAuthProxyHandler } from '@bardioc/app-sdk/dev-proxy';
 import { spawn } from 'node:child_process';
+import { createServer } from 'node:http';
 import { dirname, resolve } from 'node:path';
 import { fileURLToPath } from 'node:url';
-import { PROXY_PORT_OFFSET, resolveAppPort } from './dev-env.mjs';
+import { PROXY_PORT_OFFSET, readDevAuthEnv, resolveAppPort } from './dev-env.mjs';
+
+const PROXY_HOST = '127.0.0.1';
 
 const projectDir = resolve(dirname(fileURLToPath(import.meta.url)), '..');
 const port = resolveAppPort(projectDir);
 
-// `next dev` cannot host the SDK Vite plugin, so the proxy runs beside it. Without a
-// DEV_SECRET / API_BASE_URL it stays unstarted and the dev server runs alone, matching how the
-// SDK Vite plugin disables itself.
-const proxy = await startDevAuthProxy({ projectDir, port: port + PROXY_PORT_OFFSET });
+// `next dev` cannot host the SDK Vite plugin, so the proxy runs beside it.
+const proxy = await startProxy(port + PROXY_PORT_OFFSET);
 
-// shell:true so npm's node_modules/.bin lookup works on Windows too, where the binary is a .cmd.
-const server = spawn('next', ['dev', '--port', String(port)], { stdio: 'inherit', shell: true });
+// One command string: shell:true resolves the .cmd shim on Windows, and passing an args array
+// alongside it is deprecated (DEP0190).
+const server = spawn(`next dev --port ${port}`, { stdio: 'inherit', shell: true });
 
 for (const signal of ['SIGINT', 'SIGTERM']) {
   process.on(signal, () => server.kill(signal));
 }
 
+// Exit only once the dev server has, carrying its exit code.
 server.on('exit', (code, signal) => {
   proxy?.close();
   process.exit(signal ? 1 : (code ?? 0));
 });
+
+// Built from the SDK handler rather than startDevAuthProxy, whose own SIGINT handler exits the
+// process before the dev server has shut down. Without DEV_SECRET / API_BASE_URL the dev server
+// runs alone, matching how the SDK Vite plugin disables itself.
+async function startProxy(proxyPort) {
+  const env = readDevAuthEnv(projectDir);
+  if (!env) {
+    console.warn(
+      '[bardioc-dev-auth] DEV_SECRET and API_BASE_URL are required for dev auth — proxy disabled'
+    );
+    return null;
+  }
+
+  const handler = createDevAuthProxyHandler({ ...env, allowOrigin: '*' });
+  const proxyServer = createServer((req, res) => void handler(req, res));
+
+  await new Promise((resolveListen, rejectListen) => {
+    proxyServer.once('error', rejectListen);
+    proxyServer.listen(proxyPort, PROXY_HOST, resolveListen);
+  });
+
+  console.log(
+    `[bardioc-dev-auth] proxying /rest/* → ${env.apiBaseUrl} on http://${PROXY_HOST}:${proxyPort}/rest`
+  );
+  return proxyServer;
+}

package/templates/preact/package.json

@@ -18,7 +18,7 @@
     "release:publish": "changeset publish"
   },
   "dependencies": {
-    "@bardioc/app-sdk": "^0.5.0",
+    "@bardioc/app-sdk": "^1.0.1",
     "preact": "^10.26.7"
   },
   "devDependencies": {

package/templates/preact/src/App.tsx

@@ -9,7 +9,7 @@ type ResultState =
   | { status: 'error'; request: string; message: string };
 
 function SdkDemo() {
-  const bridge = useSdk();
+  const bardioc = useSdk();
   const notify = useNotify();
   const [result, setResult] = useState<ResultState>({ status: 'idle' });
   const [running, setRunning] = useState(false);
@@ -18,14 +18,14 @@ function SdkDemo() {
     if (running) return;
     setRunning(true);
 
-    const request = 'transport.os.profile.get()';
+    const request = 'os.profile.get()';
     setResult({ status: 'loading', request });
 
     const startTime = Date.now();
     notify('Getting user profile…', 'info');
 
     try {
-      const data = await bridge.transport.os.profile.get();
+      const data = await bardioc.os.profile.get();
 
       const duration = Date.now() - startTime;
       notify(`Profile loaded (${duration}ms).`, 'success');
@@ -43,7 +43,7 @@ function SdkDemo() {
     notify('Hello from {{DISPLAY_NAME}}.', 'info');
     setResult({
       status: 'success',
-      request: 'SDK_NOTIFY',
+      request: 'ui.notify',
       data: { ok: true, message: 'Notification sent to OS' },
     });
   }
@@ -99,7 +99,7 @@ function SdkDemo() {
             <div className="text-muted-foreground border-border border-b pb-2 font-mono text-xs">
               {result.request}
             </div>
-            <div className="text-destructive break-all whitespace-pre-wrap">{result.message}</div>
+            <div className="text-destructive whitespace-pre-wrap break-all">{result.message}</div>
           </div>
         )}
         {result.status === 'success' && (

package/templates/preact/src/main.tsx

@@ -1,26 +1,20 @@
-import { installDevBridge, isDevStandalone, isInsideIframe } from '@bardioc/app-sdk/dev';
+import { installDevHost, isDevStandalone, isInsideIframe } from '@bardioc/app-sdk/dev';
 import { AppSdkProvider } from '@bardioc/app-sdk/react';
 import { render } from 'preact';
 import { App } from './App';
 import './index.css';
 
-const APP_NAME = import.meta.env.VITE_APP_NAME?.trim();
-
-if (!APP_NAME) {
-  throw new Error('Missing VITE_APP_NAME for runtime');
-}
-
 const insideIframe = isInsideIframe();
 const devStandalone = isDevStandalone();
 const useSdkProvider = insideIframe || devStandalone;
 
 if (devStandalone) {
-  installDevBridge({ debug: false });
+  installDevHost();
 }
 
 render(
   useSdkProvider ? (
-    <AppSdkProvider appId={APP_NAME}>
+    <AppSdkProvider>
       <App />
     </AppSdkProvider>
   ) : (