@bardioc/create-bardioc-app 0.7.0 → 0.7.1

package/templates/vite/CLAUDE.md

@@ -4,20 +4,32 @@ Bardioc hosted app. Vite + React 19 + TypeScript 6 + `@bardioc/app-sdk`, with
 `@bardioc/ui` (components + theme) and `@bardioc/i18n-core` (translations).
 
 The starter ships a **Climate Dashboard** — a worked example of how a real Bardioc app
-is wired: a sidebar shell with multiple views, `@bardioc/ui` components (cards, metrics,
-charts, a searchable/filterable `DataTable`, combobox, language switcher), translations,
-the SDK transport (graph + OS), notifications, app-scoped IndexedDB persistence, and an
-explicit auth-onboarding screen. Build your app by editing these pieces.
+is wired: a searchable sidebar shell with multiple views, `@bardioc/ui` components (cards, metrics,
+charts, a searchable/filterable/resizable `DataTable`, items, tabs, combobox, language switcher),
+translations, the SDK (graph + OS calls, live graph events, OS menu, notifications), app-scoped
+IndexedDB persistence, a debug menu that previews loading/empty/error states, and an explicit
+auth-onboarding screen. Build your app by editing these pieces.
 
 **Global rules apply.**
 
+What every Bardioc app shares (commands, dev auth, SDK, errors, manifest, copy, shipping):
+@AGENTS.md
+
+This file adds the Climate Dashboard, `@bardioc/ui`, i18n and the React side of the SDK.
+
 ---
 
 ## Code style
 
-- Single-line comments only (`// WHY, not WHAT`); no `/* */` blocks; no task refs.
+- Single-line comments only (`// WHY, not WHAT`); no `/* */` blocks, also not as JSX
+  `{/* */}` — put a `//` line above the element or between its attributes. No task refs.
 - 150–200 LOC per component, 600 LOC hard max per file. Decompose early.
-- Constants: `SCREAMING_SNAKE_CASE`. Prefer `switch`/early-return over long `else-if`.
+- Constants: `SCREAMING_SNAKE_CASE`. Keep a named constant even when it has one caller (`IDB_STORE`,
+  `MAX_EVENTS`): the name says what the value means. Inline it only when it holds nothing but CSS
+  classes.
+- Prefer `switch`/early-return over long `else-if`.
+- Compose class names with `cn` from `@bardioc/ui/lib`, never template strings or `+`. Write whole
+  Tailwind class names (`ok ? 'text-success' : 'text-error'`), never build them (`text-${tone}`).
 
 ---
 
@@ -25,63 +37,64 @@ explicit auth-onboarding screen. Build your app by editing these pieces.
 
 ```
 src/
-  main.tsx                # providers: AppSdkProvider (in host) + AppI18nProvider
-  App.tsx                 # auth gate → DashboardProvider+AppShell, or Onboarding
+  main.tsx                # installDevHost (standalone dev) + AppSdkProvider + AppI18nProvider
+  App.tsx                 # auth gate → DashboardProvider + AppShell, or Onboarding
   index.css               # Tailwind v4 + @bardioc/ui theme tokens
-  i18n.tsx                # I18nProvider, OS-locale sync, useTranslation/useI18n
-  locales/                # en.json / de.json translation strings
+  i18n.tsx                # I18nProvider, @bardioc/ui catalog merge, OS-locale sync, useTranslation/useI18n
+  locales/                # en.json / de.json — the app's own strings
   dashboard-provider.tsx  # context: climate state + profile, via useDashboard()
+  preview-state.tsx       # debug preview state (live | mock | loading | empty | error), via usePreviewState()
   use-app-notify.ts       # OS host notification (useNotify) mirrored to a local toast
   auth/
     onboarding.tsx        # Empty full-page screen with the DEV_SECRET dev-auth steps
   shell/
-    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            # Page actions: location combobox + language switcher + sync
+    app-shell.tsx         # SidebarBasic (search + nav + footer) + Page + OS top menu (useCommandMenu)
+    view-content.tsx      # view switch + the preview state (skeleton / error) around it
+    debug-menu.tsx        # sidebar footer, dev only: debug info toggle + preview state
+    header.tsx            # Page actions: station combobox + language switcher + sync
+    about-dialog.tsx      # "About" Dialog — reads public/app-manifest.json at runtime
   climate/
-    types.ts              # Station/ClimateState + METRICS config (icon, unit, color)
-    climate-data.ts       # demo-data generator (replace with your real source)
+    types.ts              # ViewId, Station/ClimateState, METRICS config (icon, unit, color), IDB keys
+    climate-data.ts       # demo-data generator, 24 stations (replace with your real source)
     use-climate.ts        # hook: IndexedDB load/persist + OS-probe sync + history
     overview-view.tsx     # location card + metrics + chart + persistence indicator
-    stations-view.tsx     # DataTable (search + FilterDropdown + row select)
-    location-card.tsx     # Card + BadgeStatus widget
+    stations-view.tsx     # DataTable: search, FilterDropdown, paging, resizable columns, actions column
+    location-card.tsx     # MediaTile + BadgeStatus widget
     metrics-grid.tsx      # GenericMetrics widget (5 readings)
     conditions-chart.tsx  # BarChartMultiple widget (7-day outlook)
     location-select.tsx   # Combobox station switcher
   events/
-    live-events-view.tsx  # live graph events via useGraphEvents (SSE, permission "events")
+    live-events-view.tsx  # live graph events via useGraphEvents, as Item rows
+    mock-events.ts        # sample events for the "Mock Data" preview
   graph/
-    requests.ts           # catalog of every SDK transport request (graph + OS)
-    explorer-view.tsx     # run real requests; mock fallback when unauthorized
+    requests.ts           # catalog of SDK requests (graph + OS) shown in the Explorer
+    explorer-view.tsx     # run real requests; simulated data when a call fails
   profile/
     use-profile.ts        # os.profile fetch (+ operatorLabel helper)
     profile-view.tsx      # real profile data + error state
 ```
 
