@bardioc/create-bardioc-app 0.5.6 → 0.5.8

package/README.md

@@ -72,7 +72,7 @@ Generated apps can run standalone with the `DEV_SECRET` dev-auth proxy.
 2. Fill in `VITE_APP_NAME`, `DEV_SECRET`, and `API_BASE_URL`
 3. Run `npm run dev`
 
-When running outside the host iframe, the SDK proxies `/rest/*` to `API_BASE_URL` with the `X-Dev-Secret` header and `installDevBridge()` handles SDK messages. Vite templates do this through the `bardiocDevAuth` plugin; the angular and nextjs templates run `scripts/dev-auth-proxy.mjs`, which `npm run dev` starts alongside their dev server.
+When running outside the host iframe, the SDK proxies `/rest/*` to `API_BASE_URL` with the `X-Dev-Secret` header and `installDevBridge()` handles SDK messages. Vite templates do this through the `bardiocDevAuth` plugin; the angular and nextjs templates run `scripts/dev.mjs`, which starts it alongside their dev server.
 
 ## Options
 

package/package.json

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

package/templates/_base/README.md

@@ -18,7 +18,7 @@ npm run dev              # http://localhost:{{PORT}}
 
 `npm run dev` starts the dev server as a local preview shell. Live SDK data comes when the app is
 opened inside the host, or standalone once `DEV_SECRET` and `API_BASE_URL` are set — the SDK then
