@bardioc/create-bardioc-app 0.5.6 → 0.6.0

package/templates/vite/src/profile/profile-view.tsx

@@ -31,7 +31,7 @@ export function ProfileView() {
       <Empty
         icon={UserX}
         iconVariant="chip"
-        title={t('profile.errorTitle', { fallback: 'Could not load profile' })}
+        title={t('profile.errorTitle', { fallback: 'Could Not Load Profile' })}
         description={profile.error ?? t('profile.errorHint', { fallback: '' })}
       />
     );
@@ -42,29 +42,22 @@ export function ProfileView() {
 
   return (
     <div className="flex flex-col gap-4">
-      <div>
-        <h2 className="text-lg font-semibold">
-          {t('profile.title', { fallback: 'Operator profile' })}
-        </h2>
-        <p className="text-muted-foreground text-xs">
-          {t('profile.description', { fallback: '' })}
-        </p>
-      </div>
+      <p className="text-muted-foreground text-xs">{t('profile.description', { fallback: '' })}</p>
 
       <Card>
         <div className="flex items-center gap-4">
           <Avatar firstName={name} size="lg" />
           <div className="flex min-w-0 flex-1 flex-col gap-1">
             <Row
-              label={t('profile.displayName', { fallback: 'Display name' })}
+              label={t('profile.displayName', { fallback: 'Display Name' })}
               value={asString(data.display_name, unknown)}
             />
             <Row
-              label={t('profile.firstName', { fallback: 'First name' })}
+              label={t('profile.firstName', { fallback: 'First Name' })}
               value={asString(data.first_name, unknown)}
             />
             <Row
-              label={t('profile.lastName', { fallback: 'Last name' })}
+              label={t('profile.lastName', { fallback: 'Last Name' })}
               value={asString(data.last_name, unknown)}
             />
           </div>

package/templates/vite/src/profile/use-profile.ts

@@ -25,7 +25,7 @@ export function operatorLabel(profile: Record_ | null): string | null {
 }
 
 export function useProfile(): ProfileState {
-  const bridge = useSdk();
+  const bardioc = useSdk();
   const [state, setState] = useState<ProfileState>({
     loading: true,
     profile: null,
@@ -36,7 +36,7 @@ export function useProfile(): ProfileState {
     let active = true;
     void (async () => {
       try {
-        const profile = (await bridge.transport.os.profile.get()) as Record_;
+        const profile = (await bardioc.os.profile.get()) as Record_;
         if (active) setState({ loading: false, profile, error: null });
       } catch (error) {
         const message = error instanceof Error ? error.message : String(error);
@@ -46,7 +46,7 @@ export function useProfile(): ProfileState {
     return () => {
       active = false;
     };
-  }, [bridge]);
+  }, [bardioc]);
 
   return state;
 }

package/templates/vite/src/shell/about-dialog.tsx

@@ -1,5 +1,5 @@
 import { BardiocLogoIcon, Dialog } from '@bardioc/ui/components';
-import { HashIcon, PackageIcon, ShieldCheckIcon, TagIcon } from 'lucide-react';
+import { HashIcon, PackageIcon, TagIcon } from 'lucide-react';
 import { useEffect, useState, type ReactNode } from 'react';
 import { useTranslation } from '../i18n';
 
@@ -8,7 +8,6 @@ interface AppManifest {
   name: string;
   description: string;
   version: string;
-  permissions?: string[];
 }
 
 interface AboutDialogProps {
@@ -18,7 +17,7 @@ interface AboutDialogProps {
 
 // Reads the app's own manifest (public/app-manifest.json) at runtime. The manifest is served at
 // the Vite base path, so the same code works in dev and inside the host — this is the example of
-// reading metadata (name, version, permissions) from the manifest instead of hard-coding it.
+// reading metadata (name, version, description) from the manifest instead of hard-coding it.
 async function loadManifest(): Promise<AppManifest> {
   const response = await fetch(`${import.meta.env.BASE_URL}app-manifest.json`, {
     cache: 'no-store',
@@ -81,7 +80,7 @@ export function AboutDialog({ open, onOpenChange }: Readonly<AboutDialogProps>)
       modal
       showCloseOnHeader
       width={440}
-      title={t('about.title', { fallback: 'About this app' })}
+      title={t('about.title', { fallback: 'About This App' })}
     >
       <div className="flex flex-col items-center gap-4 px-2 pb-2">
         <div className="flex flex-col items-center gap-2 py-2">
@@ -93,7 +92,7 @@ export function AboutDialog({ open, onOpenChange }: Readonly<AboutDialogProps>)
 
         {failed ? (
           <p className="text-destructive text-sm">
-            {t('about.error', { fallback: 'Could not read app-manifest.json' })}
+            {t('about.error', { fallback: 'Could not read app-manifest.json.' })}
           </p>
         ) : (
           <div className="w-full">
@@ -112,16 +111,11 @@ export function AboutDialog({ open, onOpenChange }: Readonly<AboutDialogProps>)
               label={t('about.description', { fallback: 'Description' })}
               value={manifest?.description ?? dash}
             />
-            <AboutRow
-              icon={<ShieldCheckIcon className="size-4" />}
-              label={t('about.permissions', { fallback: 'Permissions' })}
-              value={manifest?.permissions?.join(', ') ?? dash}
-            />
           </div>
         )}
 
         <p className="text-muted-foreground text-center text-xs">
-          {t('about.source', { fallback: 'Read live from public/app-manifest.json' })}
+          {t('about.source', { fallback: 'Read live from public/app-manifest.json.' })}
         </p>
       </div>
     </Dialog>

package/templates/vite/src/shell/app-shell.tsx

@@ -1,12 +1,12 @@
-import type { SdkMenuRoot } from '@bardioc/app-sdk';
+import type { MenuRoot } from '@bardioc/app-sdk';
 import { useCommandMenu, type AppCommand } from '@bardioc/app-sdk/react';
 import {
   BardiocLogoIcon,
+  Page,
   SidebarBasic,
   SidebarContainedProvider,
   Toaster,
 } from '@bardioc/ui/components';
-import { ScrollArea } from '@bardioc/ui/shadcn';
 import {
   Activity,
   LayoutDashboard,
@@ -28,13 +28,50 @@ import { AboutDialog } from './about-dialog';
 import { Header } from './header';
 
 // `icon` is the sidebar's React component; `iconName` is the matching lucide export name the
-// OS resolves for the top-menu entry (host calls resolveLucideIcon on the string).
-const NAV: Array<{ id: ViewId; icon: LucideIcon; iconName: string; labelKey: string }> = [
-  { id: 'overview', icon: LayoutDashboard, iconName: 'LayoutDashboard', labelKey: 'nav.overview' },
-  { id: 'stations', icon: Table2, iconName: 'Table2', labelKey: 'nav.stations' },
-  { id: 'explorer', icon: Network, iconName: 'Network', labelKey: 'nav.explorer' },
-  { id: 'events', icon: Activity, iconName: 'Activity', labelKey: 'nav.events' },
-  { id: 'profile', icon: UserRound, iconName: 'UserRound', labelKey: 'nav.profile' },
+// OS resolves for the top-menu entry (host calls resolveLucideIcon on the string). `titleKey` is
+// the view's Page title, which can say more than its short navigation label.
+const NAV: Array<{
+  id: ViewId;
+  icon: LucideIcon;
+  iconName: string;
+  labelKey: string;
+  titleKey: string;
+}> = [
+  {
+    id: 'overview',
+    icon: LayoutDashboard,
+    iconName: 'LayoutDashboard',
+    labelKey: 'nav.overview',
+    titleKey: 'nav.overview',
+  },
+  {
+    id: 'stations',
+    icon: Table2,
+    iconName: 'Table2',
+    labelKey: 'nav.stations',
+    titleKey: 'stations.title',
+  },
+  {
+    id: 'explorer',
+    icon: Network,
+    iconName: 'Network',
+    labelKey: 'nav.explorer',
+    titleKey: 'explorer.title',
+  },
+  {
+    id: 'events',
+    icon: Activity,
+    iconName: 'Activity',
+    labelKey: 'nav.events',
+    titleKey: 'events.title',
+  },
+  {
+    id: 'profile',
+    icon: UserRound,
+    iconName: 'UserRound',
+    labelKey: 'nav.profile',
+    titleKey: 'profile.title',
+  },
 ];
 
 function ViewContent({ view }: Readonly<{ view: ViewId }>) {
@@ -68,7 +105,7 @@ export function AppShell() {
       return;
     }
     notify(
-      t('notify.localeChanged', { fallback: 'Language switched to {locale}', params: { locale } }),
+      t('notify.localeChanged', { fallback: 'Language switched to {locale}.', params: { locale } }),
       'info'
     );
   }, [locale, notify, t]);
@@ -86,7 +123,7 @@ export function AppShell() {
     () => [
       {
         id: 'app.about',
-        title: t('menu.about', { fallback: 'About this app' }),
+        title: t('menu.about', { fallback: 'About This App' }),
         handler: () => setAboutOpen(true),
       },
       ...NAV.map(entry => ({
@@ -99,7 +136,7 @@ export function AppShell() {
     [t, view]
   );
 
-  const menu = useMemo<SdkMenuRoot[]>(
+  const menu = useMemo<MenuRoot[]>(
     () => [
       {
         label: t('app.title', { fallback: 'Weather Dashboard' }),
@@ -121,18 +158,21 @@ export function AppShell() {
 
   useCommandMenu(commands, menu);
 
+  const activeNav = NAV.find(entry => entry.id === view);
+  const pageTitle = activeNav ? t(activeNav.titleKey, { fallback: activeNav.id }) : undefined;
+
   const header = (
     <div className="flex items-center gap-2 px-2 py-1">
       <BardiocLogoIcon className="size-5" />
       <span className="truncate text-sm font-semibold">
-        {t('app.title', { fallback: 'Climate Dashboard' })}
+        {t('app.title', { fallback: 'Weather Dashboard' })}
       </span>
     </div>
   );
 
   return (
     <SidebarContainedProvider defaultCollapsed={false}>
-      <div className="bg-background text-foreground flex h-full min-h-0">
+      <div className="bg-background text-foreground @container/app flex h-full min-h-0">
         <SidebarBasic
           header={header}
           rail={false}
@@ -144,14 +184,15 @@ export function AppShell() {
           }}
           className="border-r"
         />
-        <main className="flex min-w-0 flex-1 flex-col">
-          <Header />
-          <ScrollArea className="min-h-0 flex-1">
-            <div className="p-4">
-              <ViewContent view={view} />
-            </div>
-          </ScrollArea>
-        </main>
+        <Page
+          title={pageTitle}
+          actions={<Header />}
+          actionsClassName="gap-2"
+          sticky
+          className="min-w-0"
+        >
+          <ViewContent view={view} />
+        </Page>
       </div>
       <AboutDialog open={aboutOpen} onOpenChange={setAboutOpen} />
       <Toaster position="bottom-right" />

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": "^1.0.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

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { isDevStandalone, isInsideIframe } from '@bardioc/app-sdk/dev';
 import { ref } from 'vue';
-import { useBardiocBridge, useNotify } from './bardioc-sdk';
+import { useBardioc, useNotify } from './bardioc-sdk';
 
 type ResultState =
   | { status: 'idle' }
@@ -10,26 +10,26 @@ type ResultState =
   | { status: 'error'; request: string; message: string };
 
 const showSdkDemo = isInsideIframe() || isDevStandalone();
-const bridge = useBardiocBridge();
+const bardioc = useBardioc();
 const notify = useNotify();
 const result = ref<ResultState>({ status: 'idle' });
 const running = ref(false);
 
 async function runGetProfile() {
-  if (running.value) return;
+  if (running.value || !bardioc) return;
   running.value = true;
 
-  const request = 'transport.os.profile.get()';
+  const request = 'os.profile.get()';
   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 data = await bardioc.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,10 +41,10 @@ async function runGetProfile() {
 }
 
 function handleNotify() {
-  notify('Hello from {{DISPLAY_NAME}}', 'info');
+  notify('Hello from {{DISPLAY_NAME}}.', 'info');
   result.value = {
     status: 'success',
-    request: 'SDK_NOTIFY',
+    request: 'ui.notify',
     data: { ok: true, message: 'Notification sent to OS' },
   };
 }
@@ -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">
@@ -110,7 +110,7 @@ function clearResult() {
             <div class="text-muted-foreground border-border border-b pb-2 font-mono text-xs">
               {{ result.request }}
             </div>
-            <div class="text-destructive break-all whitespace-pre-wrap">{{ result.message }}</div>
+            <div class="text-destructive whitespace-pre-wrap break-all">{{ result.message }}</div>
           </div>
           <div
             v-else-if="result.status === 'success'"
@@ -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/src/bardioc-sdk.ts

@@ -1,23 +1,14 @@
-import { createHostBridge, type HostBridge, type NotifyLevel } from '@bardioc/app-sdk';
+import type { Bardioc, NotifyLevel } from '@bardioc/app-sdk';
 import { inject, type InjectionKey } from 'vue';
 
-export const BARDIOC_BRIDGE_KEY: InjectionKey<HostBridge> = Symbol('bardiocBridge');
+export const BARDIOC_KEY: InjectionKey<Bardioc> = Symbol('bardioc');
 
-export function createAppSdkBridge(appId: string): HostBridge {
-  return createHostBridge({ appId });
-}
-
-export function useBardiocBridge(): HostBridge {
-  const bridge = inject(BARDIOC_BRIDGE_KEY);
-  if (!bridge) {
-    throw new Error('useBardiocBridge() must be used after providing BARDIOC_BRIDGE_KEY');
-  }
-  return bridge;
-}
+/** The host connection, or null while the app runs outside Bardioc. */
+export const useBardioc = (): Bardioc | null => inject(BARDIOC_KEY, null);
 
 export function useNotify() {
-  const bridge = useBardiocBridge();
+  const bardioc = useBardioc();
   return (message: string, level?: NotifyLevel) => {
-    bridge.notify(message, level);
+    bardioc?.ui.notify(message, level).catch(console.error);
   };
 }

package/templates/vue/src/main.ts

@@ -1,7 +1,8 @@
-import { installDevBridge, isDevStandalone, isInsideIframe } from '@bardioc/app-sdk/dev';
+import { connect } from '@bardioc/app-sdk';
+import { installDevHost, isDevStandalone, isInsideIframe } from '@bardioc/app-sdk/dev';
 import { createApp } from 'vue';
 import App from './App.vue';
-import { BARDIOC_BRIDGE_KEY, createAppSdkBridge } from './bardioc-sdk';
+import { BARDIOC_KEY } from './bardioc-sdk';
 import './index.css';
 
 const APP_NAME = import.meta.env.VITE_APP_NAME?.trim();
@@ -15,13 +16,13 @@ const devStandalone = isDevStandalone();
 const useSdkProvider = insideIframe || devStandalone;
 
 if (devStandalone) {
-  installDevBridge({ debug: false });
+  installDevHost({ appId: APP_NAME });
 }
 
 const app = createApp(App);
 
 if (useSdkProvider) {
-  app.provide(BARDIOC_BRIDGE_KEY, createAppSdkBridge(APP_NAME));
+  app.provide(BARDIOC_KEY, await connect());
 }
 
 app.mount('#app');

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/angular/src/app/bardioc-bridge.ts

@@ -1,5 +0,0 @@
-import { createHostBridge, type HostBridge } from '@bardioc/app-sdk';
-
-export function createBardiocBridge(): HostBridge {
-  return createHostBridge({});
-}

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);
-}