-Views are selected from the sidebar (`ViewId` in `climate/types.ts`); each view consumes
-shared state from `useDashboard()`. The same sections are also driven from the **OS top menu**
-(`useCommandMenu` in `app-shell.tsx`): each view is a checkable command under a `View` menu, plus
-an `app`-kind root next to the host's About / Version entries — the example of OS menu integration.
+Views are listed in `NAV` (`shell/app-shell.tsx`) and rendered by `ViewContent`
+(`shell/view-content.tsx`); each view reads shared state from `useDashboard()`. The same `NAV`
+drives the sidebar (filtered by its search, `⌘F` / `Ctrl+F`) and the **OS top menu**
+(`useCommandMenu`): each view is a checkable command under a `View` menu, plus an `app`-kind root
+next to the host's About / Version entries.
 
 ---
 
 ## Development
 
-```bash
-pnpm dev              # http://localhost:{{PORT}}
-pnpm build            # → dist/
-pnpm bundle           # → {{APP_NAME}}.zip
-pnpm check-types      # tsc
-pnpm lint             # eslint (@bardioc/configs preset)
-pnpm format           # prettier (@bardioc/configs preset)
-```
-
 ESLint, Prettier and the `tsconfig.json` base come from `@bardioc/configs` — edit
 `eslint.config.mjs` / `prettier.config.mjs` only to add app-specific overrides on top of the preset.
 
-`npm run dev` runs plain Vite — a local preview shell (no transport): the dashboard renders, but
-live SDK data comes only when the app is opened inside the host, or when `DEV_SECRET` and
-`API_BASE_URL` are set for standalone dev auth (see `.env.example`).
+Standalone, `main.tsx` installs the dev host and `vite.config.ts` the `bardiocDevAuth` proxy; without
+dev auth the views show their error or fallback states. A build opened outside the host shows the
+onboarding screen (`auth/onboarding.tsx`) instead.
+
+**Debug menu** (sidebar footer, `npm run dev` only): _Show Debug Info_ toggles the same debug flag
+as the OS dock; _Preview State_ forces every view into `Mock Data`, `Loading`, `Empty` or `Error`,
+so you can check skeletons, empty states and errors without breaking the backend. Give every new
+view all of these states.
 
 ---
 
@@ -89,8 +102,8 @@ live SDK data comes only when the app is opened inside the host, or when `DEV_SE
 
 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`:
+patterns, and copy rules ship with the installed package, so they match its version. Check a
+component's props in its `.d.ts` before using one. Theme is wired in `src/index.css`:
 
 ```css
 @import 'tailwindcss';
@@ -99,44 +112,51 @@ in `src/index.css`:
 @source './**/*.{ts,tsx}';
 ```
 
