@bardioc/create-bardioc-app 0.5.6 → 0.5.8

package/templates/vite/src/shell/header.tsx

@@ -4,35 +4,35 @@ import { LocationSelect } from '../climate/location-select';
 import { useDashboard } from '../dashboard-provider';
 import { SUPPORTED_LOCALES, useI18n, useTranslation } from '../i18n';
 
+// Goes into Page's `actions` slot, so it renders bare controls: Page owns the header row, its
+// padding and its border, and lines all three up with the body below.
 export function Header() {
   const { t } = useTranslation();
   const { state, syncing, refresh, setActiveStation } = useDashboard();
 
   return (
-    <header className="border-border flex shrink-0 items-center justify-end gap-3 border-b px-4 py-2">
-      <div className="flex shrink-0 items-center gap-2">
-        {state?.stations && (
-          <LocationSelect
-            stations={state.stations}
-            value={state.activeStationId}
-            onSelect={setActiveStation}
-          />
-        )}
-        <ConnectedLanguageSwitcher
-          useI18n={useI18n}
-          supportedLocales={[...SUPPORTED_LOCALES]}
-          flags={{ en: 'EN', de: 'DE' }}
+    <>
+      {state?.stations && (
+        <LocationSelect
+          stations={state.stations}
+          value={state.activeStationId}
+          onSelect={setActiveStation}
         />
-        <Button
-          className="gap-2"
-          size="sm"
-          onClick={() => void refresh()}
-          disabled={syncing || !state}
-        >
-          <RefreshCw className={`size-4 ${syncing ? 'animate-spin' : ''}`} />
-          {t('header.sync', { fallback: 'Sync' })}
-        </Button>
-      </div>
-    </header>
+      )}
+      <ConnectedLanguageSwitcher
+        useI18n={useI18n}
+        supportedLocales={[...SUPPORTED_LOCALES]}
+        flags={{ en: 'EN', de: 'DE' }}
+      />
+      <Button
+        className="gap-2"
+        size="sm"
+        onClick={() => void refresh()}
+        disabled={syncing || !state}
+      >
+        <RefreshCw className={`size-4 ${syncing ? 'animate-spin' : ''}`} />
+        {t('header.sync', { fallback: 'Sync' })}
+      </Button>
+    </>
   );
 }

package/templates/vite/vite.config.ts

@@ -3,9 +3,12 @@ import tailwindcss from '@tailwindcss/vite';
 import react from '@vitejs/plugin-react';
 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 }),
       react(),
-      bardiocApp({ appName, port: {{PORT}} }),
+      bardiocApp({ appName, port }),
       tailwindcss(),
     ],
   };

package/templates/vue/.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/vue/package.json

@@ -18,11 +18,11 @@
     "release:publish": "changeset publish"
   },
   "dependencies": {
-    "@bardioc/app-sdk": "^0.4.9",
+    "@bardioc/app-sdk": "^0.5.0",
     "vue": "^3.5.16"
   },
   "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/vue/src/App.vue

@@ -23,13 +23,13 @@ async function runGetProfile() {
   result.value = { 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.value = { status: 'success', request, data };
   } catch (err) {
     const message = err instanceof Error ? err.message : String(err);
@@ -41,7 +41,7 @@ async function runGetProfile() {
 }
 
 function handleNotify() {
-  notify('Hello from {{DISPLAY_NAME}}', 'info');
+  notify('Hello from {{DISPLAY_NAME}}.', 'info');
   result.value = {
     status: 'success',
     request: 'SDK_NOTIFY',
@@ -55,7 +55,7 @@ function clearResult() {
 </script>
 
 <template>
-  <div class="bg-background text-foreground min-h-screen">
+  <div class="bg-background text-foreground @container/app min-h-screen">
     <template v-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">
@@ -132,7 +132,7 @@ function clearResult() {
       <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/vue/vite.config.ts

@@ -3,9 +3,12 @@ import tailwindcss from '@tailwindcss/vite';
 import vue from '@vitejs/plugin-vue';
 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 }),
       vue(),
-      bardiocApp({ appName, port: {{PORT}} }),
+      bardiocApp({ appName, port }),
       tailwindcss(),
     ],
   };

package/templates/angular/scripts/dev-auth-proxy.mjs

@@ -1,17 +0,0 @@
-#!/usr/bin/env node
-
-import { startDevAuthProxy } from '@bardioc/app-sdk/dev-proxy';
-import { dirname, resolve } from 'node:path';
-import { fileURLToPath } from 'node:url';
-
-const projectDir = resolve(dirname(fileURLToPath(import.meta.url)), '..');
-
-// Angular's dev server cannot host the SDK Vite plugin, so the proxy runs beside it
-// on the app port + 100 — the same origin src/main.ts points installDevBridge at.
-const server = await startDevAuthProxy({ projectDir, port: {{PORT}} + 100 });
-
-// Without DEV_SECRET / API_BASE_URL there is nothing to serve — exit and let the dev server run
-// on its own, matching how the SDK Vite plugin disables itself.
-if (!server) {
-  process.exit(0);
-}

package/templates/nextjs/scripts/dev-auth-proxy.mjs

@@ -1,17 +0,0 @@
-#!/usr/bin/env node
-
-import { startDevAuthProxy } from '@bardioc/app-sdk/dev-proxy';
-import { dirname, resolve } from 'node:path';
-import { fileURLToPath } from 'node:url';
-
-const projectDir = resolve(dirname(fileURLToPath(import.meta.url)), '..');
-
-// `next dev` cannot host the SDK Vite plugin, so the proxy runs beside it on the app
-// port + 100 — the same origin app/page.tsx points installDevBridge at.
-const server = await startDevAuthProxy({ projectDir, port: {{PORT}} + 100 });
-
-// Without DEV_SECRET / API_BASE_URL there is nothing to serve — exit and let the dev server run
-// on its own, matching how the SDK Vite plugin disables itself.
-if (!server) {
-  process.exit(0);
-}