@bardioc/create-bardioc-app 0.7.0 → 0.7.1

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

@@ -1,11 +1,16 @@
 import { isInsideIframe } from '@bardioc/app-sdk/dev';
 import { useSdk } from '@bardioc/app-sdk/react';
-import { Badge, Button, Card } from '@bardioc/ui/components';
+import { Badge, Button, Card, Tabs } from '@bardioc/ui/components';
+import { useElementWidth } from '@bardioc/ui/hooks';
+import { cn } from '@bardioc/ui/lib';
 import { useState } from 'react';
 import { useTranslation } from '../i18n';
 import { useAppNotify } from '../use-app-notify';
 import { SDK_REQUESTS, type SdkRequest } from './requests';
 
+// Matches the `@3xl` container step: below it the request list moves above the panel.
+const VERTICAL_TABS_MIN_WIDTH = 768;
+
 type Result =
   | { status: 'idle' }
   | { status: 'running' }
@@ -17,6 +22,8 @@ export function ExplorerView() {
   const notify = useAppNotify();
   const [activeId, setActiveId] = useState(SDK_REQUESTS[0].id);
   const [result, setResult] = useState<Result>({ status: 'idle' });
+  // Orientation drives Radix's arrow keys and aria-orientation, so it is measured, not CSS-only.
+  const [explorerRef, narrow] = useElementWidth<HTMLDivElement>(VERTICAL_TABS_MIN_WIDTH);
 
   const active = SDK_REQUESTS.find(request => request.id === activeId) ?? SDK_REQUESTS[0];
 
@@ -39,73 +46,84 @@ export function ExplorerView() {
     }
   }
 