-Import components from the public subpaths (never reach into `@bardioc/ui/src`):
+Import from the public subpaths (never reach into `@bardioc/ui/src`):
 
 ```typescript
-import {
-  Badge,
-  BadgeStatus,
-  Button,
-  Card,
-  Combobox,
-  CheckboxGroup,
-  ConnectedLanguageSwitcher,
-  DataTable,
-  Empty,
-  FilterDropdown,
-  Kbd,
-  Page,
-  SidebarBasic,
-  SidebarContainedProvider,
-  SortableColumnHeader,
-  Toaster,
-  TruncatedCellText,
-  toast,
-} from '@bardioc/ui/components';
+import { Button, Card, DataTable, Empty, Page, SidebarBasic } from '@bardioc/ui/components';
 import { GenericMetrics } from '@bardioc/ui/components/metrics';
 import { BarChartMultiple } from '@bardioc/ui/components/charts';
+import { useElementWidth, useFuzzySearch } from '@bardioc/ui/hooks';
+import { cn, useDebugMode } from '@bardioc/ui/lib';
+import * as Shadcn from '@bardioc/ui/shadcn'; // only parts with no Bardioc version
 import type { ChartConfig } from '@bardioc/ui/shadcn/chart';
 import type { TReactTable } from '@bardioc/ui/types'; // TReactTable.ColumnDef<Row>
 ```
 
-The sidebar uses `SidebarBasic` inside a `SidebarContainedProvider` (the contained variant for
-OS windows); the language switcher is `ConnectedLanguageSwitcher useI18n={useI18n}`.
+**Component choice.** Use the Bardioc component from `@bardioc/ui/components` wherever one exists
+(`Button`, `Badge`, `Tabs`, `Item*`, `DropdownMenuItem`, `SidebarMenuButton`, …). Import from
+`@bardioc/ui/shadcn` only the parts Bardioc doesn't override (`DropdownMenu`, `DropdownMenuTrigger`,
+`DropdownMenuContent`, `SidebarMenu`, `SidebarMenuItem`) — that's correct, not a gap. Don't rebuild
+what a component already does: a list of rows is `ItemGroup` + `Item`, a "nothing here" message is
+`Empty`, a table is `DataTable`.
+
+**Use the props, not classes.** Size, variant, truncation and layout come from component props
+(`size="sm"`, `variant="ghost"`, `ItemTitle truncate`, `Card contentClassName`). If a component
+can't do what you need, that's a `@bardioc/ui` gap to report — not a reason for an arbitrary
+`h-8`, `[&>span]:…` selector or a raw color.
+
+**Rules from the design system:**
+
+- No false affordances: hover shadows, lifts or highlights only on things that are clickable.
+- `Empty` goes on the page, not inside a `Card` (its background shows as a block in dark mode).
+- Page-header actions use the small sizes: `size="sm"` buttons and inputs, `icon-sm` icon buttons.
+- An icon-only button needs a `title` (it becomes the tooltip and accessible name) or `aria-label`.
+- Selected/forced state is shown with the component's own state (`isActive`, `aria-pressed`, a
+  filled `variant`), e.g. the debug entry and the Stations actions column.
+- Filter triggers read "Filter" / "2 Filters" (`common.filter.*` from the `@bardioc/ui` catalog),
+  wrapped in `StableWidthText` so the button keeps its width.
+- Theme tokens only (`bg-card`, `text-muted-foreground`, `var(--chart-1)`), never raw colors.
 
 ### 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.
+window. Use container variants (`@xl/page:flex`, `@3xl/page:grid-cols-2`), not viewport
+breakpoints (`md:`), and `useElementWidth` when JS has to switch a layout (the Explorer flips its
+tabs to vertical when wide).
 
 `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
@@ -151,9 +171,9 @@ the sidebar in it:
 </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.
+Collapse your own `actions` against the same container (the station combobox is
+`hidden @xl/page:flex`) 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.
 
 ---
 
@@ -170,114 +190,108 @@ t('overview.updated', { fallback: 'Updated {time}', params: { time } });
 ```
 
 - Add a string → add the key to **both** `src/locales/en.json` and `src/locales/de.json`.
