create-keboola-app 0.2.0 → 0.2.1

package/dist/template/src/auth/session.ts

@@ -3,23 +3,14 @@ import { useRouterState } from '@tanstack/react-router';
 
 import { Expired, Restoring, SignInForm, Unavailable } from './states';
 
-/**
- * The signed-out screen's path.
- *
- * - Spelled again as a literal in `createFileRoute`. TanStack's generator reads that argument as
- *   source text, so it cannot be a reference.
- */
+/** Keep in sync with the literal in `createFileRoute` — TanStack's generator needs source text. */
 export const AUTH_ROUTE = '/signed-out';
 
 /**
  * Whether the router is on the signed-out screen.
  *
- * - The root layout asks, because it is the only component the chromed and chromeless branches
- *   share.
- * - `select` returns the boolean, not the pathname, so navigating between two chromed routes does
- *   not re-render the root.
- * - A real app asks its session instead. This screen belongs to *having no session*, not to a path
- *   a visitor can type — the path exists so the screen is reachable without a backend.
+ * - Selects the boolean, so moving between chromed routes does not re-render the root.
+ * - A real app asks its session instead; the path only makes the screen reachable without a backend.
  */
 export const useIsAuthRoute = (): boolean =>
   useRouterState({ select: (state) => state.location.pathname === AUTH_ROUTE });