-  return (
-    <div className="flex h-full min-w-0 flex-col gap-3">
-      <p className="text-muted-foreground text-xs">{t('explorer.description', { fallback: '' })}</p>
+  // One panel for every tab: only the active tab's content is mounted, and it reads `active`.
+  const panel = (
+    <Card
+      className="min-h-0 min-w-0 flex-1"
+      contentClassName="flex min-h-0 min-w-0 flex-1 flex-col gap-2"
+    >
+      <div className="flex min-w-0 items-center justify-between gap-2">
+        <span className="text-muted-foreground truncate font-mono text-xs">{active.label}</span>
+        <Button
+          size="sm"
+          onClick={() => void run(active)}
+          isLoading={result.status === 'running'}
+          stableWidth
+        >
+          {t('explorer.run', { fallback: 'Run Request' })}
+        </Button>
+      </div>
 
-      <div className="grid min-w-0 gap-3 lg:grid-cols-[minmax(0,240px)_minmax(0,1fr)]">
-        <div className="flex min-w-0 flex-col gap-1">
-          {SDK_REQUESTS.map(request => (
-            <button
-              key={request.id}
-              onClick={() => setActiveId(request.id)}
-              className={`flex min-w-0 items-center justify-between gap-2 rounded border px-2 py-1.5 text-left font-mono text-xs ${
-                request.id === activeId
-                  ? 'border-primary bg-muted'
-                  : 'border-border hover:bg-muted/50'
-              }`}
-            >
-              <span className="truncate">{request.label}</span>
-              <Badge variant={request.category === 'graph' ? 'info' : 'secondary'} numerical>
-                {t(`explorer.category${request.category === 'graph' ? 'Graph' : 'Os'}`, {
-                  fallback: request.category,
-                })}
-              </Badge>
-            </button>
-          ))}
+      {result.status === 'done' && (
+        <div className="flex items-center gap-2 text-xs">
+          <Badge variant={result.live ? 'success' : 'warning'}>
+            {result.live
+              ? t('explorer.live', { fallback: 'Live' })
+              : t('explorer.mock', { fallback: 'Simulated' })}
+          </Badge>
+          <span className="text-muted-foreground">
+            {t('explorer.durationMs', { fallback: '{ms} ms', params: { ms: result.ms } })}
+          </span>
+          {!isInsideIframe() && (
+            <span className="text-muted-foreground">
+              · {t('explorer.standalone', { fallback: 'Standalone' })}
+            </span>
+          )}
         </div>
+      )}
 
-        <Card className="min-h-0 min-w-0">
-          <div className="flex h-full min-h-0 min-w-0 flex-col gap-2">
-            <div className="flex min-w-0 items-center justify-between gap-2">
-              <span className="text-muted-foreground truncate font-mono text-xs">
-                {active.label}
-              </span>
-              <Button
-                size="sm"
-                onClick={() => void run(active)}
-                disabled={result.status === 'running'}
-              >
-                {result.status === 'running'
-                  ? t('explorer.running', { fallback: 'Running…' })
-                  : t('explorer.run', { fallback: 'Run Request' })}
-              </Button>
-            </div>
+      <pre className="bg-muted/40 min-h-40 flex-1 overflow-auto rounded-md p-3 text-xs">
+        {result.status === 'done'
+          ? JSON.stringify(result.data, null, 2)
+          : t('explorer.empty', {
+              fallback: 'Select a request and run it to see the response.',
+            })}
+      </pre>
+    </Card>
+  );
 
-            {result.status === 'done' && (
-              <div className="flex items-center gap-2 text-xs">
-                <Badge variant={result.live ? 'success' : 'warning'}>
-                  {result.live
-                    ? t('explorer.live', { fallback: 'Live' })
-                    : t('explorer.mock', { fallback: 'Simulated' })}
-                </Badge>
-                <span className="text-muted-foreground">
-                  {t('explorer.durationMs', { fallback: '{ms} ms', params: { ms: result.ms } })}
-                </span>
-                {!isInsideIframe() && <span className="text-muted-foreground">· standalone</span>}
-              </div>
-            )}
+  return (
+    <div ref={explorerRef} className="flex min-w-0 flex-1 flex-col gap-3">
+      <p className="text-muted-foreground text-xs">
+        {t('explorer.description', {
+          fallback:
+            'Run real Bardioc SDK transport requests. Without a session, each request falls back to simulated data so you can still explore the shape.',
+        })}
+      </p>
 
-            <pre className="bg-muted/40 text-foreground min-h-40 flex-1 overflow-auto rounded p-3 text-[11px] leading-5">
-              {result.status === 'done'
-                ? JSON.stringify(result.data, null, 2)
-                : t('explorer.empty', {
-                    fallback: 'Select a request and run it to see the response.',
-                  })}
-            </pre>
-          </div>
-        </Card>
-      </div>
+      <Tabs
+        orientation={narrow ? 'horizontal' : 'vertical'}
+        value={activeId}
+        onValueChange={setActiveId}
+        className="min-h-0 flex-1"
+        contentWithGap
+        listClassName={cn(!narrow && 'w-60')}
+        // `max-w-60` keeps a horizontal tab as wide as the vertical list; longer labels truncate.
+        triggerClassName={cn('font-mono', narrow && 'max-w-60')}
+        contentClassName="flex flex-col"
+        items={SDK_REQUESTS.map(request => ({
+          value: request.id,
+          label: request.label,
+          badge: (
+            <Badge variant={request.category === 'graph' ? 'info' : 'secondary'} numerical>
+              {t(`explorer.category${request.category === 'graph' ? 'Graph' : 'Os'}`, {
+                fallback: request.category,
+              })}
+            </Badge>
+          ),
+          content: panel,
+        }))}
+      />
     </div>
   );
 }

package/templates/vite/src/i18n.tsx

@@ -1,10 +1,12 @@
 import { useOsConfig } from '@bardioc/app-sdk/react';
 import {
   I18nProvider as BaseI18nProvider,
+  mergeTranslations,
   useI18n,
   type I18nConfig,
   type TranslationMessages,
 } from '@bardioc/i18n-core';
+import { deMessages as uiDeMessages, enMessages as uiEnMessages } from '@bardioc/ui/i18n';
 import { useEffect, useMemo, type ReactNode } from 'react';
 import deMessages from './locales/de.json';
 import enMessages from './locales/en.json';