+- Always pass a `fallback`. It is interpolated like a translation, so `{param}`s and `{count}` are
+  filled in (`fallback: 'Debug: {state}', params: { state }`).
+- `src/i18n.tsx` lays the app's catalog over `@bardioc/ui/i18n` (`mergeTranslations`), so
+  `@bardioc/ui` component strings and its `common.*` keys work out of the box and the app only
+  carries its own keys.
 - `AppI18nProvider syncWithOs` follows the OS language (`useOsConfig().language`); the header's
   `ConnectedLanguageSwitcher` lets the user switch it manually.
-- 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`.
+- Copy rules are in `AGENTS.md`; details and exceptions in `node_modules/@bardioc/ui/docs/copy.md`.
 
 ---
 
 ## Persistence — app-scoped IndexedDB
 
-The SDK gives every app a sandboxed IndexedDB via `bridge.idb(storeName)`. Requires the
-`"indexdb"` permission (already in `public/app-manifest.json`).
+The SDK gives every app a sandboxed IndexedDB via `bardioc.idb(storeName)`. Standalone, it lives
+in this browser's IndexedDB.
 
 ```typescript
-const store = bridge.idb('climate');
-await store.put('state', value);
-const saved = await store.get<ClimateState>('state');
-await store.query({ prefix: 'log:', limit: 50 }); // history — see use-climate.ts
+const bardioc = useSdk();
+const store = bardioc.idb(IDB_STORE);
+await store.put(IDB_STATE_KEY, value);
+const saved = await store.get(IDB_STATE_KEY); // { key, value, updatedAt } | null
+await store.query({ prefix: IDB_LOG_PREFIX, limit: 100 }); // history — see use-climate.ts
 ```
 
 The Overview shows a live "Persisted to IndexedDB · Saved … · N snapshots" indicator so the
-write path is visible. For small key-value state, `bridge.storage.get/set/delete` (permission
-`"storage"`) is simpler.
+write path is visible. Persisted state outlives code changes: after changing the demo data, clear
+the site data (DevTools → Application) to see it.
 
 ---
 
-## SDK API
+## SDK in React — `@bardioc/app-sdk/react`
+
+The `Bardioc` object and its API are in `AGENTS.md`; this app reaches it through hooks.
 
 ```typescript
-const bridge = useSdk(); // host bridge (only inside the host/dev session)
+const bardioc = useSdk(); // the connected SDK (only inside AppSdkProvider)
 const notify = useAppNotify(); // OS host notification + local toast (src/use-app-notify.ts)
