@bardioc/create-bardioc-app 0.5.8 → 0.6.0

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',
@@ -112,11 +111,6 @@ 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>
         )}
 

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

@@ -1,4 +1,4 @@
-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,
@@ -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 }>) {
@@ -99,7 +136,7 @@ export function AppShell() {
     [t, view]
   );
 
-  const menu = useMemo<SdkMenuRoot[]>(
+  const menu = useMemo<MenuRoot[]>(
     () => [
       {
         label: t('app.title', { fallback: 'Weather Dashboard' }),
@@ -122,13 +159,13 @@ export function AppShell() {
   useCommandMenu(commands, menu);
 
   const activeNav = NAV.find(entry => entry.id === view);
-  const pageTitle = activeNav ? t(activeNav.labelKey, { fallback: activeNav.id }) : undefined;
+  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>
   );

package/templates/vue/package.json

@@ -18,7 +18,7 @@
     "release:publish": "changeset publish"
   },
   "dependencies": {
-    "@bardioc/app-sdk": "^0.5.0",
+    "@bardioc/app-sdk": "^1.0.0",
     "vue": "^3.5.16"
   },
   "devDependencies": {

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,23 +10,23 @@ 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');
 
   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');
@@ -44,7 +44,7 @@ function handleNotify() {
   notify('Hello from {{DISPLAY_NAME}}.', 'info');
   result.value = {
     status: 'success',
-    request: 'SDK_NOTIFY',
+    request: 'ui.notify',
     data: { ok: true, message: 'Notification sent to OS' },
   };
 }
@@ -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'"

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

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