@@ -12,9 +14,11 @@ import enMessages from './locales/en.json';
 export const SUPPORTED_LOCALES = ['en', 'de'] as const;
 export type Locale = (typeof SUPPORTED_LOCALES)[number];
 
+// @bardioc/ui ships the strings of its own components (table pager, search, language switcher…);
+// the app's catalog is laid over them, so the app only carries its own keys and can override any.
 const DEFAULT_MESSAGES: Record<Locale, TranslationMessages> = {
-  en: enMessages,
-  de: deMessages,
+  en: mergeTranslations(uiEnMessages, enMessages),
+  de: mergeTranslations(uiDeMessages, deMessages),
 };
 
 const STORAGE_KEY = '{{APP_NAME}}.locale';

package/templates/vite/src/index.css

@@ -4,15 +4,9 @@
 
 @source './**/*.{ts,tsx}';
 
-* {
-    box-sizing: border-box;
-}
-
 html,
 body,
 #root {
-    margin: 0;
-    padding: 0;
     height: 100%;
     width: 100%;
     overflow: hidden;

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

@@ -1,11 +1,18 @@
 {
-  "app": { "title": "Wetter-Dashboard", "tagline": "Planetare Messwerte in Echtzeit" },
+  "app": { "title": "Wetter-Dashboard" },
+  "common": {
+    "filter": {
+      "filter": "Filter",
+      "activeFilter": { "_one": "{count} Filter", "_other": "{count} Filter" }
+    }
+  },
   "nav": {
     "overview": "Übersicht",
     "stations": "Stationen",
     "explorer": "Graph-Explorer",
     "events": "Live-Ereignisse",
-    "profile": "Profil"
+    "profile": "Profil",
+    "search": "Ansichten suchen…"
   },
   "menu": {
     "view": "Ansicht",
@@ -16,49 +23,34 @@
     "version": "Version",
     "id": "App-ID",
     "description": "Beschreibung",
-    "error": "app-manifest.json konnte nicht gelesen werden",
-    "source": "Live aus public/app-manifest.json gelesen"
-  },
-  "genericTable": {
-    "filterPlaceholder": "Ergebnisse filtern…",
-    "itemLabel": "Zeilen",
-    "showing": "{from} bis {to} von {total}",
-    "columns": "Spalten",
-    "noResults": "Keine Ergebnisse gefunden.",
-    "goToPreviousPage": "Zur vorherigen Seite",
-    "goToNextPage": "Zur nächsten Seite"
+    "error": "app-manifest.json konnte nicht gelesen werden.",
+    "source": "Live aus public/app-manifest.json gelesen."
   },
-  "common": { "button": { "previous": "Zurück", "next": "Weiter" } },
   "header": {
-    "search": "Stationen suchen…",
     "sync": "Sync",
-    "syncing": "Synchronisiere…",
     "location": "Station",
-    "savedAt": "Gespeichert {time}",
-    "neverSaved": "Noch nicht gespeichert"
+    "savedAt": "Gespeichert {time}"
   },
   "auth": {
     "title": "Mit Bardioc verbinden",
     "description": "Dieses Dashboard liest Live-Daten über den Bardioc-SDK-Transport. Es läuft in Bardioc oder eigenständig mit Dev-Auth.",
-    "stepsTitle": "Eigenständig mit Dev-Auth ausführen:",
-    "step1": "Setze DEV_SECRET=<dein-secret> und API_BASE_URL=<dein-host> in .env",
-    "step2": "Dev-Server starten:",
+    "stepsTitle": "Eigenständig mit Dev-Auth ausführen",
+    "step1": "Setze DEV_SECRET=<dein-secret> und API_BASE_URL=<dein-host> in .env.",
+    "step2": "Dev-Server starten.",
     "detectedTitle": "Erkannte Umgebung",
     "insideHost": "Im Host-Iframe",
-    "devAuth": "Dev-Auth aktiviert",
-    "yes": "ja",
-    "no": "nein",
+    "yes": "Ja",
+    "no": "Nein",
     "retry": "Neu laden"
   },
   "overview": {
-    "operator": "Betreiber",
-    "noOperator": "Betreiber nicht verfügbar",
     "updated": "Aktualisiert {time}",
-    "persistence": "In IndexedDB gespeichert",
-    "notPersisted": "Vorschau — nicht gespeichert (in Bardioc öffnen zum Speichern)",
+    "persistence": "In IndexedDB gespeichert.",
+    "notPersisted": "Vorschau — nicht gespeichert (in Bardioc öffnen zum Speichern).",
     "historyOne": "{count} Snapshot im Verlauf",
     "historyOther": "{count} Snapshots im Verlauf",
-    "source": "Quelle"
+    "emptyTitle": "Keine Stationsdaten",
+    "emptyDescription": "Stationen erscheinen hier, sobald sie Daten melden."
   },
   "conditions": { "sunny": "Sonnig", "cloudy": "Bewölkt", "rainy": "Regnerisch" },
   "source": { "graph": "Bardioc-Graph", "mock": "Simuliert" },
@@ -74,7 +66,7 @@
     "windSpeedHint": "Anhaltend",
     "vegetationHint": "Oberflächendeckung"
   },