-const osConfig = useOsConfig(); // { theme, language, instanceId, ... }
+const osConfig = useOsConfig(); // { theme, language, ... }
 ```
 
-**Graph** — `bridge.transport.graph.*`: `get(id)`, `getByXid`, `query(lucene, opts)`,
-`gremlin(rootId, query)`, `create`, `update`, `connect`, `timeseries.get/query`. Note: `query`
-resolves to a `{ items: [...] }` envelope at runtime (not a bare array) — normalize before
-indexing, and escape `/` in Lucene as `\/` (`ogit\/_type:"…"`). Hard-coded ids/types won't exist
-in every instance: discover them from a wildcard `query('*')` first (see `graph/requests.ts`).
-
-**OS** — `bridge.transport.os.*`: `profile.get()`, `organization.getStructure()`, `applications.list()`.
+The `{ items }` envelope is normalized by `toItems` in `graph/requests.ts`. Error states:
+`use-climate.ts`, `profile-view.tsx`, and `explorer-view.tsx`, which shows labeled simulated data.
 
-**Live events** — `useGraphEvents({ types }, handler)` (`@bardioc/app-sdk/react`) opens a scoped
-graph-event SSE stream while mounted (permission `"events"`). Each `handler` receives a
-`GraphEvent` (`id`, `type`, `timestamp`, `body?`). See `events/live-events-view.tsx`. No events
-arrive outside a valid session — render an empty state.
+**Live events** — `useGraphEvents({ types }, handler)` (`@bardioc/app-sdk/react`) opens a graph
+event stream while mounted. Each `handler` receives a `GraphEvent` (`id`, `type`, `timestamp`,
+`body?`). See `events/live-events-view.tsx`. No events arrive outside a valid session — render an
+empty state.
 
 **OS menu** — `useCommandMenu(commands, menu)` (`@bardioc/app-sdk/react`) pushes an app menu tree
-into the host menu bar. `commands` are `{ id, title, checked?, handler }`; `menu` is `SdkMenuRoot[]`
-where each root has `label`, optional `kind: 'app'`, and `items` of `{ type: 'command', commandId,
-label?, leftIcon? }`. `leftIcon` is a lucide export name (string) the host resolves. See
-`shell/app-shell.tsx` — view switching is mirrored here as checkable commands.
-
-The **Graph Explorer** view runs the full catalog in `graph/requests.ts` against the live
-transport. The graph presets issue real calls — a wildcard `query('*')`, a query by the type of a
-real node, a node `get`, and a Gremlin `both()` neighbor traversal. The typed/get/gremlin presets
-each pull a real id and type from a wildcard query first (`sampleNodes` → `toItems`), so they
-return live data instead of empties. Network calls fail (401/timeout) outside a valid session —
-always `try/catch` and fall back (see `use-climate.ts` and `explorer-view.tsx`, which show
-simulated data).
+into the host menu bar. `commands` are `AppCommand`s (`{ id, title, checked?, handler }`); `menu`
+is `MenuRoot[]`, each root with a `label`, optional `kind: 'app'`, and `items` of
+`{ type: 'command', commandId, label?, leftIcon? }`. `leftIcon` is a lucide export name the host
+resolves. See `shell/app-shell.tsx` — view switching is mirrored there as checkable commands.
+
+The **Graph Explorer** view runs the catalog in `graph/requests.ts` against the live SDK: a
+wildcard `query('*')`, a query by the type of a real node, a node `get`, a Gremlin `both()`
+traversal, and the OS calls. The typed/get/gremlin presets pull a real id and type from a wildcard
+query first (`sampleNodes`), so they return live data instead of empties.
 
 ---
 
 ## Manifest — `public/app-manifest.json`
 
-The starter ships a full manifest as a showcase of every supported field (validated by
-`validateManifest` in `@bardioc/app-sdk`):
-
-- `permissions`: `notify`, `transport`, `indexdb`, `events` (the APIs this app actually uses).
-  Other valid values: `storage` (host-deferred) and the deprecated `kernel-proxy` — do not add
-  `kernel-proxy` for hosted apps.
-- `window`: `size` (`xs|sm|md|lg|xl` or a custom `{ width, height, minWidth?, minHeight? }`),
-  `resizable`, `maximizable`, `minimizable`, `customScroll`, `centered`, `isHeaderless`,
-  `isInstanceAware`, `canHaveMultipleWindows`.
-- Metadata: `author`, `categories`, `showInDock`, `showInDockAppsMenu`.
-
-Trim any field you don't need — only `manifestVersion`, `id`, `name`, `version` are required.
+The starter ships a full manifest as a showcase of the supported fields (listed in `AGENTS.md`).
+Trim any field you don't need.
 
 ---
 
 ## How to…
 
 - **Add a metric tile** → add a `MetricDef` (key, icon, unit, color) to `METRICS` in `types.ts`,
-  add the field to `ClimateReading` + the generator, and add `metrics.*` strings to `src/locales/{en,de}.json`.
-- **Add a view** → add a `ViewId` (`climate/types.ts`), a `NAV` entry + `case` in `shell/app-shell.tsx`,
-  a `nav.*` string in `src/locales/{en,de}.json`, and the view component. The `NAV` entry (with its
-  `iconName`) is auto-wired into both the sidebar and the OS `View` menu.
+  add the field to `ClimateReading` + the generator, and add `metrics.*` strings to
+  `src/locales/{en,de}.json`.
+- **Add a view** → add a `ViewId` (`climate/types.ts`), a `NAV` entry in `shell/app-shell.tsx`, a
+  `case` in `shell/view-content.tsx`, a `nav.*` string in `src/locales/{en,de}.json`, and the view
+  component. The `NAV` entry (with its `iconName`) is auto-wired into the sidebar, its search and
+  the OS `View` menu. Check the view in every debug preview state.
 - **Add an OS menu command** → add an `AppCommand` (`{ id, title, handler }`) and a matching
-  `{ type: 'command', commandId }` item under a `SdkMenuRoot` in `app-shell.tsx`; set `checked` for
+  `{ type: 'command', commandId }` item under a `MenuRoot` in `app-shell.tsx`; set `checked` for
   toggles. Add any `menu.*` label to `src/locales/{en,de}.json`.
-- **Add a table column** → push a `TReactTable.ColumnDef<Station>` in `stations-view.tsx`.
-- **Add an SDK request** → add an entry to `SDK_REQUESTS` in `graph/requests.ts` (it shows in the Explorer).
-- **Use real data** → replace `generateState()` with `bridge.transport.graph.*` calls in
-  `use-climate.ts`; keep the IndexedDB write so it persists across reloads.
-- **Read the manifest** → `fetch(\`${import.meta.env.BASE_URL}app-manifest.json\`)`(served at the
-Vite base in dev and inside the host). See`shell/about-dialog.tsx` — it shows version, id,
-  description, and permissions straight from the manifest.
+- **Add a table column** → push a `TReactTable.ColumnDef<Station>` in `stations-view.tsx`, with a
+  `size` (resizing resets to it). Row actions go in the trailing `actions` column: fixed 40px, no
+  header, not sortable or resizable, `icon-xs` buttons.
+- **Add an SDK request** → add an entry to `SDK_REQUESTS` in `graph/requests.ts` (it shows in the
+  Explorer).
+- **Use real data** → replace `generateState()` with `bardioc.graph.*` calls in `use-climate.ts`;
+  keep the IndexedDB write so it persists across reloads.
+- **Read the manifest** → ``fetch(`${import.meta.env.BASE_URL}app-manifest.json`)`` (served at
+  the Vite base in dev and inside the host). See `shell/about-dialog.tsx`.
 
 ---
 
 ## Anti-patterns
 
-| ❌ Don't                                     | ✅ Do                                                 |
-| -------------------------------------------- | ----------------------------------------------------- |
-| `bridge.notify(...)` in a component          | `const notify = useNotify()`                          |
-| `<AppSdkProvider>` rendered outside the host | gate on `isInsideIframe()` / dev session (`main.tsx`) |
-| raw `#1a1a1a` / `oklch(...)` colors          | theme tokens (`bg-card`, `var(--chart-1)`)            |
-| hard-code a label string                     | `t('key', { fallback })` in `en` **and** `de`         |
-| reach into `@bardioc/ui/src/...`             | import from `@bardioc/ui/components` etc.             |
+| ❌ Don't                                          | ✅ Do                                                         |
+| ------------------------------------------------- | ------------------------------------------------------------- |
+| `bardioc.ui.notify(...)` in a component           | `const notify = useAppNotify()`                               |
+| `<AppSdkProvider>` without a host or dev session  | gate on `isInsideIframe()` / `isDevStandalone()` (`main.tsx`) |
+| raw `#1a1a1a` / `oklch(...)` colors               | theme tokens (`bg-card`, `var(--chart-1)`)                    |
+| `h-8`, `[&>span]:truncate` to restyle a component | its props (`size`, `variant`, `truncate`)                     |
+| viewport breakpoints (`md:`) inside the page      | container variants (`@xl/page:`)                              |
+| hover shadow on something not clickable           | no hover, or make it a real action                            |
+| hand-built rows / empty messages                  | `ItemGroup` + `Item`, `Empty`                                 |
+| hard-code a label string                          | `t('key', { fallback })` in `en` **and** `de`                 |
+| reach into `@bardioc/ui/src/...`                  | import from `@bardioc/ui/components` etc.                     |

package/templates/vite/package.json

@@ -22,9 +22,9 @@
     "release:publish": "changeset publish"
   },
   "dependencies": {
-    "@bardioc/app-sdk": "^1.0.1",
-    "@bardioc/i18n-core": "^0.1.1",
-    "@bardioc/ui": "^0.7.29",
+    "@bardioc/app-sdk": "^1.0.3",
+    "@bardioc/i18n-core": "^0.1.2",
+    "@bardioc/ui": "^0.7.31",
     "lucide-react": "^0.544.0",
     "react": "19.2.6",
     "react-dom": "19.2.6"

package/templates/vite/src/App.tsx

@@ -1,6 +1,7 @@
 import { isDevStandalone, isInsideIframe } from '@bardioc/app-sdk/dev';
 import { Onboarding } from './auth/onboarding';
 import { DashboardProvider } from './dashboard-provider';
+import { PreviewStateProvider } from './preview-state';
 import { AppShell } from './shell/app-shell';
 
 export function App() {
@@ -11,8 +12,10 @@ export function App() {
   }
 
   return (
-    <DashboardProvider>
-      <AppShell />
-    </DashboardProvider>
+    <PreviewStateProvider>
+      <DashboardProvider>
+        <AppShell />
+      </DashboardProvider>
+    </PreviewStateProvider>
   );
 }

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

@@ -1,5 +1,5 @@
 import { isInsideIframe } from '@bardioc/app-sdk/dev';
-import { Button, Empty, Kbd } from '@bardioc/ui/components';
+import { Button, Card, Empty, Kbd } from '@bardioc/ui/components';
 import { PlugZap } from 'lucide-react';
 import { useTranslation } from '../i18n';
 
@@ -9,7 +9,7 @@ function DetectedRow({ label, ok }: Readonly<{ label: string; ok: boolean }>) {
     <div className="flex items-center justify-between gap-4">
       <span className="text-muted-foreground">{label}</span>
       <span className={ok ? 'text-success' : 'text-muted-foreground'}>
-        {ok ? t('auth.yes', { fallback: 'yes' }) : t('auth.no', { fallback: 'no' })}
+        {ok ? t('auth.yes', { fallback: 'Yes' }) : t('auth.no', { fallback: 'No' })}
       </span>
     </div>
   );
@@ -36,31 +36,27 @@ export function Onboarding() {
         </Button>
       }
     >
-      <div className="border-border bg-card mt-4 w-full max-w-md rounded-lg border p-4 text-left text-xs leading-6">
-        <p className="text-foreground mb-2 font-medium">
-          {t('auth.stepsTitle', { fallback: 'Run standalone with dev auth:' })}
-        </p>
-        <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 the .env file.',
-            })}
-          </li>
-          <li>
-            <div>{t('auth.step2', { fallback: 'Start the dev server:' })}</div>
-            <Kbd>pnpm dev</Kbd>
-          </li>
-        </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' })}
-          </p>
+      <div className="flex w-full max-w-md flex-col gap-4 text-left">
+        <Card title={t('auth.stepsTitle', { fallback: 'Run Standalone with Dev Auth' })}>
+          <ol className="text-muted-foreground flex list-decimal flex-col gap-2 pl-4">
+            <li>
+              {t('auth.step1', {
+                fallback:
+                  'Set DEV_SECRET=<your-secret> and API_BASE_URL=<your-host> in the .env file.',
+              })}
+            </li>
+            <li>
+              <div>{t('auth.step2', { fallback: 'Start the dev server.' })}</div>
+              <Kbd>npm run dev</Kbd>
+            </li>
+          </ol>
+        </Card>
+        <Card title={t('auth.detectedTitle', { fallback: 'Detected Environment' })}>
           <DetectedRow
             label={t('auth.insideHost', { fallback: 'Inside Host Iframe' })}
             ok={insideHost}
           />
