@bardioc/create-bardioc-app 0.5.5 → 0.5.8

package/templates/vite/src/auth/onboarding.tsx

@@ -25,7 +25,7 @@ export function Onboarding() {
       icon={PlugZap}
       iconVariant="chip"
       titleSize="lg"
-      title={t('auth.title', { fallback: 'Connect to Bardioc OS' })}
+      title={t('auth.title', { fallback: 'Connect to Bardioc' })}
       description={t('auth.description', {
         fallback: 'This dashboard reads live data through the Bardioc SDK transport.',
       })}
@@ -42,7 +42,7 @@ export function Onboarding() {
         <ol className="text-muted-foreground list-decimal space-y-2 pl-4">
           <li>
             {t('auth.step1', {
-              fallback: 'Set DEV_SECRET=<your-secret> and API_BASE_URL=<your-host> in .env',
+              fallback: 'Set DEV_SECRET=<your-secret> and API_BASE_URL=<your-host> in .env.',
             })}
           </li>
           <li>
@@ -52,10 +52,10 @@ export function Onboarding() {
         </ol>
         <div className="border-border mt-3 space-y-1 border-t pt-3">
           <p className="text-foreground font-medium">
-            {t('auth.detectedTitle', { fallback: 'Detected environment' })}
+            {t('auth.detectedTitle', { fallback: 'Detected Environment' })}
           </p>
           <DetectedRow
-            label={t('auth.insideHost', { fallback: 'Inside host iframe' })}
+            label={t('auth.insideHost', { fallback: 'Inside Host Iframe' })}
             ok={insideHost}
           />
         </div>

package/templates/vite/src/climate/climate-data.ts

@@ -1,17 +1,20 @@
 import type { ClimateReading, ClimateState, Condition, ForecastDay, Station } from './types';
 
-const STATIONS: Array<Pick<Station, 'id' | 'name' | 'region'>> = [
+type StationBase = Pick<Station, 'id' | 'name' | 'region'>;
+
+// Non-empty tuples, so indexing them stays type-safe under noUncheckedIndexedAccess.
+const STATIONS: [StationBase, ...StationBase[]] = [
   { id: 'lagoon', name: 'Lagoon Station', region: 'Equatorial Belt' },
   { id: 'verdant', name: 'Verdant Ridge', region: 'Highlands' },
   { id: 'aurora', name: 'Aurora Flats', region: 'Polar Rim' },
   { id: 'cinder', name: 'Cinder Basin', region: 'Volcanic Plains' },
   { id: 'mistral', name: 'Mistral Cove', region: 'Coastal Shelf' },
 ];
-const CONDITIONS: Condition[] = ['sunny', 'cloudy', 'rainy'];
-const DAYS = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
+const CONDITIONS: [Condition, ...Condition[]] = ['sunny', 'cloudy', 'rainy'];
+const DAYS = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] as const;
 
-function pick<T>(items: readonly T[]): T {
-  return items[Math.floor(Math.random() * items.length)];
+function pick<T>(items: readonly [T, ...T[]]): T {
+  return items[Math.floor(Math.random() * items.length)] ?? items[0];
 }
 
 function round(value: number, decimals: number): number {
@@ -63,7 +66,11 @@ export function generateState(
   activeStationId?: string,
   source: ClimateState['source'] = 'mock'
 ): ClimateState {
-  const stations = STATIONS.map(buildStation);
+  const [firstBase, ...restBases] = STATIONS;
+  const stations: [Station, ...Station[]] = [
+    buildStation(firstBase),
+    ...restBases.map(buildStation),
+  ];
   const active = stations.find(station => station.id === activeStationId) ?? stations[0];
   return {
     stations,

package/templates/vite/src/climate/conditions-chart.tsx

@@ -28,8 +28,8 @@ export function ConditionsChart({ forecast }: Readonly<ConditionsChartProps>) {
       seriesData={seriesData}
       xKey="day"
       chartConfig={chartConfig}
-      title={t('chart.title', { fallback: '7-day outlook' })}
-      description={t('chart.description', { fallback: 'Daylight hours by condition' })}
+      title={t('chart.title', { fallback: '7-Day Outlook' })}
+      description={t('chart.description', { fallback: 'Daylight hours by condition.' })}
       heightClass="h-[220px]"
     />
   );

package/templates/vite/src/climate/overview-view.tsx

@@ -42,7 +42,7 @@ export function OverviewView() {
         ) : (
           <span>
             {t('overview.notPersisted', {
-              fallback: 'Preview — not persisted (open inside Bardioc OS to persist)',
+              fallback: 'Preview — not persisted (open inside Bardioc to persist)',
             })}
           </span>
         )}

package/templates/vite/src/climate/stations-view.tsx

@@ -122,7 +122,7 @@ export function StationsView() {
     <div className="flex flex-col gap-3">
       <div>
         <h2 className="text-lg font-semibold">
-          {t('stations.title', { fallback: 'Monitoring stations' })}
+          {t('stations.title', { fallback: 'Monitoring Stations' })}
         </h2>
         <p className="text-muted-foreground text-xs">
           {t('stations.description', { fallback: '' })}
@@ -134,13 +134,13 @@ export function StationsView() {
         columns={columns}
         filterKey={['name', 'region']}
         showSearchBar
-        filterPlaceholder={t('stations.search', { fallback: 'Search stations…' })}
+        filterPlaceholder={t('stations.search', { fallback: 'Search Stations…' })}
         itemLabel={t('stations.itemLabel', { fallback: 'stations' })}
         onRowClick={station => setActiveStation(station.id)}
         filterSlot={<ConditionFilter selected={conditions} onToggle={onToggle} />}
         emptyState={
           <p className="text-muted-foreground p-6 text-center text-sm">
-            {t('stations.empty', { fallback: 'No stations match your filters' })}
+            {t('stations.empty', { fallback: 'No stations match your filters.' })}
           </p>
         }
       />

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

@@ -89,7 +89,7 @@ export function useClimate() {
 
       notify(
         t('notify.synced', {
-          fallback: 'Synced {count} stations',
+          fallback: 'Synced {count} stations.',
           params: { count: next.stations.length },
         }),
         source === 'graph' ? 'success' : 'warning'
@@ -108,7 +108,7 @@ export function useClimate() {
       const station = next.stations.find(item => item.id === id);
       notify(
         t('notify.stationSelected', {
-          fallback: 'Active station: {name}',
+          fallback: 'Active station: {name}.',
           params: { name: station?.name ?? id },
         }),
         'info'

package/templates/vite/src/events/live-events-view.tsx

@@ -37,14 +37,14 @@ export function LiveEventsView() {
           <Empty
             icon={Activity}
             iconVariant="chip"
-            title={t('events.emptyTitle', { fallback: 'Waiting for events' })}
+            title={t('events.emptyTitle', { fallback: 'Waiting for Events' })}
             description={
               isInsideIframe()
                 ? t('events.emptyHost', {
                     fallback: 'No graph events yet — activity will appear here as it happens.',
                   })
                 : t('events.emptyStandalone', {
-                    fallback: 'Open inside Bardioc OS (or a dev session) to receive live events.',
+                    fallback: 'Open inside Bardioc (or a dev session) to receive live events.',
                   })
             }
           />

package/templates/vite/src/graph/explorer-view.tsx

@@ -28,12 +28,12 @@ export function ExplorerView() {
       const data = await request.run(bridge);
       const ms = Date.now() - started;
       setResult({ status: 'done', live: true, ms, data });
-      notify(t('notify.queryOk', { fallback: 'Request ok ({ms} ms)', params: { ms } }), 'success');
+      notify(t('notify.queryOk', { fallback: 'Request ok ({ms} ms).', params: { ms } }), 'success');
     } catch {
       const ms = Date.now() - started;
       setResult({ status: 'done', live: false, ms, data: request.mock() });
       notify(
-        t('notify.queryFailed', { fallback: 'Request failed — showing simulated data' }),
+        t('notify.queryFailed', { fallback: 'Request failed — showing simulated data.' }),
         'warning'
       );
     }
@@ -85,7 +85,7 @@ export function ExplorerView() {
               >
                 {result.status === 'running'
                   ? t('explorer.running', { fallback: 'Running…' })
-                  : t('explorer.run', { fallback: 'Run request' })}
+                  : t('explorer.run', { fallback: 'Run Request' })}
               </Button>
             </div>
 
@@ -107,7 +107,7 @@ export function ExplorerView() {
               {result.status === 'done'
                 ? JSON.stringify(result.data, null, 2)
                 : t('explorer.empty', {
-                    fallback: 'Select a request and run it to see the response',
+                    fallback: 'Select a request and run it to see the response.',
                   })}
             </pre>
           </div>

package/templates/vite/src/graph/requests.ts

@@ -42,7 +42,8 @@ async function sampleNodes(bridge: HostBridge, limit: number): Promise<GraphNode
 // query by a type that actually exists, a node lookup, and a Gremlin neighbor traversal — the
 // lookup/traversal presets discover a real node from the wildcard query first, so nothing is
 // hard-coded to a specific instance.
-export const SDK_REQUESTS: SdkRequest[] = [
+// Non-empty tuple, so the Explorer can index the first preset as its default.
+export const SDK_REQUESTS: [SdkRequest, ...SdkRequest[]] = [
   {
     id: 'graph.query.all',
     category: 'graph',

package/templates/vite/src/locales/de.json

@@ -39,8 +39,8 @@
     "neverSaved": "Noch nicht gespeichert"
   },
   "auth": {
-    "title": "Mit Bardioc OS verbinden",
-    "description": "Dieses Dashboard liest Live-Daten über den Bardioc-SDK-Transport. Es läuft in Bardioc OS oder eigenständig mit einer CLI-Dev-Session.",
+    "title": "Mit Bardioc verbinden",
+    "description": "Dieses Dashboard liest Live-Daten über den Bardioc-SDK-Transport. Es läuft in Bardioc oder eigenständig mit einer CLI-Dev-Session.",
     "stepsTitle": "Eigenständig mit Dev-Session ausführen:",
     "step1": "Setze DEV_SECRET=<dein-secret> und API_BASE_URL=<dein-host> in .env",
     "step2": "Dev-Server starten:",
@@ -56,7 +56,7 @@
     "noOperator": "Betreiber nicht verfügbar",
     "updated": "Aktualisiert {time}",
     "persistence": "In IndexedDB gespeichert",
-    "notPersisted": "Vorschau — nicht gespeichert (in Bardioc OS öffnen zum Speichern)",
+    "notPersisted": "Vorschau — nicht gespeichert (in Bardioc öffnen zum Speichern)",
     "historyOne": "{count} Snapshot im Verlauf",
     "historyOther": "{count} Snapshots im Verlauf",
     "source": "Quelle"
@@ -127,7 +127,7 @@
     "description": "Live-Graph-Ereignisse, vom OS über SSE gestreamt (Berechtigung \"events\").",
     "emptyTitle": "Warte auf Ereignisse",
     "emptyHost": "Noch keine Graph-Ereignisse — Aktivität erscheint hier, sobald sie auftritt.",
-    "emptyStandalone": "In Bardioc OS (oder einer Dev-Session) öffnen, um Live-Ereignisse zu empfangen."
+    "emptyStandalone": "In Bardioc (oder einer Dev-Session) öffnen, um Live-Ereignisse zu empfangen."
   },
   "notify": {
     "synced": "{count} Stationen synchronisiert",

package/templates/vite/src/locales/en.json

@@ -1,5 +1,5 @@
 {
-  "app": { "title": "Weather Dashboard", "tagline": "Live planetary readings" },
+  "app": { "title": "Weather Dashboard", "tagline": "Live Planetary Readings" },
   "nav": {
     "overview": "Overview",
     "stations": "Stations",
@@ -9,77 +9,77 @@
   },
   "menu": {
     "view": "View",
-    "about": "About this app"
+    "about": "About This App"
   },
   "about": {
-    "title": "About this app",
+    "title": "About This App",
     "version": "Version",
     "id": "App ID",
     "description": "Description",
     "permissions": "Permissions",
-    "error": "Could not read app-manifest.json",
-    "source": "Read live from public/app-manifest.json"
+    "error": "Could not read app-manifest.json.",
+    "source": "Read live from public/app-manifest.json."
   },
   "genericTable": {
-    "filterPlaceholder": "Filter results...",
+    "filterPlaceholder": "Filter Results...",
     "itemLabel": "rows",
     "showing": "{from} to {to} of {total}",
     "columns": "Columns",
     "noResults": "No results found.",
-    "goToPreviousPage": "Go to previous page",
-    "goToNextPage": "Go to next page"
+    "goToPreviousPage": "Go to Previous Page",
+    "goToNextPage": "Go to Next Page"
   },
   "common": { "button": { "previous": "Previous", "next": "Next" } },
   "header": {
-    "search": "Search stations…",
+    "search": "Search Stations…",
     "sync": "Sync",
     "syncing": "Syncing…",
     "location": "Station",
     "savedAt": "Saved {time}",
-    "neverSaved": "Not yet saved"
+    "neverSaved": "Not Yet Saved"
   },
   "auth": {
-    "title": "Connect to Bardioc OS",
-    "description": "This dashboard reads live data through the Bardioc SDK transport. It runs when opened inside Bardioc OS, or standalone with a CLI dev session.",
+    "title": "Connect to Bardioc",
+    "description": "This dashboard reads live data through the Bardioc SDK transport. It runs when opened inside Bardioc, or standalone with a CLI dev session.",
     "stepsTitle": "Run standalone with a dev session:",
-    "step1": "Set DEV_SECRET=<your-secret> and API_BASE_URL=<your-host> in .env",
+    "step1": "Set DEV_SECRET=<your-secret> and API_BASE_URL=<your-host> in .env.",
     "step2": "Start the dev server:",
-    "detectedTitle": "Detected environment",
-    "insideHost": "Inside host iframe",
-    "devAuth": "Dev auth enabled",
+    "detectedTitle": "Detected Environment",
+    "insideHost": "Inside Host Iframe",
+    "devAuth": "Dev Auth Enabled",
     "yes": "yes",
     "no": "no",
     "retry": "Reload"
   },
   "overview": {
     "operator": "Operator",
-    "noOperator": "Operator unavailable",
+    "noOperator": "Operator Unavailable",
     "updated": "Updated {time}",
     "persistence": "Persisted to IndexedDB",
-    "notPersisted": "Preview — not persisted (open inside Bardioc OS to persist)",
+    "notPersisted": "Preview — not persisted (open inside Bardioc to persist)",
     "historyOne": "{count} snapshot in history",
     "historyOther": "{count} snapshots in history",
     "source": "Source"
   },
   "conditions": { "sunny": "Sunny", "cloudy": "Cloudy", "rainy": "Rainy" },
-  "source": { "graph": "Bardioc graph", "mock": "Simulated" },
+  "source": { "graph": "Bardioc Graph", "mock": "Simulated" },
   "metrics": {
     "oxygen": "Oxygen",
-    "temperature": "Surface temp",
+    "temperature": "Surface Temp",
     "humidity": "Humidity",
-    "windSpeed": "Wind speed",
+    "windSpeed": "Wind Speed",
     "vegetation": "Vegetation",
-    "oxygenHint": "Atmospheric mix",
-    "temperatureHint": "Ground level",
+    "oxygenHint": "Atmospheric Mix",
+    "temperatureHint": "Ground Level",
     "humidityHint": "Relative",
     "windSpeedHint": "Sustained",
-    "vegetationHint": "Surface cover"
+    "vegetationHint": "Surface Cover"
   },
-  "chart": { "title": "7-day outlook", "description": "Daylight hours by condition" },
+  "chart": { "title": "7-Day Outlook", "description": "Daylight hours by condition." },
   "stations": {
-    "title": "Monitoring stations",
+    "title": "Monitoring Stations",
     "description": "All stations reporting to this instance. Search, filter, or select one.",
-    "search": "Search stations…",
+    "search": "Search Stations…",
     "filter": "Condition",
     "colName": "Station",
     "colRegion": "Region",
@@ -88,16 +88,16 @@
     "colHumidity": "Humidity",
     "colVegetation": "Vegetation",
     "itemLabel": "stations",
-    "empty": "No stations match your filters",
+    "empty": "No stations match your filters.",
     "apply": "Apply",
     "clear": "Clear"
   },
   "explorer": {
     "title": "Graph Explorer",
     "description": "Run real Bardioc SDK transport requests. Without a session, each request falls back to simulated data so you can still explore the shape.",
-    "run": "Run request",
+    "run": "Run Request",
     "running": "Running…",
-    "empty": "Select a request and run it to see the response",
+    "empty": "Select a request and run it to see the response.",
     "live": "Live",
     "mock": "Simulated",
     "categoryGraph": "Graph",
@@ -106,35 +106,35 @@
     "durationMs": "{ms} ms"
   },
   "profile": {
-    "title": "Operator profile",
+    "title": "Operator Profile",
     "description": "Pulled live from the OS transport (os.profile).",
     "name": "Name",
-    "displayName": "Display name",
-    "firstName": "First name",
-    "lastName": "Last name",
+    "displayName": "Display Name",
+    "firstName": "First Name",
+    "lastName": "Last Name",
     "email": "Email",
     "id": "ID",
     "organization": "Organization",
     "units": "Units",
     "members": "Members",
-    "raw": "Raw response",
-    "errorTitle": "Could not load profile",
+    "raw": "Raw Response",
+    "errorTitle": "Could Not Load Profile",
     "errorHint": "The transport returned an error. Authorize a session, then reload.",
     "unknown": "Unknown"
   },
   "events": {
     "title": "Live Events",
     "description": "Live graph events streamed from the OS over SSE (permission \"events\").",
-    "emptyTitle": "Waiting for events",
+    "emptyTitle": "Waiting for Events",
     "emptyHost": "No graph events yet — activity will appear here as it happens.",
-    "emptyStandalone": "Open inside Bardioc OS (or a dev session) to receive live events."
+    "emptyStandalone": "Open inside Bardioc (or a dev session) to receive live events."
   },
   "notify": {
-    "synced": "Synced {count} stations",
-    "saved": "Saved to IndexedDB",
-    "stationSelected": "Active station: {name}",
-    "localeChanged": "Language switched to {locale}",
-    "queryOk": "Request ok ({ms} ms)",
-    "queryFailed": "Request failed — showing simulated data"
+    "synced": "Synced {count} stations.",
+    "saved": "Saved to IndexedDB.",
+    "stationSelected": "Active station: {name}.",
+    "localeChanged": "Language switched to {locale}.",
+    "queryOk": "Request ok ({ms} ms).",
+    "queryFailed": "Request failed — showing simulated data."
   }
 }

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: '' })}
       />
     );
@@ -44,7 +44,7 @@ export function ProfileView() {
     <div className="flex flex-col gap-4">
       <div>
         <h2 className="text-lg font-semibold">
-          {t('profile.title', { fallback: 'Operator profile' })}
+          {t('profile.title', { fallback: 'Operator Profile' })}
         </h2>
         <p className="text-muted-foreground text-xs">
           {t('profile.description', { fallback: '' })}
@@ -56,15 +56,15 @@ export function ProfileView() {
           <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/shell/about-dialog.tsx

@@ -81,7 +81,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 +93,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">
@@ -121,7 +121,7 @@ export function AboutDialog({ open, onOpenChange }: Readonly<AboutDialogProps>)
         )}
 
         <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

@@ -2,11 +2,11 @@ import type { SdkMenuRoot } 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,
@@ -68,7 +68,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 +86,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 => ({
@@ -121,6 +121,9 @@ 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 header = (
     <div className="flex items-center gap-2 px-2 py-1">
       <BardiocLogoIcon className="size-5" />
@@ -132,7 +135,7 @@ export function AppShell() {
 
   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 +147,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/tsconfig.json

@@ -1,17 +1,11 @@
 {
+  "extends": "@bardioc/configs/typescript/react-library.json",
   "compilerOptions": {
-    "target": "ES2022",
+    "declaration": false,
+    "declarationMap": false,
     "module": "ESNext",
     "moduleResolution": "Bundler",
-    "lib": ["ES2022", "DOM", "DOM.Iterable"],
-    "jsx": "react-jsx",
-    "strict": true,
-    "noEmit": true,
-    "esModuleInterop": true,
-    "skipLibCheck": true,
-    "forceConsistentCasingInFileNames": true,
-    "resolveJsonModule": true,
-    "isolatedModules": true
+    "noEmit": true
   },
   "include": ["src"],
   "exclude": ["node_modules", "dist"]