@bardioc/create-bardioc-app 0.5.6 → 0.6.0

package/templates/nextjs/scripts/dev.mjs

@@ -0,0 +1,56 @@
+#!/usr/bin/env node
+
+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, 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.
+const proxy = await startProxy(port + PROXY_PORT_OFFSET);
+
+// 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/.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": "^1.0.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

@@ -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,17 +18,17 @@ 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');
+    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');
       setResult({ status: 'success', request, data });
     } catch (err) {
       const message = err instanceof Error ? err.message : String(err);
@@ -40,10 +40,10 @@ function SdkDemo() {
   }
 
   function handleNotify() {
-    notify('Hello from {{DISPLAY_NAME}}', 'info');
+    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' && (
@@ -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/src/main.tsx

@@ -1,4 +1,4 @@
-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';
@@ -15,12 +15,12 @@ const devStandalone = isDevStandalone();
 const useSdkProvider = insideIframe || devStandalone;
 
 if (devStandalone) {
-  installDevBridge({ debug: false });
+  installDevHost({ appId: APP_NAME });
 }
 
 render(
   useSdkProvider ? (
-    <AppSdkProvider appId={APP_NAME}>
+    <AppSdkProvider>
       <App />
     </AppSdkProvider>
   ) : (

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

@@ -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] = createSignal<ResultState>({ status: 'idle' });
   const [running, setRunning] = createSignal(false);
@@ -18,17 +18,17 @@ 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');
+    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');
       setResult({ status: 'success', request, data });
     } catch (err) {
       const message = err instanceof Error ? err.message : String(err);
@@ -40,10 +40,10 @@ function SdkDemo() {
   }
 
   function handleNotify() {
-    notify('Hello from {{DISPLAY_NAME}}', 'info');
+    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 +106,7 @@ function SdkDemo() {
                 <div class="text-muted-foreground border-border border-b pb-2 font-mono text-xs">
                   {r.request}
                 </div>
-                <div class="text-destructive break-all whitespace-pre-wrap">{r.message}</div>
+                <div class="text-destructive whitespace-pre-wrap break-all">{r.message}</div>
               </div>
             );
           }
@@ -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/src/bardioc-sdk.tsx

@@ -1,33 +1,21 @@
-import { createHostBridge, type HostBridge, type NotifyLevel } from '@bardioc/app-sdk';
-import { createContext, onCleanup, onMount, useContext, type JSX } from 'solid-js';
+import type { Bardioc, NotifyLevel } from '@bardioc/app-sdk';
+import { createContext, useContext, type JSX } from 'solid-js';
 
-const BardiocContext = createContext<HostBridge>();
+const BardiocContext = createContext<Bardioc>();
 
-export function AppSdkProvider(props: { appId: string; children: JSX.Element }) {
-  const bridge = createHostBridge({ appId: props.appId });
-
-  onMount(() => {
-    void bridge.connect();
-  });
-
-  onCleanup(() => {
-    bridge.destroy();
-  });
-
-  return <BardiocContext.Provider value={bridge}>{props.children}</BardiocContext.Provider>;
+export function AppSdkProvider(props: { bardioc: Bardioc; children: JSX.Element }) {
+  return <BardiocContext.Provider value={props.bardioc}>{props.children}</BardiocContext.Provider>;
 }
 
-export function useSdk(): HostBridge {
-  const bridge = useContext(BardiocContext);
-  if (!bridge) {
-    throw new Error('useSdk() must be used inside AppSdkProvider');
-  }
-  return bridge;
+export function useSdk(): Bardioc {
+  const bardioc = useContext(BardiocContext);
+  if (!bardioc) throw new Error('useSdk() must be used inside AppSdkProvider');
+  return bardioc;
 }
 
 export function useNotify() {
-  const bridge = useSdk();
+  const { ui } = useSdk();
   return (message: string, level?: NotifyLevel) => {
-    bridge.notify(message, level);
+    ui.notify(message, level).catch(console.error);
   };
 }

package/templates/solid/src/main.tsx

@@ -1,4 +1,5 @@
-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 { render } from 'solid-js/web';
 import { App } from './App';
 import { AppSdkProvider } from './bardioc-sdk';
@@ -15,15 +16,16 @@ const devStandalone = isDevStandalone();
 const useSdkProvider = insideIframe || devStandalone;
 
 if (devStandalone) {
-  installDevBridge({ debug: false });
+  installDevHost({ appId: APP_NAME });
 }
 
 const root = document.getElementById('root')!;
 
 if (useSdkProvider) {
+  const bardioc = await connect();
   render(
     () => (
-      <AppSdkProvider appId={APP_NAME}>
+      <AppSdkProvider bardioc={bardioc}>
         <App />
       </AppSdkProvider>
     ),

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

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import type { HostBridge, NotifyLevel } from '@bardioc/app-sdk';
+  import type { Bardioc, NotifyLevel } from '@bardioc/app-sdk';
   import { isDevStandalone, isInsideIframe } from '@bardioc/app-sdk/dev';
   import { type Snippet } from 'svelte';
   import './index.css';
@@ -10,7 +10,7 @@
     | { status: 'success'; request: string; data: unknown }
     | { status: 'error'; request: string; message: string };
 
-  let { bridge = null, children }: { bridge?: HostBridge | null; children?: Snippet } = $props();
+  let { bardioc = null, children }: { bardioc?: Bardioc | null; children?: Snippet } = $props();
 
   const showSdkDemo = isInsideIframe() || isDevStandalone();
 
@@ -18,24 +18,24 @@
   let running = $state(false);
 
   function notify(message: string, level?: NotifyLevel) {
-    bridge?.notify(message, level);
+    bardioc?.ui.notify(message, level).catch(console.error);
   }
 
   async function runGetProfile() {
-    if (running || !bridge) return;
+    if (running || !bardioc) return;
     running = true;
 
-    const request = 'transport.os.profile.get()';
+    const request = 'os.profile.get()';
     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 data = await bardioc.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,10 +47,10 @@
   }
 
   function handleNotify() {
-    notify('Hello from {{DISPLAY_NAME}}', 'info');
+    notify('Hello from {{DISPLAY_NAME}}.', 'info');
     result = {
       status: 'success',
-      request: 'SDK_NOTIFY',
+      request: 'ui.notify',
       data: { ok: true, message: 'Notification sent to OS' },
     };
   }
@@ -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.

package/templates/svelte/src/main.ts

@@ -1,5 +1,5 @@
-import { createHostBridge } from '@bardioc/app-sdk';
-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 { mount } from 'svelte';
 import App from './App.svelte';
 import './index.css';
@@ -15,12 +15,12 @@ const devStandalone = isDevStandalone();
 const useSdkProvider = insideIframe || devStandalone;
 
 if (devStandalone) {
-  installDevBridge({ debug: false });
+  installDevHost({ appId: APP_NAME });
 }
 
-const bridge = useSdkProvider ? createHostBridge({ appId: APP_NAME }) : null;
+const bardioc = useSdkProvider ? await connect() : null;
 
 mount(App, {
   target: document.getElementById('app')!,
-  props: { bridge },
+  props: { bardioc },
 });

package/templates/svelte/vite.config.ts

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

package/templates/vite/.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/vite/CLAUDE.md

@@ -35,9 +35,9 @@ src/
   auth/
     onboarding.tsx        # Empty full-page screen with the DEV_SECRET dev-auth steps
   shell/
-    app-shell.tsx         # Sidebar + view routing + Toaster + OS top-menu integration (useCommandMenu)
+    app-shell.tsx         # Sidebar + Page + view routing + Toaster + OS top-menu (useCommandMenu)
     about-dialog.tsx      # "About" Dialog — reads public/app-manifest.json at runtime (manifest example)
-    header.tsx            # location combobox + language switcher + sync
+    header.tsx            # Page actions: location combobox + language switcher + sync
   climate/
     types.ts              # Station/ClimateState + METRICS config (icon, unit, color)
     climate-data.ts       # demo-data generator (replace with your real source)
@@ -87,9 +87,10 @@ live SDK data comes only when the app is opened inside the host, or when `DEV_SE
 
 ## UI — `@bardioc/ui`
 
-Tailwind v4 + the Bardioc design system. **Never restyle with raw hex/oklch** — use the theme
-tokens (`bg-background`, `text-foreground`, `text-muted-foreground`, `bg-card`, `border-border`,
-`bg-primary`, and chart tokens `var(--chart-1..5)`). Theme is wired in `src/index.css`:
+Tailwind v4 + the Bardioc design system. **Before writing any UI, read
+`node_modules/@bardioc/ui/docs/INDEX.md`** — component choice, design tokens, layout and spacing
+patterns, and copy rules ship with the installed package, so they match its version. Theme is wired
+in `src/index.css`:
 
 ```css
 @import 'tailwindcss';
@@ -113,6 +114,7 @@ import {
   Empty,
   FilterDropdown,
   Kbd,
+  Page,
   SidebarBasic,
   SidebarContainedProvider,
   SortableColumnHeader,
@@ -126,10 +128,33 @@ import type { ChartConfig } from '@bardioc/ui/shadcn/chart';
 import type { TReactTable } from '@bardioc/ui/types'; // TReactTable.ColumnDef<Row>
 ```
 
-Prefer a Bardioc component over a raw HTML element. Icons come from `lucide-react`. The
-sidebar uses `SidebarBasic` inside a `SidebarContainedProvider` (the contained variant for
+The sidebar uses `SidebarBasic` inside a `SidebarContainedProvider` (the contained variant for
 OS windows); the language switcher is `ConnectedLanguageSwitcher useI18n={useI18n}`.
 
+### Layout — the container contract
+
+The app root opens `@container/app`; `Page` opens its own `@container/page` inside it. Keep both:
+sizing that should follow the whole app reads `@container/app`, and anything inside the page column
+— the page header included — reads `@container/page`, so it responds to the column rather than the
+window.
+
+`Page` is the scrolling column, a **sibling of the sidebar** — it owns the header, the scroller and
+the padding that lines them up. Don't compose a header and a `ScrollArea` by hand, and don't wrap
+the sidebar in it:
+
+```tsx
+<div className="bg-background text-foreground @container/app flex h-full min-h-0">
+  <SidebarBasic … />
+  <Page title={pageTitle} actions={<Header />} actionsClassName="gap-2" sticky className="min-w-0">
+    <ViewContent view={view} />
+  </Page>
+</div>
+```
+
+Collapse your own `actions` against the same container (e.g. `@3xl/page:hidden`) so both sides agree
+on what "wide enough" means. `sticky` keeps the header at the top while the body scrolls under it,
+compacting once it does; drop it if you want the header to scroll away instead.
+
 ---
 
 ## i18n — `@bardioc/i18n-core`
@@ -150,6 +175,8 @@ t('overview.updated', { fallback: 'Updated {time}', params: { time } });
 - Always pass a `fallback` so a missing key degrades gracefully.
 - `@bardioc/ui` component strings ship with the `@bardioc/ui` package itself — the app only
   carries its own `en/de.json`.
+- Copy style (Title Case labels, sentence-case messages, American English):
+  `node_modules/@bardioc/ui/docs/copy.md`.
 
 ---
 

package/templates/vite/package.json

@@ -18,15 +18,15 @@
     "release:publish": "changeset publish"
   },
   "dependencies": {
-    "@bardioc/app-sdk": "^0.4.9",
+    "@bardioc/app-sdk": "^1.0.0",
     "@bardioc/i18n-core": "^0.1.1",
-    "@bardioc/ui": "^0.3.1",
+    "@bardioc/ui": "^0.7.29",
     "lucide-react": "^0.544.0",
     "react": "19.2.6",
     "react-dom": "19.2.6"
   },
   "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/vite/public/app-manifest.json

@@ -8,7 +8,6 @@
   "icon": "icon.svg",
   "author": { "name": "{{DISPLAY_NAME}} Team" },
   "categories": ["productivity"],
-  "permissions": ["notify", "transport", "indexdb", "events"],
   "showInDock": true,
   "showInDockAppsMenu": true,
   "window": {