-  "chart": { "title": "7-Tage-Ausblick", "description": "Sonnenstunden nach Wetterlage" },
+  "chart": { "title": "7-Tage-Ausblick", "description": "Sonnenstunden nach Wetterlage." },
   "stations": {
     "title": "Messstationen",
     "description": "Alle Stationen dieser Instanz. Suchen, filtern oder auswählen.",
@@ -86,40 +78,34 @@
     "colTemp": "Temp",
     "colHumidity": "Feuchte",
     "colVegetation": "Vegetation",
+    "select": "Station auswählen",
+    "current": "Aktuelle Station",
     "itemLabel": "Stationen",
-    "empty": "Keine Stationen passen zu den Filtern",
-    "apply": "Anwenden",
-    "clear": "Zurücksetzen"
+    "empty": "Keine Stationen passen zu den Filtern."
   },
   "explorer": {
     "title": "Graph-Explorer",
     "description": "Führe echte Bardioc-SDK-Transport-Anfragen aus. Ohne Session greift jede Anfrage auf simulierte Daten zurück.",
     "run": "Anfrage ausführen",
-    "running": "Läuft…",
-    "empty": "Wähle eine Anfrage und führe sie aus, um die Antwort zu sehen",
+    "empty": "Wähle eine Anfrage und führe sie aus, um die Antwort zu sehen.",
     "live": "Live",
     "mock": "Simuliert",
     "categoryGraph": "Graph",
     "categoryOs": "OS",
-    "request": "Anfrage",
-    "durationMs": "{ms} ms"
+    "durationMs": "{ms} ms",
+    "standalone": "Eigenständig"
   },
   "profile": {
     "title": "Betreiberprofil",
     "description": "Live aus dem OS-Transport geladen (os.profile).",
-    "name": "Name",
     "displayName": "Anzeigename",
     "firstName": "Vorname",
     "lastName": "Nachname",
-    "email": "E-Mail",
-    "id": "ID",
-    "organization": "Organisation",
-    "units": "Einheiten",
-    "members": "Mitglieder",
-    "raw": "Rohantwort",
     "errorTitle": "Profil konnte nicht geladen werden",
     "errorHint": "Der Transport meldete einen Fehler. Autorisiere eine Session und lade neu.",
-    "unknown": "Unbekannt"
+    "unknown": "Unbekannt",
+    "emptyTitle": "Keine Profildaten",
+    "emptyDescription": "Das OS hat für diese Sitzung kein Profil geliefert."
   },
   "events": {
     "title": "Live-Ereignisse",
@@ -128,12 +114,30 @@
     "emptyHost": "Noch keine Graph-Ereignisse — Aktivität erscheint hier, sobald sie auftritt.",
     "emptyStandalone": "In Bardioc öffnen (oder eigenständig mit Dev-Auth ausführen), um Live-Ereignisse zu empfangen."
   },