-        </div>
+        </Card>
       </div>
     </Empty>
   );

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

@@ -9,6 +9,25 @@ const STATIONS: [StationBase, ...StationBase[]] = [
   { id: 'aurora', name: 'Aurora Flats', region: 'Polar Rim' },
   { id: 'cinder', name: 'Cinder Basin', region: 'Volcanic Plains' },
   { id: 'mistral', name: 'Mistral Cove', region: 'Coastal Shelf' },
+  { id: 'ember', name: 'Ember Spire', region: 'Volcanic Plains' },
+  { id: 'glacier', name: 'Glacier Gate', region: 'Polar Rim' },
+  { id: 'saffron', name: 'Saffron Dunes', region: 'Arid Expanse' },
+  { id: 'tidewater', name: 'Tidewater Point', region: 'Coastal Shelf' },
+  { id: 'canopy', name: 'Canopy Hollow', region: 'Equatorial Belt' },
+  { id: 'granite', name: 'Granite Pass', region: 'Highlands' },
+  { id: 'halcyon', name: 'Halcyon Bay', region: 'Coastal Shelf' },
+  { id: 'obsidian', name: 'Obsidian Field', region: 'Volcanic Plains' },
+  { id: 'frostline', name: 'Frostline Camp', region: 'Polar Rim' },
+  { id: 'mirage', name: 'Mirage Basin', region: 'Arid Expanse' },
+  { id: 'fernwood', name: 'Fernwood Glade', region: 'Equatorial Belt' },
+  { id: 'summit', name: 'Summit Watch', region: 'Highlands' },
+  { id: 'driftwood', name: 'Driftwood Reach', region: 'Coastal Shelf' },
+  { id: 'cobalt', name: 'Cobalt Crater', region: 'Volcanic Plains' },
+  { id: 'tundra', name: 'Tundra Outpost', region: 'Polar Rim' },
+  { id: 'sandstone', name: 'Sandstone Mesa', region: 'Arid Expanse' },
+  { id: 'monsoon', name: 'Monsoon Delta', region: 'Equatorial Belt' },
+  { id: 'windward', name: 'Windward Crest', region: 'Highlands' },
+  { id: 'coral', name: 'Coral Lagoon', region: 'Coastal Shelf' },
 ];
 const CONDITIONS: [Condition, ...Condition[]] = ['sunny', 'cloudy', 'rainy'];
 const DAYS = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] as const;

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