-proxies `/rest/*` to the BFF (via the `bardiocDevAuth` Vite plugin, or `scripts/dev-auth-proxy.mjs`
+proxies `/rest/*` to the BFF (via the `bardiocDevAuth` Vite plugin, or `scripts/dev.mjs`
 in the angular and nextjs templates, which `npm run dev` starts alongside the dev server). See
 `.env.example` for the required variables.
 

package/templates/angular/.env.example

@@ -2,8 +2,11 @@
 VITE_APP_NAME={{APP_NAME}}
 
 # Paste the dev secret from the BardiocOS AppStore after registering your app.
-# Used by the dev-auth proxy (scripts/dev-auth-proxy.mjs) to sign requests to the BFF.
+# Used by the dev-auth proxy (scripts/dev.mjs) to sign requests to the BFF.
 DEV_SECRET=
 
 # Base URL of the Bardioc BFF / backend-for-frontend (e.g. https://your-host).
 API_BASE_URL=
+
+# By default, the app will start on port {{PORT}}. Feel free to uncomment the following variable and change it to match your local setup preferences.
+#LOCALHOST_PORT={{PORT}}

package/templates/angular/package.json

@@ -6,7 +6,7 @@
     "sync:runtime-env": "node ./scripts/sync-runtime-env.mjs",
     "ng": "ng",
     "predev": "npm run sync:runtime-env",
-    "dev": "node ./scripts/dev-auth-proxy.mjs & PROXY_PID=$!; ng serve --port {{PORT}}; EXIT_CODE=$?; kill $PROXY_PID 2>/dev/null; exit $EXIT_CODE",
+    "dev": "node ./scripts/dev.mjs",
     "prebuild": "npm run sync:runtime-env",
     "build": "ng build && node scripts/stamp-manifest.mjs dist/{{APP_NAME}}/browser",
     "bundle": "ng build && node scripts/stamp-manifest.mjs dist/{{APP_NAME}}/browser && cd dist/{{APP_NAME}}/browser && zip -r ../../../{{APP_NAME}}.zip .",
@@ -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.4.9",
+    "@bardioc/app-sdk": "^0.5.0",
     "rxjs": "~7.8.2",
     "tslib": "^2.8.1",
     "zone.js": "~0.15.1"

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

@@ -0,0 +1,41 @@
+import { readFileSync } from 'node:fs';
+import { join } from 'node:path';
+
+// The port a scaffolded app defaults to. LOCALHOST_PORT overrides it, from .env or the shell.
+const DEFAULT_PORT = {{PORT}};
+
+// The dev-auth proxy answers on the app port plus this offset — the same origin the app points
+// installDevBridge 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.
+export function readEnvValue(projectDir, key) {
+  let value;
+
+  for (const fileName of ['.env', '.env.local']) {
+    let source;
+    try {
+      source = readFileSync(join(projectDir, fileName), 'utf8');
+    } catch {
+      continue;
+    }
+
+    for (const rawLine of source.split(/\r?\n/)) {
+      const line = rawLine.trim();
+      if (!line.startsWith(`${key}=`)) {
+        continue;
+      }
+      value = line
+        .slice(key.length + 1)
+        .trim()
+        .replace(/^['"]|['"]$/g, '');
+    }
+  }
+
+  return process.env[key] ?? value;
+}
+
+export function resolveAppPort(projectDir) {
+  return Number(readEnvValue(projectDir, 'LOCALHOST_PORT')) || DEFAULT_PORT;
+}

package/templates/angular/scripts/dev.mjs

@@ -0,0 +1,27 @@
+#!/usr/bin/env node
+
+import { startDevAuthProxy } from '@bardioc/app-sdk/dev-proxy';
+import { spawn } from 'node:child_process';
+import { dirname, resolve } from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { PROXY_PORT_OFFSET, resolveAppPort } from './dev-env.mjs';
+
+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 });
+
+// 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 });
+
+for (const signal of ['SIGINT', 'SIGTERM']) {
+  process.on(signal, () => server.kill(signal));
+}
+
+server.on('exit', (code, signal) => {
+  proxy?.close();
+  process.exit(signal ? 1 : (code ?? 0));
+});

package/templates/angular/scripts/sync-runtime-env.mjs

@@ -1,8 +1,9 @@
 #!/usr/bin/env node
 
-import { mkdirSync, readFileSync, writeFileSync } from 'node:fs';
+import { mkdirSync, writeFileSync } from 'node:fs';
 import { dirname, join, resolve } from 'node:path';
 import { fileURLToPath } from 'node:url';
+import { readEnvValue } from './dev-env.mjs';
 
 const __dirname = dirname(fileURLToPath(import.meta.url));
 const projectRoot = resolve(__dirname, '..');
@@ -19,30 +20,3 @@ writeFileSync(
   'utf8'
 );
 
-// Angular has no import.meta.env, so the app slug is baked into a runtime script instead.
-function readEnvValue(projectDir, key) {
-  let value;
-
-  for (const fileName of ['.env', '.env.local']) {
-    let source;
-    try {
-      source = readFileSync(join(projectDir, fileName), 'utf8');
-    } catch {
-      continue;
-    }
-
-    for (const rawLine of source.split(/\r?\n/)) {
-      const line = rawLine.trim();
-      if (!line.startsWith(`${key}=`)) {
-        continue;
-      }
-      value = line
-        .slice(key.length + 1)
-        .trim()
-        .replace(/^['"]|['"]$/g, '');
-    }
-  }
-
-  // A shell value always wins over the dotenv files, like Vite's env loading.
-  return process.env[key] ?? value;
-}

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

@@ -15,7 +15,7 @@ type ResultState =
   standalone: true,
   imports: [JsonPipe],
   template: `
-    <div class="bg-background text-foreground min-h-screen">
+    <div class="bg-background text-foreground @container/app min-h-screen">
       @if (showSdkDemo) {
         <div class="mx-auto flex min-h-screen w-full max-w-3xl flex-col gap-3 p-4">
           <div class="flex flex-col gap-1">
@@ -82,7 +82,7 @@ type ResultState =
         <div class="mx-auto flex min-h-screen w-full max-w-3xl flex-col gap-4 p-4">
           <h1 class="m-0 text-2xl font-semibold">Hello Bardioc App</h1>
           <p class="text-muted-foreground m-0 max-w-2xl text-xs leading-5">
-            Open this app inside Bardioc OS to use transport requests and send host notifications.
+            Open this app inside Bardioc to use transport requests and send host notifications.
           </p>
           <div class="border-border bg-muted/20 rounded-xl border p-3 text-xs leading-5">
             Outside the host iframe this page is only a local preview shell.
@@ -107,12 +107,12 @@ export class AppComponent {
     this.result.set({ status: 'loading', request });
 
     const startTime = Date.now();
-    this.bridge.notify('Getting user profile', 'info');
+    this.bridge.notify('Getting user profile…', 'info');
 
     try {
       const data = await this.bridge.transport.os.profile.get();
       const duration = Date.now() - startTime;
-      this.bridge.notify(`Profile loaded (${duration}ms)`, 'success');
+      this.bridge.notify(`Profile loaded (${duration}ms).`, 'success');
       this.result.set({ status: 'success', request, data });
     } catch (err) {
       const message = err instanceof Error ? err.message : String(err);
@@ -125,7 +125,7 @@ export class AppComponent {
 
   handleNotify(): void {
     if (!this.bridge) return;
-    this.bridge.notify('Hello from {{DISPLAY_NAME}}', 'info');
+    this.bridge.notify('Hello from {{DISPLAY_NAME}}.', 'info');
     this.result.set({
       status: 'success',
       request: 'SDK_NOTIFY',

package/templates/angular/src/styles.css

@@ -85,6 +85,10 @@ code {
     margin: 0;
 }
 
+.\@container\/app {
+    container: app / inline-size;
+}
+
 .flex {
     display: flex;
 }

package/templates/nextjs/.env.example

@@ -2,8 +2,11 @@
 NEXT_PUBLIC_APP_NAME={{APP_NAME}}
 
 # Paste the dev secret from the BardiocOS AppStore after registering your app.
-# Used by the dev-auth proxy (scripts/dev-auth-proxy.mjs) to sign requests to the BFF.
+# Used by the dev-auth proxy (scripts/dev.mjs) to sign requests to the BFF.
 DEV_SECRET=
 
 # Base URL of the Bardioc BFF / backend-for-frontend (e.g. https://your-host).
 API_BASE_URL=
+
+# By default, the app will start on port {{PORT}}. Feel free to uncomment the following variable and change it to match your local setup preferences.
+#LOCALHOST_PORT={{PORT}}

package/templates/nextjs/app/page.tsx

@@ -12,8 +12,8 @@ type ResultState =
 
 const APP_NAME = process.env.NEXT_PUBLIC_APP_NAME?.trim();
 
-// scripts/dev-auth-proxy.mjs listens on the app port + 100 for standalone dev auth.
-const DEV_PROXY_PORT = Number('{{PORT}}') + 100;
+// 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();
@@ -29,13 +29,13 @@ function SdkDemo() {
     setResult({ status: 'loading', request });
 
     const startTime = Date.now();
-    notify('Getting user profile', 'info');
+    notify('Getting user profile…', 'info');
 
     try {
       const data = await bridge.transport.os.profile.get();
 
       const duration = Date.now() - startTime;
-      notify(`Profile loaded (${duration}ms)`, 'success');
+      notify(`Profile loaded (${duration}ms).`, 'success');
       setResult({ status: 'success', request, data });
     } catch (err) {
       const message = err instanceof Error ? err.message : String(err);
@@ -47,7 +47,7 @@ function SdkDemo() {
   }
 
   function handleNotify() {
-    notify('Hello from {{DISPLAY_NAME}}', 'info');
+    notify('Hello from {{DISPLAY_NAME}}.', 'info');
     setResult({
       status: 'success',
       request: 'SDK_NOTIFY',
@@ -129,7 +129,7 @@ function PreviewShell() {
     <div className="mx-auto flex min-h-screen w-full max-w-3xl flex-col gap-4 p-4">
       <h1 className="m-0 text-2xl font-semibold">Hello Bardioc App</h1>
       <p className="text-muted-foreground m-0 max-w-2xl text-xs leading-5">
-        Open this app inside Bardioc OS to use transport requests and send host notifications.
+        Open this app inside Bardioc to use transport requests and send host notifications.
       </p>
       <div className="border-border bg-muted/20 rounded-xl border p-3 text-xs leading-5">
         Outside the host iframe this page is only a local preview shell.
@@ -147,12 +147,15 @@ export default function Page() {
 
   useEffect(() => {
     if (isDevStandalone()) {
-      installDevBridge({ apiBaseUrl: `http://127.0.0.1:${DEV_PROXY_PORT}/rest` });
+      // 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` });
     }
   }, []);
 
   return (
-    <div className="bg-background text-foreground min-h-screen">
+    <div className="bg-background text-foreground @container/app min-h-screen">
       {useSdkProvider ? (
         <AppSdkProvider appId={APP_NAME}>
           <SdkDemo />

package/templates/nextjs/next.config.ts

@@ -1,6 +1,6 @@
 import type { NextConfig } from 'next';
 
-// Standalone dev auth lives in scripts/dev-auth-proxy.mjs (the SDK dev-auth proxy), not here:
+// Standalone dev auth lives in scripts/dev.mjs (the SDK dev-auth proxy), not here:
 // the BFF needs Origin dropped and X-Requested-With stamped, which rewrites cannot do.
 const nextConfig: NextConfig = {
   output: 'export',

package/templates/nextjs/package.json

@@ -3,7 +3,7 @@
   "version": "0.0.1",
   "private": true,
   "scripts": {
-    "dev": "node ./scripts/dev-auth-proxy.mjs & PROXY_PID=$!; next dev --port {{PORT}}; EXIT_CODE=$?; kill $PROXY_PID 2>/dev/null; exit $EXIT_CODE",
+    "dev": "node ./scripts/dev.mjs",
     "build": "next build && node scripts/stamp-manifest.mjs out",
     "bundle": "next build && node scripts/stamp-manifest.mjs out && cd out && zip -r ../{{APP_NAME}}.zip .",
     "start": "next start",
@@ -17,13 +17,13 @@
     "release:publish": "changeset publish"
   },
   "dependencies": {
-    "@bardioc/app-sdk": "^0.4.9",
+    "@bardioc/app-sdk": "^0.5.0",
     "next": "^15.3.2",
     "react": "^19.2.5",
     "react-dom": "^19.2.5"
   },
   "devDependencies": {
-    "@bardioc/configs": "^0.2.1",
+    "@bardioc/configs": "0.2.1",
     "@changesets/cli": "^2.31.0",
     "@tailwindcss/postcss": "^4.2.4",
     "@types/node": "^22.10.0",

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

@@ -0,0 +1,41 @@
+import { readFileSync } from 'node:fs';
+import { join } from 'node:path';
+
+// The port a scaffolded app defaults to. LOCALHOST_PORT overrides it, from .env or the shell.
+const DEFAULT_PORT = {{PORT}};
+
+// The dev-auth proxy answers on the app port plus this offset — the same origin the app points
+// installDevBridge 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.
+export function readEnvValue(projectDir, key) {
+  let value;
+
+  for (const fileName of ['.env', '.env.local']) {
+    let source;
+    try {
+      source = readFileSync(join(projectDir, fileName), 'utf8');
+    } catch {
+      continue;
+    }
+
+    for (const rawLine of source.split(/\r?\n/)) {
+      const line = rawLine.trim();
+      if (!line.startsWith(`${key}=`)) {
+        continue;
+      }
+      value = line
+        .slice(key.length + 1)
+        .trim()
+        .replace(/^['"]|['"]$/g, '');
+    }
+  }
+
+  return process.env[key] ?? value;
+}
+
+export function resolveAppPort(projectDir) {
+  return Number(readEnvValue(projectDir, 'LOCALHOST_PORT')) || DEFAULT_PORT;
+}

package/templates/nextjs/scripts/dev.mjs

@@ -0,0 +1,27 @@
+#!/usr/bin/env node
+
+import { startDevAuthProxy } from '@bardioc/app-sdk/dev-proxy';
+import { spawn } from 'node:child_process';
+import { dirname, resolve } from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { PROXY_PORT_OFFSET, resolveAppPort } from './dev-env.mjs';
+
+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 });
+
+// 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 });
+
+for (const signal of ['SIGINT', 'SIGTERM']) {
+  process.on(signal, () => server.kill(signal));
+}
+
+server.on('exit', (code, signal) => {
+  proxy?.close();
+  process.exit(signal ? 1 : (code ?? 0));
+});

package/templates/preact/.env.example

@@ -7,3 +7,6 @@ DEV_SECRET=
 
 # Base URL of the Bardioc BFF / backend-for-frontend (e.g. https://your-host).
 API_BASE_URL=
+
+# By default, the app will start on port {{PORT}}. Feel free to uncomment the following variable and change it to match your local setup preferences.
+#LOCALHOST_PORT={{PORT}}

package/templates/preact/package.json

@@ -18,11 +18,11 @@
     "release:publish": "changeset publish"
   },
   "dependencies": {
-    "@bardioc/app-sdk": "^0.4.9",
+    "@bardioc/app-sdk": "^0.5.0",
     "preact": "^10.26.7"
   },
   "devDependencies": {
-    "@bardioc/configs": "^0.2.1",
+    "@bardioc/configs": "0.2.1",
     "@changesets/cli": "^2.31.0",
     "@preact/preset-vite": "^2.10.6",
     "@tailwindcss/vite": "^4.3.0",

package/templates/preact/src/App.tsx

@@ -22,13 +22,13 @@ function SdkDemo() {
     setResult({ status: 'loading', request });
 
     const startTime = Date.now();
-    notify('Getting user profile', 'info');
+    notify('Getting user profile…', 'info');
 
     try {
       const data = await bridge.transport.os.profile.get();
 
       const duration = Date.now() - startTime;
-      notify(`Profile loaded (${duration}ms)`, 'success');
+      notify(`Profile loaded (${duration}ms).`, 'success');
       setResult({ status: 'success', request, data });
     } catch (err) {
       const message = err instanceof Error ? err.message : String(err);
@@ -40,7 +40,7 @@ function SdkDemo() {
   }
 
   function handleNotify() {
-    notify('Hello from {{DISPLAY_NAME}}', 'info');
+    notify('Hello from {{DISPLAY_NAME}}.', 'info');
     setResult({
       status: 'success',
       request: 'SDK_NOTIFY',
@@ -121,14 +121,14 @@ export function App() {
   const showSdkDemo = isInsideIframe() || isDevStandalone();
 
   return (
-    <div className="bg-background text-foreground min-h-screen">
+    <div className="bg-background text-foreground @container/app min-h-screen">
       {showSdkDemo ? (
         <SdkDemo />
       ) : (
         <div className="mx-auto flex min-h-screen w-full max-w-3xl flex-col gap-4 p-4">
           <h1 className="m-0 text-2xl font-semibold">Hello Bardioc App</h1>
           <p className="text-muted-foreground m-0 max-w-2xl text-xs leading-5">
-            Open this app inside Bardioc OS to use transport requests and send host notifications.
+            Open this app inside Bardioc to use transport requests and send host notifications.
           </p>
           <div className="border-border bg-muted/20 rounded-xl border p-3 text-xs leading-5">
             Outside the host iframe this page is only a local preview shell.

package/templates/preact/vite.config.ts

@@ -3,9 +3,12 @@ import preact from '@preact/preset-vite';
 import tailwindcss from '@tailwindcss/vite';
 import { defineConfig, loadEnv } from 'vite';
 
+const DEFAULT_PORT = {{PORT}};
+
 export default defineConfig(({ mode }) => {
   const env = loadEnv(mode, __dirname, '');
   const appName = env.VITE_APP_NAME?.trim();
+  const port = Number(env.LOCALHOST_PORT) || DEFAULT_PORT;
 
   if (!appName) {
     throw new Error('Missing VITE_APP_NAME for Vite config');
@@ -15,7 +18,7 @@ export default defineConfig(({ mode }) => {
     plugins: [
       bardiocDevAuth({ appName }),
       preact(),
-      bardiocApp({ appName, port: {{PORT}} }),
+      bardiocApp({ appName, port }),
       tailwindcss(),
     ],
   };

package/templates/solid/.env.example

@@ -7,3 +7,6 @@ DEV_SECRET=
 
 # Base URL of the Bardioc BFF / backend-for-frontend (e.g. https://your-host).
 API_BASE_URL=
+
+# By default, the app will start on port {{PORT}}. Feel free to uncomment the following variable and change it to match your local setup preferences.
+#LOCALHOST_PORT={{PORT}}

package/templates/solid/package.json

@@ -18,11 +18,11 @@
     "release:publish": "changeset publish"
   },
   "dependencies": {
-    "@bardioc/app-sdk": "^0.4.9",
+    "@bardioc/app-sdk": "^0.5.0",
     "solid-js": "^1.9.7"
   },
   "devDependencies": {
-    "@bardioc/configs": "^0.2.1",
+    "@bardioc/configs": "0.2.1",
     "@changesets/cli": "^2.31.0",
     "@tailwindcss/vite": "^4.3.0",
     "@types/node": "^22.19.19",

package/templates/solid/src/App.tsx

@@ -22,13 +22,13 @@ function SdkDemo() {
     setResult({ status: 'loading', request });
 
     const startTime = Date.now();
-    notify('Getting user profile', 'info');
+    notify('Getting user profile…', 'info');
 
     try {
       const data = await bridge.transport.os.profile.get();
 
       const duration = Date.now() - startTime;
-      notify(`Profile loaded (${duration}ms)`, 'success');
+      notify(`Profile loaded (${duration}ms).`, 'success');
       setResult({ status: 'success', request, data });
     } catch (err) {
       const message = err instanceof Error ? err.message : String(err);
@@ -40,7 +40,7 @@ function SdkDemo() {
   }
 
   function handleNotify() {
-    notify('Hello from {{DISPLAY_NAME}}', 'info');
+    notify('Hello from {{DISPLAY_NAME}}.', 'info');
     setResult({
       status: 'success',
       request: 'SDK_NOTIFY',
@@ -132,14 +132,14 @@ export function App() {
   const showSdkDemo = isInsideIframe() || isDevStandalone();
 
   return (
-    <div class="bg-background text-foreground min-h-screen">
+    <div class="bg-background text-foreground @container/app min-h-screen">
       {showSdkDemo ? (
         <SdkDemo />
       ) : (
         <div class="mx-auto flex min-h-screen w-full max-w-3xl flex-col gap-4 p-4">
           <h1 class="m-0 text-2xl font-semibold">Hello Bardioc App</h1>
           <p class="text-muted-foreground m-0 max-w-2xl text-xs leading-5">
-            Open this app inside Bardioc OS to use transport requests and send host notifications.
+            Open this app inside Bardioc to use transport requests and send host notifications.
           </p>
           <div class="border-border bg-muted/20 rounded-xl border p-3 text-xs leading-5">
             Outside the host iframe this page is only a local preview shell.

package/templates/solid/vite.config.ts

@@ -3,9 +3,12 @@ import tailwindcss from '@tailwindcss/vite';
 import { defineConfig, loadEnv } from 'vite';
 import solid from 'vite-plugin-solid';
 
+const DEFAULT_PORT = {{PORT}};
+
 export default defineConfig(({ mode }) => {
   const env = loadEnv(mode, __dirname, '');
   const appName = env.VITE_APP_NAME?.trim();
+  const port = Number(env.LOCALHOST_PORT) || DEFAULT_PORT;
 
   if (!appName) {
     throw new Error('Missing VITE_APP_NAME for Vite config');
@@ -15,7 +18,7 @@ export default defineConfig(({ mode }) => {
     plugins: [
       bardiocDevAuth({ appName }),
       solid(),
-      bardiocApp({ appName, port: {{PORT}} }),
+      bardiocApp({ appName, port }),
       tailwindcss(),
     ],
   };

package/templates/svelte/.env.example

@@ -7,3 +7,6 @@ DEV_SECRET=
 
 # Base URL of the Bardioc BFF / backend-for-frontend (e.g. https://your-host).
 API_BASE_URL=
+
+# By default, the app will start on port {{PORT}}. Feel free to uncomment the following variable and change it to match your local setup preferences.
+#LOCALHOST_PORT={{PORT}}

package/templates/svelte/package.json

@@ -18,11 +18,11 @@
     "release:publish": "changeset publish"
   },
   "dependencies": {
-    "@bardioc/app-sdk": "^0.4.9",
+    "@bardioc/app-sdk": "^0.5.0",
     "svelte": "^5.33.14"
   },
   "devDependencies": {
-    "@bardioc/configs": "^0.2.1",
+    "@bardioc/configs": "0.2.1",
     "@changesets/cli": "^2.31.0",
     "@sveltejs/vite-plugin-svelte": "^7.2.0",
     "@tailwindcss/vite": "^4.3.0",

package/templates/svelte/src/App.svelte

@@ -29,13 +29,13 @@
     result = { status: 'loading', request };
 
     const startTime = Date.now();
-    notify('Getting user profile', 'info');
+    notify('Getting user profile…', 'info');
 
     try {
       const data = await bridge.transport.os.profile.get();
 
       const duration = Date.now() - startTime;
-      notify(`Profile loaded (${duration}ms)`, 'success');
+      notify(`Profile loaded (${duration}ms).`, 'success');
       result = { status: 'success', request, data };
     } catch (err) {
       const message = err instanceof Error ? err.message : String(err);
@@ -47,7 +47,7 @@
   }
 
   function handleNotify() {
-    notify('Hello from {{DISPLAY_NAME}}', 'info');
+    notify('Hello from {{DISPLAY_NAME}}.', 'info');
     result = {
       status: 'success',
       request: 'SDK_NOTIFY',
@@ -60,7 +60,7 @@
   }
 </script>
 
-<div class="bg-background text-foreground min-h-screen">
+<div class="bg-background text-foreground @container/app min-h-screen">
   {#if showSdkDemo}
     <div class="mx-auto flex min-h-screen w-full max-w-3xl flex-col gap-3 p-4">
       <div class="flex flex-col gap-1">
@@ -125,7 +125,7 @@
     <div class="mx-auto flex min-h-screen w-full max-w-3xl flex-col gap-4 p-4">
       <h1 class="m-0 text-2xl font-semibold">Hello Bardioc App</h1>
       <p class="text-muted-foreground m-0 max-w-2xl text-xs leading-5">
-        Open this app inside Bardioc OS to use transport requests and send host notifications.
+        Open this app inside Bardioc to use transport requests and send host notifications.
       </p>
       <div class="border-border bg-muted/20 rounded-xl border p-3 text-xs leading-5">
         Outside the host iframe this page is only a local preview shell.