+  "debug": {
+    "menu": "Debug",
+    "menuWithState": "Debug: {state}",
+    "showInfo": "Debug-Infos anzeigen",
+    "previewState": "Vorschauzustand",
+    "state": {
+      "live": "Live",
+      "mock": "Testdaten",
+      "loading": "Laden",
+      "empty": "Leer",
+      "error": "Fehler"
+    }
+  },
+  "preview": {
+    "errorTitle": "Daten konnten nicht geladen werden",
+    "errorDescription": "Ein simulierter Fehler aus dem Vorschauzustand im Debug-Menü.",
+    "debugView": "Ansicht",
+    "retry": "Erneut versuchen"
+  },
   "notify": {
-    "synced": "{count} Stationen synchronisiert",
-    "saved": "In IndexedDB gespeichert",
-    "stationSelected": "Aktive Station: {name}",
-    "localeChanged": "Sprache gewechselt zu {locale}",
-    "queryOk": "Anfrage OK ({ms} ms)",
-    "queryFailed": "Anfrage fehlgeschlagen — zeige simulierte Daten"
+    "synced": "{count} Stationen synchronisiert.",
+    "stationSelected": "Aktive Station: {name}.",
+    "localeChanged": "Sprache gewechselt zu {locale}.",
+    "queryOk": "Anfrage OK ({ms} ms).",
+    "queryFailed": "Anfrage fehlgeschlagen — zeige simulierte Daten."
   }
 }

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

@@ -1,11 +1,18 @@
 {
-  "app": { "title": "Weather Dashboard", "tagline": "Live Planetary Readings" },
+  "app": { "title": "Weather Dashboard" },
+  "common": {
+    "filter": {
+      "filter": "Filter",
+      "activeFilter": { "_one": "{count} Filter", "_other": "{count} Filters" }
+    }
+  },
   "nav": {
     "overview": "Overview",
     "stations": "Stations",
     "explorer": "Graph Explorer",
     "events": "Live Events",
-    "profile": "Profile"
+    "profile": "Profile",
+    "search": "Search Views…"
   },
   "menu": {
     "view": "View",
@@ -19,46 +26,31 @@
     "error": "Could not read app-manifest.json.",
     "source": "Read live from public/app-manifest.json."
   },
-  "genericTable": {
-    "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"
-  },
-  "common": { "button": { "previous": "Previous", "next": "Next" } },
   "header": {
-    "search": "Search Stations…",
     "sync": "Sync",
-    "syncing": "Syncing…",
     "location": "Station",
-    "savedAt": "Saved {time}",
-    "neverSaved": "Not Yet Saved"
+    "savedAt": "Saved {time}"
   },
   "auth": {
     "title": "Connect to Bardioc",
     "description": "This dashboard reads live data through the Bardioc SDK transport. It runs when opened inside Bardioc, or standalone with dev auth.",
-    "stepsTitle": "Run standalone with dev auth:",
+    "stepsTitle": "Run Standalone with Dev Auth",
     "step1": "Set DEV_SECRET=<your-secret> and API_BASE_URL=<your-host> in the .env file.",
-    "step2": "Start the dev server:",
+    "step2": "Start the dev server.",
     "detectedTitle": "Detected Environment",
     "insideHost": "Inside Host Iframe",
-    "devAuth": "Dev Auth Enabled",
-    "yes": "yes",
-    "no": "no",
+    "yes": "Yes",
+    "no": "No",
     "retry": "Reload"
   },
   "overview": {
-    "operator": "Operator",
-    "noOperator": "Operator Unavailable",
     "updated": "Updated {time}",
     "persistence": "Persisted to IndexedDB",
-    "notPersisted": "Preview — not persisted (open inside Bardioc to persist)",
+    "notPersisted": "Preview — not persisted (open inside Bardioc to persist).",
     "historyOne": "{count} snapshot in history",
     "historyOther": "{count} snapshots in history",
-    "source": "Source"
+    "emptyTitle": "No Station Data",
+    "emptyDescription": "Stations appear here once they report."
   },
   "conditions": { "sunny": "Sunny", "cloudy": "Cloudy", "rainy": "Rainy" },
   "source": { "graph": "Bardioc Graph", "mock": "Simulated" },
@@ -86,40 +78,34 @@
     "colTemp": "Temp",
     "colHumidity": "Humidity",
     "colVegetation": "Vegetation",
+    "select": "Select Station",
+    "current": "Current Station",
     "itemLabel": "stations",
-    "empty": "No stations match your filters.",
-    "apply": "Apply",
-    "clear": "Clear"
+    "empty": "No stations match your filters."
   },
   "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",