@@ -1,3 +1,4 @@
+import { Card } from '@bardioc/ui/components';
 import { BarChartMultiple } from '@bardioc/ui/components/charts';
 import type { ChartConfig } from '@bardioc/ui/shadcn/chart';
 import { useTranslation } from '../i18n';
@@ -24,13 +25,17 @@ export function ConditionsChart({ forecast }: Readonly<ConditionsChartProps>) {
   }));
 
   return (
-    <BarChartMultiple
-      seriesData={seriesData}
-      xKey="day"
-      chartConfig={chartConfig}
+    // BarChartMultiple is a bare chart; the Card around it carries the heading.
+    <Card
       title={t('chart.title', { fallback: '7-Day Outlook' })}
       description={t('chart.description', { fallback: 'Daylight hours by condition.' })}
-      heightClass="h-[220px]"
-    />
+    >
+      <BarChartMultiple
+        seriesData={seriesData}
+        xKey="day"
+        chartConfig={chartConfig}
+        heightClass="h-55"
+      />
+    </Card>
   );
 }

package/templates/vite/src/climate/location-card.tsx

@@ -1,4 +1,4 @@
-import { Badge, BadgeStatus, Card } from '@bardioc/ui/components';
+import { Badge, BadgeStatus, Card, MediaTile } from '@bardioc/ui/components';
 import { Cloud, CloudRain, Sun, type LucideIcon } from 'lucide-react';
 import { useTranslation } from '../i18n';
 import type { Condition, DataSource, Station } from './types';