@@ -27,22 +18,15 @@ export const useIsAuthRoute = (): boolean =>
 /** One pre-project state: the card's heading, and the body that goes under it. */
 type AuthStateView = {
   title: string;
-  /** Handed `onRetry`, which returns the screen to the sign-in form. States that offer no retry
-   *  simply ignore it. */
+  /** `onRetry` returns the screen to the sign-in form. */
   body: ComponentType<{ onRetry: () => void }>;
 };
 
 /**
  * The pre-project states, keyed by the session status that produces each.
  *
- * - Four, not one: a signed-out screen that models only "signed out" leaves the other three to be
- *   invented per app, and they are the ones that get a11y and copy wrong.
- * - Every state renders inside the same `AuthScreen`, so the common path does not jump when one
- *   replaces another.
- * - The keys are the contract — `AuthState` is derived from them, so adding a state here is all it
- *   takes for the route to accept and render it.
- * - Components, not render functions, so this module holds no JSX and stays the one place the
- *   route's search param is validated.
+ * - `AuthState` derives from the keys: a state added here is accepted and rendered by the route.
+ * - Components, not render functions, so this module holds no JSX.
  */
 export const AUTH_STATES = {
   'signed-out': { title: 'Sign in', body: SignInForm },
@@ -53,6 +37,6 @@ export const AUTH_STATES = {
 
 export type AuthState = keyof typeof AUTH_STATES;
 
-/** Narrows an unvalidated search param. Anything else is not a state, including `undefined`. */
+/** Narrows an unvalidated search param. */
 export const isAuthState = (value: unknown): value is AuthState =>
   typeof value === 'string' && Object.hasOwn(AUTH_STATES, value);

package/dist/template/src/auth/states.tsx

@@ -1,18 +1,11 @@
 import { Alert, Button, DotsLoader, useAppForm } from '@keboola/design';
 
-/** What every state's body is handed. `onRetry` returns the screen to the sign-in form. */
 type AuthStateProps = { onRetry: () => void };
 
 /**
- * The credential form — the one part that legitimately differs per app.
+ * The credential form — the one part that differs per app.
  *
- * - Presentational on purpose: `onSubmit` reaches no network, because only the app knows what it
- *   authenticates against (password, PAT, OAuth) and what to do with the answer. Replace the body
- *   of `onSubmit`; nothing else in this directory has to move.
- * - `useAppForm` rather than a bare `useForm`: the connectors carry the label, the required marker
- *   and the error slot, so the field markup does not restate them.
- * - `w-full` on the submit: it is the card's only action, so a content-width button reads as one
- *   option among several.
+ * - `onSubmit` reaches no network; each app replaces its body with its own auth.
  */
 export const SignInForm = () => {
   const form = useAppForm({
@@ -37,12 +30,7 @@ export const SignInForm = () => {
   );
 };
 
-/**
- * A persisted session being rehydrated.
- *
- * `aria-live="polite"`: the wait resolves without the reader acting, so the outcome has to be
- * announced rather than found.
- */
+/** A persisted session being rehydrated. */
 export const Restoring = () => (
   <div
     className="tw:flex tw:items-center tw:gap-3 tw:text-sm tw:text-muted-foreground"
@@ -53,12 +41,7 @@ export const Restoring = () => (
   </div>
 );
 
-/**
- * A credential that was accepted once and is not any more.
- *
- * `warning`, not `error`: nothing malfunctioned and there is nothing to report — the session ran
- * out, and the fix is one click away.
- */
+/** A credential that was accepted once and is not any more. */
 export const Expired = ({ onRetry }: AuthStateProps) => (
   <>
     <Alert variant="warning">
@@ -73,8 +56,7 @@ export const Expired = ({ onRetry }: AuthStateProps) => (
 /**
  * The service could not be reached, so the credential was never judged.
  *
- * Distinct from `expired` on purpose: telling someone their session expired while the network is
- * down sends them to re-enter a password that would have worked.
+ * - Not `Expired`: that would send the user to re-enter a password that works.
  */
 export const Unavailable = ({ onRetry }: AuthStateProps) => (
   <>

package/dist/template/src/components/AppChrome.tsx

@@ -13,10 +13,8 @@ import { AssistantToggle } from './AssistantToggle';
 import { ColorModeToggle } from './ColorModeToggle';
 import { SidebarModeMenu } from './SidebarModeMenu';
 
-// Chrome is composed inline (not a shared package) so the AppShell/Navbar/Sidebar
-// wiring is legible in this exemplar. The Navbar composition follows kbc-ui's
-// AppSiteHeader — Header (brand) / Content (primary nav) / Footer (actions).
-// The rail's destinations and the active-match rule live in `src/nav.ts`.
+// Composed inline so the AppShell/Navbar/Sidebar wiring stays legible.
+// Navbar follows kbc-ui's AppSiteHeader: Header (brand) / Content (nav) / Footer (actions).
 export function AppChrome({ children }: { children: ReactNode }) {
   const pathname = useRouterState({ select: (s) => s.location.pathname });
   const helpVisible = useAppStore((s) => s.helpVisible);
@@ -29,62 +27,39 @@ export function AppChrome({ children }: { children: ReactNode }) {
 
   return (
     <SidebarProvider
-      // Left rail — app navigation.
-      // - Controlled: the mode is a persisted user preference, and the store is its
-      //   single owner. `SidebarModeMenu` in the rail's footer writes it.
+      // Controlled: the store owns the persisted mode; `SidebarModeMenu` writes it.
       leftMode={sidebarMode}
       onLeftModeChange={setSidebarMode}
       leftVariant="inset"
-      // `icon` collapse keeps every destination reachable; `off-canvas` would hide them
-      // all. It is also what `expand-on-hover` collapses to between hovers.
+      // Keeps every destination reachable; also what `expand-on-hover` collapses to.
       leftCollapsible="icon"
       // #region block:assistant
-      // Right rail — the assistant. `rightVariant` is required: a `Sidebar` whose variant
-      // is `none` (the provider's default) renders NOTHING, silently, so configuring only
-      // the left side makes the assistant disappear with no error. Mirrors kbc-ui's Kai
-      // rail, which uses the same pair.
+      // Required: variant `none` (the default) renders nothing, silently.
       rightVariant="sided-floating"
       rightCollapsible="off-canvas"
-      // Closed until asked for. The assistant being *available* on every route is
-      // the point; holding ~30% of the viewport open on a transcript nobody has
-      // started is not. The Navbar's AssistantToggle opens it (and badges unread
-      // replies seeded from the page's prompt while it's shut).
+      // Closed until the Navbar's AssistantToggle opens it.
       defaultRightMode="collapsed"
-      // Matches kbc-ui's Kai rail. The provider's default is narrower than a chat
-      // transcript wants — message bubbles wrap after a few words at that width.
+      // The provider default is too narrow for chat; matches kbc-ui's Kai rail.
       rightWidth={384}
       // #endregion block:assistant
     >
-      {/* `headerSpan="full"` puts the header above both rails so the brand mark aligns to
-          the viewport's left edge — the geometry kbc-ui uses. Without it the left rail
-          owns the top-left corner and the bar starts beside it. */}
+      {/* Header above both rails, so the brand mark aligns to the viewport edge. */}
       <AppShell headerSpan="full">
-        {/* `flush` drops the slot's padding, background AND bottom border, so the Navbar
-            renders edge to edge. The border is restated here.
-            - Both rails below carry a hairline; without a matching edge under the header
-              those lines start mid-air instead of closing a frame.
-            - `sidebar-border`, not `border`: the two meet at the corners, and `border`
-              is 4 units lighter. */}
+        {/* `flush` drops padding, background and bottom border; the border is restated:
+            - It closes the frame the rails' hairlines start.
+            - `sidebar-border`, not `border`: they meet at the corners, `border` is lighter. */}
         <AppShell.Header flush className="tw:border-b tw:border-sidebar-border">
-          {/* `flex-1` makes the bar fill the header — as a flex item it would otherwise
-              shrink to its content width. */}
+          {/* As a flex item the bar would otherwise shrink to its content. */}
           <Navbar bordered className="tw:flex-1">
-            {/* Extra left gutter, set here rather than on `Navbar`: the bar's own
-                `pl-2` comes from a cva, which concatenates instead of tailwind-merging,
-                so a competing `pl-*` there would be settled by cascade order. This slot
-                merges with `cn`. The DS default is tuned for the header sitting beside
-                the rail; with `headerSpan="full"` the logo would otherwise hug the
-                viewport edge instead of lining up with the rail's icons below it.
-                `pl-2.5` on top of the bar's `pl-2` puts the logo at 18px — the same
-                x as the rail's icons, measured rather than guessed. */}
+            {/* Gutter here, not on `Navbar`: the bar's `pl-2` comes from a cva, which doesn't
+                tailwind-merge. With it the logo sits at 18px, aligned with the rail's icons. */}
             <Navbar.Header className="tw:pl-2.5">
               <Link to="/" aria-label="Home" className="tw:flex tw:items-center">
                 <BrandLogo className="tw:h-6" />
               </Link>
             </Navbar.Header>
 
-            {/* Navbar.Content is the flexible middle band: it carries `flex-1` inside the
-                bar, so it is what pushes Navbar.Footer out to the right edge. */}
+            {/* Carries `flex-1`, pushing Navbar.Footer to the right edge. */}
             <Navbar.Content>
               <Navbar.Menu marker="forward-slash">
                 <Navbar.MenuItem>
@@ -113,31 +88,20 @@ export function AppChrome({ children }: { children: ReactNode }) {
         </AppShell.Header>
 
         <AppShell.Sidebar>
-          {/* Elevation while `expand-on-hover` is hovered open. That mode widens the rail
-              without widening the column it occupies, so the expanded rail overlays the
-              page, and `inset`'s 1px `border-r` does not read as "above".
-
-              App-scoped rather than a `Sidebar` variant rule: kbc-ui runs this mode by
-              default and paints its own corner over the rail's right edge with tuned
-              `::before` / `::after` wedges, so a shadow from the design side would land
-              on that seam unreviewed. Promote it once that composition has been looked
-              at in a browser. */}
+          {/* Elevation while `expand-on-hover` is open: the rail overlays the page.
+              - App-scoped, not a `Sidebar` variant: kbc-ui paints `::before`/`::after` wedges on
+                that edge. Promote once reviewed there. */}
           <Sidebar
             side="left"
             className="tw:group-data-[mode=expand-on-hover]/sidebar:group-data-[state=expanded]/sidebar:[&>[data-slot=sidebar]]:shadow-lift"
           >
             <Sidebar.Content>
-              {/* AppShell.Sidebar and Sidebar are plain divs, so without this the rail's
-                  links sit outside any landmark — axe flags the content as unreachable by
-                  landmark navigation. Labelled distinctly from the Navbar's "Main
-                  navigation" so the two are tellable apart in a landmark list. */}
+              {/* The rail's landmark (axe); labelled apart from the Navbar's "Main navigation". */}
               <nav aria-label="Sections">
                 <Sidebar.Menu>
                   {NAV.map((item) => (
                     <Sidebar.MenuItem key={item.to}>
-                      {/* The slot renders an <a>, so the active state is `aria-current="page"`
-                        — `aria-selected` is not a supported attribute on a link. Both get
-                        the same active styling from Sidebar.MenuButton. */}
+                      {/* A link takes `aria-current`, not `aria-selected`. */}
                       <Sidebar.MenuButton
                         asChild
                         tooltip={item.label}
@@ -156,8 +120,7 @@ export function AppChrome({ children }: { children: ReactNode }) {
               </nav>
             </Sidebar.Content>
 
-            {/* Footer, not Content: `Sidebar.Content` is the scroll container, so a
-                control inside it scrolls away with the nav. The footer is pinned. */}
+            {/* Footer, not Content: `Sidebar.Content` scrolls, the footer is pinned. */}
             <Sidebar.Footer>
               <Sidebar.Menu>
                 <SidebarModeMenu />
@@ -168,23 +131,12 @@ export function AppChrome({ children }: { children: ReactNode }) {
 
         <AppShell.Main>{children}</AppShell.Main>
         {/* #region block:assistant */}
-        {/* The assistant is chrome, not a page feature: it rides every route. In normal
-            use it is the right rail; fullscreen adds it as a sibling overlay after
-            AppShell (it renders its own `tw:fixed tw:inset-0 tw:z-50`) instead of
-            replacing the rail, so exiting fullscreen returns to the page underneath.
-            Render exactly one instance per mode — the rail is omitted from the Aside
-            slot while fullscreen, so the two never appear at once. */}
+        {/* The assistant rides every route, one instance per mode:
+            - Normal: the right rail.
+            - Fullscreen: a fixed overlay after AppShell, no rail; exit returns to the page. */}
         {!fullscreen && (
-          // The right rail is a `Sidebar`, not a bare div: it brings the width, border,
-          // scroll container and a drag-to-resize handle, so the panel doesn't reimplement
-          // them. `flush` stops the slot painting a second surface underneath it. Same
-          // composition kbc-ui uses for its Kai rail.
-          // The parked `off-canvas` rail used to need `overflow-x-clip` here. The
-          // design system now clips this slot itself while the rail is collapsed
-          // (see `styles.css`), which an unconditional class could not do safely:
-          // a filled rail widens past the slot and would be cropped. The two are
-          // therefore coupled — reverting that rule alone brings the horizontal
-          // scroll back here, so restore this class if you ever do.
+          // `Sidebar` brings width, border, scroll and resize; `flush` avoids a second surface.
+          // `styles.css` clips this slot while collapsed; without that rule, add `overflow-x-clip`.
           <AppShell.Aside flush>
             <Sidebar side="right" container resizable>
               <AssistantPanel />

package/dist/template/src/components/SelectionFloater.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import type { RefObject } from 'react';
+import type { CSSProperties, RefObject } from 'react';
 
 import { Button } from '@keboola/design';
 
@@ -78,8 +78,15 @@ export function SelectionFloater({
     <Button
       variant="secondary"
       size="small"
-      className="tw:fixed tw:z-50"
-      style={{ top: selection.top - 40, left: selection.left }}
+      className="tw:fixed tw:top-(--floater-top) tw:left-(--floater-left) tw:z-50"
+      // Custom properties, not inline `top`/`left`: the utilities above read them,
+      // and the position is measured from the live selection at runtime.
+      style={
+        {
+          '--floater-top': `${selection.top - 40}px`,
+          '--floater-left': `${selection.left}px`,
+        } as CSSProperties
+      }
       onClick={handleClick}
     >
       Explain with Kai

package/dist/template/src/components/SidebarModeMenu.tsx

@@ -9,14 +9,12 @@ const MODES: { value: SidebarMode; label: string }[] = [
 ];
 
 /**
- * Picks the left rail's mode. All three come from `SidebarProvider`.
+ * Picks the left rail's mode.
  *
- * - `expand-on-hover` is a mode of its own, not `collapsed` plus a hover handler: the
- *   rail reports `mode="expand-on-hover"` while its `state` flips on hover. Styling that
- *   distinguishes "the user collapsed this" from "collapsed until hovered" reads `mode`.
- * - A radio group, not a cycling button: three modes have no natural next, and the menu
- *   shows which is active without clicking through.
- * - `setMode` writes through `onLeftModeChange` into the app store, which persists it.
+ * - `expand-on-hover` is its own mode: `state` flips on hover, so styling that tells it from
+ *   `collapsed` reads `mode`.
+ * - A radio group, not a cycling button: three modes have no natural next.
+ * - `setMode` persists through `onLeftModeChange` into the app store.
  */
 export function SidebarModeMenu() {
   const { setMode, mode } = useSidebar('left');
@@ -25,8 +23,7 @@ export function SidebarModeMenu() {
     <Sidebar.MenuItem>
       <DropdownMenu>
         <DropdownMenu.Trigger asChild>
-          {/* `w-fit` keeps the trigger icon-sized rather than rail-wide, so it holds its
-              position when the rail collapses to icons. */}
+          {/* `w-fit` holds the trigger in place when the rail collapses. */}
           <Sidebar.MenuButton
             tooltip="Sidebar mode"
             className="tw:w-fit"
@@ -34,12 +31,10 @@ export function SidebarModeMenu() {
             aria-label="Sidebar mode"
           />
         </DropdownMenu.Trigger>
-        {/* `align="start"` — the trigger sits at the rail's left edge, so a centered
-            menu would hang off the viewport when the rail is collapsed. */}
+        {/* A centered menu would hang off the viewport when the rail is collapsed. */}
         <DropdownMenu.Content align="start">
           <DropdownMenu.Label>Sidebar mode</DropdownMenu.Label>
-          {/* `RadioGroup` is generic over its value: `value={mode}` pins it to
-              `SidebarMode`, so `setMode` slots in without a cast. */}
+          {/* `value={mode}` types the group as `SidebarMode`, so `setMode` needs no cast. */}
           <DropdownMenu.RadioGroup value={mode} onValueChange={setMode}>
             {MODES.map(({ value, label }) => (
               <DropdownMenu.RadioItem key={value} closeOnSelect indicatorAlign="end" value={value}>

package/dist/template/src/nav.ts

@@ -11,12 +11,9 @@ export type NavItem = { to: string; label: string; icon: ComponentType };
 /**
  * The left rail's destinations, in render order.
  *
- * - `as const` keeps each `to` a literal. `Link`'s `to` is typed against the generated
- *   route tree, so a widened `string` fails type-check at the call site.
- * - `satisfies` checks the shape without erasing those literals.
- * - Icons render with no props (`<item.icon />`).
- * - Each block contributes its own entry from a module the block owns, so a deselected block
- *   takes its import with it.
+ * - `as const` keeps each `to` literal for `Link`'s route-typed `to`; `satisfies` won't widen it.
+ * - Icons render with no props.
+ * - Each block owns its entry, so a deselected block takes its import with it.
  */
 export const NAV = [
   { to: '/', label: 'Overview', icon: LayoutDashboard },
@@ -29,10 +26,8 @@ export const NAV = [
  * Whether `to` is the active destination for `pathname`.
  *
  * - The root matches exactly.
- * - Any other item stays active on its nested routes, matching Router's default
- *   non-exact `Link` behaviour.
- * - A sibling that merely shares the prefix (`/tokens-archive` under `/tokens`) is not
- *   nested — hence the `/` in the boundary check.
+ * - Others stay active on nested routes, like Router's non-exact `Link`.
+ * - The `/` boundary keeps `/tokens-archive` from matching `/tokens`.
  */
 export const isActive = (pathname: string, to: string) =>
   to === '/' ? pathname === '/' : pathname === to || pathname.startsWith(`${to}/`);

package/dist/template/src/overview-fixtures.ts

@@ -1,7 +1,5 @@
-// In-memory stand-in for a real overview endpoint. Swap `fetchOverview` for the
-// api-client call (e.g. `api.metrics.overview(signal)`) and delete this file.
-// The call takes an AbortSignal and honors it, so the query hook threads
-// cancellation exactly as it would against a real client — see overview-hooks.ts.
+// In-memory stand-in for an overview endpoint; swap `fetchOverview` for the api-client call.
+// It honors its AbortSignal like a real client — see overview-hooks.ts.
 
 export type Kpi = {
   label: string;
@@ -33,16 +31,10 @@ const OVERVIEW: Overview = {
     { label: 'Job success rate', value: '98.7%', deltaPct: 0.3 },
     { label: 'Storage used', value: '1.4 TB', deltaPct: 4.2 },
     { label: 'Active configurations', value: '312', deltaPct: 2.1 },
-    // No delta on purpose: `KpiCard` paints a rise green, which is the wrong
-    // signal for a cost. Leaving it off also exercises the optional branch.
+    // No delta: `KpiCard` paints a rise green, wrong for a cost.
     { label: 'Credits this month', value: '8,420' },
   ],
-  // Two series of the same order of magnitude, so they read against one linear
-  // axis. Pairing a ~60k series with a ~1k one renders the small one as a flat
-  // line on the floor — a chart that looks informative and isn't.
-  //
-  // Consumption climbs from a low base, so a zero baseline is honest *and* uses
-  // the plot: the story is the gap to the ceiling closing month over month.
+  // Same order of magnitude, so both read on one linear axis from zero.
   credits: [
     { month: 'Jan', used: 4200, budgeted: 8000 },
     { month: 'Feb', used: 5100, budgeted: 8000 },
@@ -51,9 +43,7 @@ const OVERVIEW: Overview = {
     { month: 'May', used: 7600, budgeted: 8500 },
     { month: 'Jun', used: 8420, budgeted: 8500 },
   ],
-  // The grid *is* the budget the chart plots: each month's column sums to that
-  // month's `budgeted` value above (8000 ×3, then 8500 ×3). Fixtures that don't
-  // reconcile are the fastest way to make a demo look fake.
+  // Each month's column sums to that month's `budgeted` above.
   budget: [
     {
       id: 'ex-db',
@@ -82,9 +72,7 @@ const OVERVIEW: Overview = {
   ],
 };
 
-// Simulates a network round-trip that resolves after `ms`, or rejects the moment
-// an AbortSignal fires — mirroring how a real fetch-based client aborts in-flight
-// when TanStack Query cancels the query.
+// Resolves after `ms`; rejects when the signal aborts, like a fetch-based client.
 const delay = (ms: number, signal?: AbortSignal): Promise<void> =>
   new Promise((resolve, reject) => {
     if (signal?.aborted) {

package/dist/template/src/recipes/Chart.test.tsx

@@ -13,9 +13,7 @@ it('renders the chart card title and legend labels', () => {
         { month: 'Jan', mrr: 10 },
         { month: 'Feb', mrr: 12 },
       ]}
-      // recharts' <ResponsiveContainer> only renders once it measures a
-      // non-zero size via ResizeObserver, which jsdom never provides — an
-      // explicit width keeps the chart (and its legend) deterministic.
+      // jsdom never sizes recharts' <ResponsiveContainer>, so it would render nothing.
       width={400}
     />,
   );

package/dist/template/src/recipes/Chart.tsx

@@ -1,10 +1,8 @@
 import { Card } from '@keboola/design';
 import { type ChartColorToken, LineChart } from '@keboola/design/charts';
 
-// Token-aware chart recipe — colors come from CSS vars (semantic/brand tokens),
-// never hex, so it re-themes with the active brand. `LineChartCard` is a thin
-// app-level card wrapper over the DS `@keboola/design/charts` `LineChart`.
-// The chart palette slots the DS exposes; narrowed so a typo is a compile error.
+// Colors come from DS palette tokens, never hex, so the chart re-themes with the brand.
+// Narrowed so a typo is a compile error.
 type ChartTokenVar = '--chart-1' | '--chart-2' | '--chart-3' | '--chart-4' | '--chart-5';
 
 type Series = { key: string; label: string; tokenVar: ChartTokenVar };
@@ -14,16 +12,11 @@ type LineChartCardProps = {
   data: readonly Record<string, number | string>[];
   xKey: string;
   series: readonly Series[];
-  // Forwarded to the DS `LineChart` only when set; otherwise its responsive
-  // `width="100%"` default applies. Tests pass an explicit size — recharts'
-  // <ResponsiveContainer> only renders once it measures a non-zero size via
-  // ResizeObserver, which jsdom never provides.
+  // Unset → responsive `width="100%"`. Tests set it: jsdom never sizes <ResponsiveContainer>.
   width?: number;
 };
 
-// Maps a `--chart-N` token var name to the design system's `--color-chart-N`
-// palette slot (1–5). `LineChart` resolves colors from this slot internally —
-// it never accepts a raw CSS var or hex value.
+// `LineChart` takes a palette slot (1–5), never a raw CSS var or hex.
 const CHART_COLOR_SLOTS: Record<ChartTokenVar, ChartColorToken> = {
   '--chart-1': 1,
   '--chart-2': 2,

package/dist/template/src/recipes/DataGrid.tsx

@@ -11,19 +11,14 @@ import { NumberInput, Table } from '@keboola/design';
 import type { BudgetRow } from '../overview-fixtures';
 import { BUDGET_MONTHS } from '../overview-fixtures';
 
-// Instantiates the DS editable-grid recipe (`Table.DataGridRecipe` story,
-// `EditableDataGrid`): TanStack Table v8 (headless) for the column/row model,
-// design `Table` for styling, design `NumberInput` as the editable cell, with a
-// live-computed row total column and footer grand total.
+// Instance of the DS editable-grid recipe (`Table.DataGridRecipe` story, `EditableDataGrid`).
 const sum = (xs: number[]) => xs.reduce((a, b) => a + b, 0);
 
 const columnHelper = createColumnHelper<BudgetRow>();
 
 export function CreditBudgetGrid({ rows }: { rows: BudgetRow[] }) {
-  // Server data seeds local edit state, re-seeding when a fetch returns new rows.
-  // Adjusted during render rather than in an effect: an effect would commit the
-  // stale rows first and repaint, and React documents this as the way to reset
-  // state on a prop change (design's own SidebarProvider does the same).
+  // Re-seeds edit state when `rows` changes.
+  // During render, not in an effect: an effect would paint the stale rows first.
   const [data, setData] = useState<BudgetRow[]>(rows);
   const [seed, setSeed] = useState<BudgetRow[]>(rows);
   if (seed !== rows) {
@@ -113,17 +108,8 @@ export function CreditBudgetGrid({ rows }: { rows: BudgetRow[] }) {
                     ? 'tw:min-w-52'
                     : cell.column.id === 'total'
                       ? 'tw:text-right tw:tabular-nums'
-                      : // Wide enough for the editor, not just the number. `NumberInput`
-                        // carries 16px of padding on each side, so a `w-20` (80px) cell
-                        // minus the `px-3` gutter left ~22px of text box — enough to
-                        // render "8" and silently hide the "00" of 800.
-                        //
-                        // `min-w`, not `w`: a width is only a hint, and a `w-full` table
-                        // squeezed by the assistant rail compresses past it and clips the
-                        // inputs again. A floor makes the table outgrow its container
-                        // instead, which the wrapper's `overflow-x-auto` then scrolls — a
-                        // single-line input can't be scrolled by eye, so its value has to
-                        // stay fully visible at any container width.
+                      : // Fits `NumberInput`'s 16px side padding; narrower clips "800" to "8".
+                        // `min-w`, not `w`: a squeezed table then scrolls instead of clipping.
                         'tw:min-w-28'
                 }
               >

package/dist/template/src/routes/__root.tsx

@@ -13,19 +13,12 @@ export const Route = createRootRoute({
 
 function RootLayout() {
   // #region block:auth
-  // The signed-out screen replaces the chrome instead of rendering inside it.
-  //
-  // - A visitor with no session must see no rail, no breadcrumb and no history.
-  // - Nesting it would also give the page a second `header`/`main` pair inside AppChrome's, which
-  //   axe reports as duplicate landmarks.
-  // - Decided here because the root layout is the only component both branches share, and
-  //   TanStack nests every file route under it.
-  // - The preflight scope is restated even though `AuthScreen` carries its own: that scope is a
-  //   class on an element, so it does not reach `Toaster` beside it, and design's preflight is
-  //   opt-in. Measured outside it, a bare `button` gets a 2px outset border and Arial 13.3px.
-  // - The blank line above the region's closing marker is inside the region on purpose. Left
-  //   outside, it becomes the whole body of an app generated without this block, and that app's
-  //   `oxfmt --check` fails on a file nobody wrote.
+  // The signed-out screen replaces the chrome instead of nesting in it.
+  // - No session → no rail, breadcrumb or history.
+  // - Nesting would duplicate AppChrome's `header`/`main` landmarks (axe).
+  // - Preflight is restated: `AuthScreen`'s own scope does not reach `Toaster` beside it.
+  // - The blank line before the closing marker must stay inside the region, or an app generated
+  //   without this block fails `oxfmt --check`.
   const isAuthRoute = useIsAuthRoute();
   if (isAuthRoute) {
     return (

package/dist/template/src/routes/signed-out.tsx

@@ -7,13 +7,9 @@ import { AUTH_ROUTE, AUTH_STATES, isAuthState } from '../auth/session';
 /**
  * `/signed-out` — the pre-project screen.
  *
- * - `?state=` stands in for the app's session status, so all four states are reachable in a
- *   browser and in the UI gate without a backend. A real app drops the search param and picks the
- *   state from its session hook; nothing in `auth/` changes when it does.
- * - `validateSearch` narrows by hand rather than through a schema. One optional enum does not
- *   need a validation library, and the block deliberately carries no dependency of its own.
- * - An unknown or missing `state` falls back to the sign-in form rather than throwing: this is the
- *   screen a visitor lands on with no session, so it has to render whatever the URL says.
+ * - `?state=` stands in for the session hook, so every state renders without a backend.
+ * - `validateSearch` narrows by hand: the block carries no validation dependency.
+ * - An unknown or missing `state` falls back to sign-in rather than throwing.
  */
 export const Route = createFileRoute('/signed-out')({
   validateSearch: (search: Record<string, unknown>): { state: AuthState } => ({

package/dist/template/src/sections/kpi.tsx

@@ -6,11 +6,8 @@ import type { OverviewSection } from '../overview-sections';
 /** The overview's KPI row: one card per figure. */
 export const kpiSection: OverviewSection = {
   id: 'kpi',
-  // Reflows on this column's own width, not the viewport's. A `lg:grid-cols-4` here
-  // would keep four columns while the assistant rail squeezes the page to a third of
-  // it — the rail narrows content without changing the viewport, so viewport
-  // breakpoints lie. `auto-fit` + a `minmax` floor drops to three, two, then one
-  // column as room runs out.
+  // Reflows on column width, not viewport: the assistant rail narrows the page
+  // without changing the viewport, so `lg:` breakpoints would lie.
   render: (overview) => (
     <div
       data-section="kpi"
@@ -21,8 +18,7 @@ export const kpiSection: OverviewSection = {
       ))}
     </div>
   ),
-  // Four placeholders because four KPIs are coming — a skeleton that does not match
-  // the shape it stands in for makes the page jump on load.
+  // Four slots to match the four KPIs, so the page does not jump on load.
   renderSkeleton: () => (
     <div
       data-section-skeleton="kpi"