-    "running": "Running…",
     "empty": "Select a request and run it to see the response.",
     "live": "Live",
     "mock": "Simulated",
     "categoryGraph": "Graph",
     "categoryOs": "OS",
-    "request": "Request",
-    "durationMs": "{ms} ms"
+    "durationMs": "{ms} ms",
+    "standalone": "Standalone"
   },
   "profile": {
     "title": "Operator Profile",
     "description": "Pulled live from the OS transport (os.profile).",
-    "name": "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",
     "errorHint": "The transport returned an error. Authorize a session, then reload.",
-    "unknown": "Unknown"
+    "unknown": "Unknown",
+    "emptyTitle": "No Profile Data",
+    "emptyDescription": "The OS returned no profile for this session."
   },
   "events": {
     "title": "Live Events",
@@ -128,9 +114,27 @@
     "emptyHost": "No graph events yet — activity will appear here as it happens.",
     "emptyStandalone": "Open inside Bardioc (or run standalone with dev auth) to receive live events."
   },
+  "debug": {
+    "menu": "Debug",
+    "menuWithState": "Debug: {state}",
+    "showInfo": "Show Debug Info",
+    "previewState": "Preview State",
+    "state": {
+      "live": "Live",
+      "mock": "Mock Data",
+      "loading": "Loading",
+      "empty": "Empty",
+      "error": "Error"
+    }
+  },
+  "preview": {
+    "errorTitle": "Could Not Load Data",
+    "errorDescription": "A simulated error from the preview state in the debug menu.",
+    "debugView": "View",
+    "retry": "Retry"
+  },
   "notify": {
     "synced": "Synced {count} stations.",
-    "saved": "Saved to IndexedDB.",
     "stationSelected": "Active station: {name}.",
     "localeChanged": "Language switched to {locale}.",
     "queryOk": "Request OK ({ms} ms).",

package/templates/vite/src/preview-state.tsx

@@ -0,0 +1,29 @@
+import { createContext, useContext, useMemo, useState, type ReactNode } from 'react';
+
+// Development aid: forces every view into one of its states, so loaders, empty states and error
+// states can be checked without breaking the backend, and fills live-only views (Live Events) with
+// sample data. Set from the sidebar's debug menu.
+export const PREVIEW_STATES = ['live', 'mock', 'loading', 'empty', 'error'] as const;
+export type PreviewState = (typeof PREVIEW_STATES)[number];
+
+interface PreviewStateValue {
+  previewState: PreviewState;
+  setPreviewState: (state: PreviewState) => void;
+}
+
+const PreviewStateContext = createContext<PreviewStateValue | null>(null);
+
+export function PreviewStateProvider({ children }: Readonly<{ children: ReactNode }>) {
+  const [previewState, setPreviewState] = useState<PreviewState>('live');
+  const value = useMemo(() => ({ previewState, setPreviewState }), [previewState]);
+
+  return <PreviewStateContext.Provider value={value}>{children}</PreviewStateContext.Provider>;
+}
+
+export function usePreviewState(): PreviewStateValue {
+  const context = useContext(PreviewStateContext);
+  if (!context) {
+    throw new Error('usePreviewState must be used within PreviewStateProvider');
+  }
+  return context;
+}