@@ -20,15 +20,12 @@ interface LocationCardProps {
 export function LocationCard({ station, updatedAt, source }: Readonly<LocationCardProps>) {
   const { t } = useTranslation();
   const condition = CONDITION[station.condition];
-  const Icon = condition.icon;
   const time = new Date(updatedAt).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
 
   return (
     <Card>
       <div className="flex items-center gap-4">
-        <div className="bg-muted text-foreground flex size-12 shrink-0 items-center justify-center rounded-full">
-          <Icon className="size-6" />
-        </div>
+        <MediaTile size="md" icon={condition.icon} />
         <div className="min-w-0 flex-1">
           <div className="truncate text-lg font-semibold">{station.name}</div>
           <div className="text-muted-foreground truncate text-xs">{station.region}</div>

package/templates/vite/src/climate/location-select.tsx

@@ -16,11 +16,16 @@ export function LocationSelect({ stations, value, onSelect }: Readonly<LocationS
     <Combobox
       items={stations.map(station => station.id)}
       value={value}
-      onValueChange={next => onSelect(next as string)}
+      // Combobox reports null when cleared or when its value leaves the list; keep the station.
+      onValueChange={next => {
+        if (next) onSelect(next as string);
+      }}
       itemToStringValue={item => item as string}
       itemToStringLabel={item => nameById.get(item as string) ?? (item as string)}
       placeholder={t('header.location', { fallback: 'Station' })}
-      className="h-8 w-52"
+      size="sm"
+      // Too wide for a narrow page header; below `@xl` stations stay selectable from the Stations view.
+      className="hidden w-52 @xl/page:flex"
     />
   );
 }