create-keboola-app 0.1.0 → 0.2.0

package/CHANGELOG.md

@@ -1,10 +1,72 @@
 # create-keboola-app
 
+## 0.2.0
+
+### Minor Changes
+
+- New `auth` block: a generated app can now arrive with its signed-out screen already built.
+
+  Four apps in the platform hand-build the same pre-auth screen, and a Storybook pattern does not
+  stop a fifth from doing it again — new apps come from this generator, so that is where the screen
+  has to arrive. Pick `auth` and the app gets `/signed-out`, rendered without the app chrome: brand
+  lockup from `BrandLogo`, one centred card, a colour-scheme control, correct landmarks and heading
+  level, and the four pre-project states — signed out, restoring, expired, service unreachable —
+  under one piece of chrome, so the common path does not jump when one replaces another. The
+  emitted `gate:ui` scores that route as well as `/`.
+
+  The block is the screen and nothing behind it: no dependency, no network. Only the app knows what
+  it authenticates against, so wiring it up is two edits — the form's `onSubmit`, and where the
+  state comes from instead of the `?state=` search param. `--blocks none` still yields an app that
+  builds, type-checks and passes its own gate.
+
+  A routed block now brings the whole brief for its own route rather than a shared suffix. The
+  suffix described a searchable table, which graded a signed-out screen against qualities it is
+  supposed not to have.
+
+- A generated app keeps `src/routes/` for route files. Everything else — hooks, fixtures, types, a
+  module's rail entry — arrives in a domain directory beside it.
+
+  TanStack Router excludes a file from the route tree when its name starts with `-`, and the
+  emitted layout leaned on that to keep a module's code inside its route folder. It does not scale:
+  one app grew to six route files and fifty-four dashed ones, and route folders that own domain code
+  end up importing across each other, which is the coupling the co-location was meant to prevent. A
+  marker on nine files out of ten marks nothing.
+
+  So the crud block now emits `routes/<kebab>/{index,new,$id}.tsx` and `<kebab>/{hooks,fixtures,
+types,nav}.ts`, and the overview's hooks and fixtures sit at `src/overview-*.ts`. Nothing emitted
+  carries the `-` prefix.
+
+  A route's test is the one thing that stays with its route, because that is the file it exercises.
+  It exports no `Route`, so the emitted `vite.config.ts` declares
+  `routeFileIgnorePattern: '\\.test\\.tsx?$'`. Without it the generator prints a
+  `does not export a Route` warning for every such file on every build, which is what makes the
+  prefix feel obligatory in the first place. The CLI passes the same pattern when it writes the
+  first `routeTree.gen.ts`, which happens before the app has a Vite build to read the config from.
+
+## 0.1.1
+
+### Patch Changes
+
+- A generated app pins `nwsapi`, so a userEvent test does not hang.
+
+  nwsapi 2.2.26 — jsdom's selector engine — answers `:modal`, `:fullscreen` and `:open` through a helper that falls back to the element's own `matches`. Under jsdom that is nwsapi itself, so the two recurse, and `:modal` doubles the work per level through its `|| isFullscreen` branch. `@floating-ui/dom` probes `:modal` on every popper placement, which is once per dropdown or tooltip interaction: measured at 9s where 2.2.25 takes 26ms, so a test driving a menu with `userEvent` hits its timeout instead of asserting.
+
+  Generated apps now ship a `pnpm-workspace.yaml` holding `nwsapi` at 2.2.25 — the only file pnpm reads `overrides` from. It carries the reason and the condition for removing it.
+
+- Name the generated app in its own chrome. The breadcrumb was hard-coded to the template's own
+  name, so every scaffold shipped labelled after the template rather than the name the user passed
+  — the first thing on screen, and the one place the app names itself back to the reader. The
+  extract step now parameterises it alongside the page title and the store's storage keys.
+
+  A `boilerplate-identity` sanitize pattern makes this class of leak a red build instead of a
+  silent default: any un-templated mention of the source app's name fails extraction, so a rewrite
+  that stops matching is caught rather than shipped.
+
 ## 0.1.0
 
 ### Minor Changes
 
-- [#8229](https://github.com/keboola/ui/pull/8229) [`67848b3`](https://github.com/keboola/ui/commit/67848b3b89cc39b40f7c47edca838dcc9c0411dc) Thanks [@Mystypix](https://github.com/Mystypix)! - Initial release. `npm create keboola-app` scaffolds a Keboola-shaped frontend app — Vite,
+- Initial release. `npm create keboola-app` scaffolds a Keboola-shaped frontend app — Vite,
   React 19, TanStack Router/Query/Form, Zustand, `@keboola/design` with
   `@keboola/brand-registry`, oxlint/oxfmt and vitest — from a minimal shell plus the blocks you
   pick: `kpi`, `chart`, `grid`, `crud`, `assistant`. Blocks are independent, so any combination
@@ -19,6 +81,6 @@
 
 ### Patch Changes
 
-- [#8233](https://github.com/keboola/ui/pull/8233) [`6c449f9`](https://github.com/keboola/ui/commit/6c449f9ed8024551aaaf2a8b3a24ed109f7d263d) Thanks [@Mystypix](https://github.com/Mystypix)! - In `--workspace` mode the generated app inherits the host repo's `engines`, and the monorepo entry point is `pnpm scaffold:app`.
+- In `--workspace` mode the generated app inherits the host repo's `engines`, and the monorepo entry point is `pnpm scaffold:app`.
 
   The template carries a standalone `engines.node` floor for apps generated outside a monorepo. Inside one that floor is not a default but a disagreement: it was the lowest value across every workspace, so syncpack wanted to rewrite the other 21 manifests and `pnpm deps:check` went red on a freshly scaffolded app. Workspace mode now reads the root manifest's `engines` instead, and the gate asserts it.

package/README.md

@@ -25,22 +25,27 @@ npm create keboola-app -- --name my-app --blocks kpi,grid --yes --json
 
 ## Blocks
 
-| Block       | What you get                                                                           |
-| ----------- | -------------------------------------------------------------------------------------- |
-| `kpi`       | A KPI card row on the overview.                                                        |
-| `chart`     | A token-themed line chart card on the overview.                                        |
-| `grid`      | An editable per-row budget grid (TanStack Table + design `Table`).                     |
-| `crud`      | A list → detail → form slice over `/tokens`, exercising router params, Query and Form. |
-| `assistant` | A docked assistant rail, a page composer and an explain-on-selection floater.          |
+| Block       | What you get                                                                              |
+| ----------- | ----------------------------------------------------------------------------------------- |
+| `kpi`       | A KPI card row on the overview.                                                           |
+| `chart`     | A token-themed line chart card on the overview.                                           |
+| `grid`      | An editable per-row budget grid (TanStack Table + design `Table`).                        |
+| `crud`      | A list → detail → form slice over `/tokens`, exercising router params, Query and Form.    |
+| `assistant` | A docked assistant rail, a page composer and an explain-on-selection floater.             |
+| `auth`      | A signed-out screen at `/signed-out`, with the restoring, expired and unreachable states. |
 
 Every block is independent — none imports another, so any combination compiles. Blocks are
 additive: pick what you need rather than taking everything and deleting, since an unpicked
 block costs no files and pulls none of its npm dependencies.
 
-Blocks join the shell through three files the generator writes rather than patches:
-`src/nav.ts` (the nav tuple), `src/overview-sections.tsx` (the ordered section registry) and
-`src/store.ts` (the shell slice plus the selected block slices). Add a section to a generated
-app by editing those, not the app chrome.
+Blocks join the shell through four files the generator writes rather than patches: `src/nav.ts`
+(the nav tuple), `src/overview-sections.tsx` (the ordered section registry), `src/store.ts` (the
+shell slice plus the selected block slices) and `src/routes/__root.tsx` (whether a route gets the
+app chrome). Add a section to a generated app by editing those, not the app chrome.
+
+`auth` is the screen and nothing behind it. It renders with no dependency and reaches no network,
+because only your app knows what it authenticates against — swap the form's `onSubmit` and pick
+the state from your session instead of from the `?state=` search param.
 
 ## Naming
 

package/dist/{blocks-DYU5Ke29.js → blocks-D_-NWhwg.js}

@@ -4,7 +4,8 @@ const BLOCK_IDS = [
 	"chart",
 	"grid",
 	"crud",
-	"assistant"
+	"assistant",
+	"auth"
 ];
 const isBlockId = (value) => BLOCK_IDS.includes(value);
 const BLOCKS = {
@@ -55,19 +56,19 @@ const BLOCKS = {
 		label: "CRUD slice",
 		summary: "List → detail → form over `/tokens`: router params, Query and Form in one flow.",
 		files: [
-			"src/routes/tokens/-fixtures.test.ts",
-			"src/routes/tokens/-fixtures.ts",
-			"src/routes/tokens/-hooks.ts",
-			"src/routes/tokens/-index.test.tsx",
-			"src/routes/tokens/-nav.ts",
-			"src/routes/tokens/-types.ts",
 			"src/routes/tokens/$id.tsx",
+			"src/routes/tokens/index.test.tsx",
 			"src/routes/tokens/index.tsx",
-			"src/routes/tokens/new.tsx"
+			"src/routes/tokens/new.tsx",
+			"src/tokens/fixtures.test.ts",
+			"src/tokens/fixtures.ts",
+			"src/tokens/hooks.ts",
+			"src/tokens/nav.ts",
+			"src/tokens/types.ts"
 		],
 		deps: ["@tanstack/react-form", "zod"],
 		glue: ["src/nav.ts"],
-		brief: "a list page reachable from the rail",
+		brief: "tokens list page: on-brand @keboola/design shell, a searchable table of API tokens, no runtime or a11y errors",
 		route: "/tokens"
 	},
 	assistant: {
@@ -87,6 +88,24 @@ const BLOCKS = {
 		glue: ["src/store.ts"],
 		brief: "a prompt input and a docked assistant rail",
 		route: null
+	},
+	auth: {
+		id: "auth",
+		label: "Signed-out screen",
+		summary: "The pre-project screen: brand lockup, one centred card, and the signed-out, restoring, expired and unreachable states.",
+		files: [
+			"src/auth/AuthScreen.test.tsx",
+			"src/auth/AuthScreen.tsx",
+			"src/auth/session.test.tsx",
+			"src/auth/session.ts",
+			"src/auth/states.tsx",
+			"src/routes/signed-out.test.tsx",
+			"src/routes/signed-out.tsx"
+		],
+		deps: [],
+		glue: ["src/routes/__root.tsx"],
+		brief: "signed-out screen: a brand lockup over one centred sign-in card on a muted page, no navigation rail and no breadcrumb, a colour-scheme control in the corner, no runtime or a11y errors",
+		route: "/signed-out"
 	}
 };
 /** Files every emitted app carries, whatever the selection. */
@@ -103,12 +122,12 @@ const SHELL_FILES = [
 	"src/main.tsx",
 	"src/nav.test.ts",
 	"src/nav.ts",
+	"src/overview-fixtures.ts",
+	"src/overview-hooks.ts",
 	"src/overview-sections.test.tsx",
 	"src/overview-sections.tsx",
-	"src/routes/-fixtures.ts",
-	"src/routes/-hooks.ts",
-	"src/routes/-index.test.tsx",
 	"src/routes/__root.tsx",
+	"src/routes/index.test.tsx",
 	"src/routes/index.tsx",
 	"src/slices/shell.ts",
 	"src/store.test.tsx",

package/dist/cli.js

@@ -1,5 +1,5 @@
 #!/usr/bin/env node
-import { a as isBlockId, n as BLOCK_IDS, o as ownerOf, t as BLOCKS } from "./blocks-DYU5Ke29.js";
+import { a as isBlockId, n as BLOCK_IDS, o as ownerOf, t as BLOCKS } from "./blocks-D_-NWhwg.js";
 import { a as substitute, i as renderRegions, n as assertNoMarkers, r as blockIdOf } from "./regions-B3r5LhXl.js";
 import { existsSync, mkdirSync, readFileSync, readdirSync, realpathSync, statSync, writeFileSync } from "node:fs";
 import { basename, dirname, join, relative, resolve, sep } from "node:path";
@@ -132,7 +132,9 @@ const evalCommand = (route, brief) => `npx --yes @keboola/ui-gen-bench eval --se
 *
 * - The overview's brief names the blocks that are actually on the page, because the score's
 *   brief-conformance axis marks down a page for missing what the brief promises.
-* - A block with a `route` adds a second invocation for it.
+* - A block with a `route` adds an invocation for it, briefed entirely by the block. The
+*   conformance axis is graded against this text, so a shared suffix here would grade every
+*   routed block against one page's qualities.
 * - Not wired into `test`: it needs a model key, and a first run that fails on a missing
 *   credential is a worse welcome than an opt-in gate.
 */
@@ -143,7 +145,7 @@ const gateUiScript = (appTitle, blocks) => {
 		...clauses,
 		"no runtime or a11y errors"
 	].join(", ");
-	const extras = blocks.filter((id) => BLOCKS[id].route !== null).map((id) => evalCommand(BLOCKS[id].route ?? "/", `${appTitle} ${BLOCKS[id].brief}: on-brand @keboola/design shell, searchable table, no runtime or a11y errors`));
+	const extras = blocks.filter((id) => BLOCKS[id].route !== null).map((id) => evalCommand(BLOCKS[id].route ?? "/", `${appTitle} ${BLOCKS[id].brief}`));
 	return [evalCommand("/", overview), ...extras].join(" && ");
 };
 const walk = (root, dir, out) => {
@@ -196,6 +198,29 @@ const writeManifest = (opts) => {
 	};
 	writeFileSync(join(targetDir, "package.json"), `${JSON.stringify(pkg, null, 2)}\n`);
 };
+/**
+* `pnpm-workspace.yaml` for a standalone app.
+*
+* - It is the only file pnpm 11 reads `overrides` from; the `pnpm` field in `package.json` is
+*   ignored with a warning.
+* - Written only outside a monorepo. Under `--workspace` the app inherits the root's file, and a
+*   nested one would declare a second workspace root inside the first.
+*/
+const writeWorkspaceConfig = (targetDir) => {
+	writeFileSync(join(targetDir, "pnpm-workspace.yaml"), `# pnpm reads \`overrides\` from this file only — the \`pnpm\` field in package.json is ignored.
+overrides:
+  # jsdom's selector engine, held at the last release that does not re-enter itself.
+  #
+  # - 2.2.26 answers \`:modal\`, \`:fullscreen\` and \`:open\` through a \`matchesNative\` helper
+  #   that falls back to the element's own \`matches\` — under jsdom that is nwsapi again, so the
+  #   two recurse, and \`:modal\` doubles the work per level via its \`|| isFullscreen\` branch.
+  # - \`@floating-ui/dom\` probes \`:modal\` on every popper placement, so one dropdown or tooltip
+  #   interaction costs ~9s instead of ~30ms and a userEvent test hits its timeout.
+  # - Remove the pin once nwsapi stops resolving its own \`matches\` back into itself:
+  #   https://github.com/dperini/nwsapi
+  nwsapi: 2.2.25
+`);
+};
 const scaffold = (opts) => {
 	const { templateDir, targetDir, appName, blocks, workspace } = opts;
 	if (existsSync(targetDir)) throw new Error(`${targetDir} already exists. Choose another name or remove the directory first.`);
@@ -231,6 +256,10 @@ const scaffold = (opts) => {
 		packageName
 	});
 	written.push("package.json");
+	if (!workspace) {
+		writeWorkspaceConfig(targetDir);
+		written.push("pnpm-workspace.yaml");
+	}
 	return {
 		path: targetDir,
 		appName,
@@ -287,7 +316,8 @@ const generateRouteTree = async (appDir) => {
 		await new Generator({
 			config: getConfig({
 				quoteStyle: "single",
-				semicolons: true
+				semicolons: true,
+				routeFileIgnorePattern: "\\.test\\.tsx?$"
 			}, appDir),
 			root: appDir
 		}).run();

package/dist/extract.js

@@ -1,4 +1,4 @@
-import { a as isBlockId, i as SHELL_FILES, n as BLOCK_IDS, r as NOT_IN_TEMPLATE, t as BLOCKS } from "./blocks-DYU5Ke29.js";
+import { a as isBlockId, i as SHELL_FILES, n as BLOCK_IDS, r as NOT_IN_TEMPLATE, t as BLOCKS } from "./blocks-D_-NWhwg.js";
 import { i as renderRegions, r as blockIdOf } from "./regions-B3r5LhXl.js";
 import { r as scan, t as formatFindings } from "./sanitize-CKs8pAzZ.js";
 import { cpSync, mkdirSync, readFileSync, readdirSync, rmSync, writeFileSync } from "node:fs";
@@ -47,9 +47,20 @@ const decideRegion = (regionId) => {
 	if (id === null || !isBlockId(id)) throw new Error(`unknown region id "${regionId}" — expected "internal" or "block:<blockId>"`);
 	return "keep-with-markers";
 };
-/** Per-file rewrites that turn boilerplate identity into placeholders. */
+/**
+* Per-file rewrites that turn this app's identity into placeholders.
+*
+* - Every rewrite has a matching assertion in `extract.test.ts`, and the sanitize scan fails
+*   the build on any surviving mention of this app's name — a rewrite that stops matching is
+*   a red build, not a scaffold that quietly names itself after the template.
+* - Match structurally, not by the literal name. The name must not appear here: the packed
+*   tarball is scanned too, and a rewrite that spells its own needle makes the scanner match
+*   its own implementation.
+*/
 const parameterise = (file, text) => {
 	if (file === "index.html") return text.replace(/<title>[^<]*<\/title>/, "<title>__APP_TITLE__</title>");
+	if (file === "src/components/AppChrome.tsx") return text.replace(/(<Link to="\/">)[^<]*(<\/Link>)/, "$1__APP_TITLE__$2");
+	if (file === "src/auth/AuthScreen.tsx") return text.replace(/^const PRODUCT = '[^']*';$/m, "const PRODUCT = '__APP_TITLE__';");
 	if (file === "src/store.ts") return text.replaceAll(/'boilerplate\/([^']+)'/g, "'__APP_NAME__/$1'");
 	return text;
 };

package/dist/template/AGENTS.md

@@ -60,13 +60,14 @@ src/
   routeTree.gen.ts        # Generated from src/routes/** by the Vite plugin
   nav.ts                  # The rail's destinations and the active-match rule
   overview-sections.tsx   # The ordered registry the overview renders
+  overview-hooks.ts       # useOverview, AbortSignal threaded
+  overview-fixtures.ts    # In-memory overview stub — swap for a real client call
   store.ts                # The Zustand store: storage key, partialize, merge guard
   slices/shell.ts         # Sidebar mode + help visibility
   components/AppChrome.tsx  # AppShell + Navbar + Sidebar
-  routes/__root.tsx       # Root layout
+  routes/__root.tsx       # Root layout — and which routes get the app chrome
   routes/index.tsx        # / — the overview
-  routes/-hooks.ts        # useOverview, AbortSignal threaded
-  routes/-fixtures.ts     # In-memory overview stub — swap for a real client call
+  routes/index.test.tsx   # The overview's branches — a route's test sits with the route
 ```
 <!-- #region block:kpi -->
 - `components/KpiCard.tsx`, `sections/kpi.tsx` — the KPI row.
@@ -78,21 +79,34 @@ src/
 - `recipes/DataGrid.tsx`, `sections/grid.tsx` — the editable grid.
 <!-- #endregion block:grid -->
 <!-- #region block:crud -->
-- `routes/tokens/**` — the CRUD slice: `index.tsx`, `$id.tsx`, `new.tsx`, `-hooks.ts`,
-  `-fixtures.ts`, `-types.ts`, `-nav.ts`. **The entity is a placeholder.** Rename it to yours;
-  the fixture rows are labels only.
+- `routes/tokens/**` (`index.tsx`, `$id.tsx`, `new.tsx`) and `tokens/**` (`hooks.ts`,
+  `fixtures.ts`, `types.ts`, `nav.ts`) — the CRUD slice. **The entity is a placeholder.**
+  Rename it to yours; the fixture rows are labels only.
 <!-- #endregion block:crud -->
 <!-- #region block:assistant -->
 - `components/AssistantPanel.tsx`, `AssistantToggle.tsx`, `HomePrompt.tsx`,
   `SelectionFloater.tsx`, `slices/assistant.ts` — the assistant. `slices/assistant.ts`
   answers with a canned reply; swap that branch for a real request.
 <!-- #endregion block:assistant -->
+<!-- #region block:auth -->
+- `auth/AuthScreen.tsx`, `auth/states.tsx`, `auth/session.ts`, `routes/signed-out.tsx` — the
+  signed-out screen. **Presentational: it reaches no network.** Wiring it up is two edits —
+  the form's `onSubmit` in `states.tsx`, and where the state comes from. `routes/__root.tsx`
+  drops the app chrome for this route, so a visitor with no session sees no rail; a real app
+  usually goes further and renders the screen ahead of the router, which `AuthScreen` supports
+  by carrying its own `tailwindcss-preflight` scope.
+<!-- #endregion block:auth -->
 
 ## Adding a route
 
 Drop a file in `src/routes/`. The Vite plugin regenerates `routeTree.gen.ts` on the next
 `pnpm dev` or `pnpm build`; nothing needs registering by hand.
 
+`src/routes/` holds route files and their tests, nothing else. A route's hooks, fixtures,
+types and components live in a domain directory beside it (`src/reports/`), the way
+`src/auth/` and `src/tokens/` do — a non-route module under `src/routes/` is a route the
+generator has to be told to ignore.
+
 ```tsx
 import { createFileRoute } from '@tanstack/react-router';
 

package/dist/template/README.md

@@ -47,6 +47,11 @@ fails for a missing credential is a worse welcome than an opt-in gate.
 - A docked assistant rail on every route, a composer on the overview, and
   explain-on-selection. All three share one transcript.
 <!-- #endregion block:assistant -->
+<!-- #region block:auth -->
+- **`/signed-out`** — the pre-project screen, rendered without the app chrome: brand lockup,
+  one centred card, a colour-scheme control, and the restoring, expired and unreachable
+  states. Presentational: the form submits nowhere, and `?state=` stands in for your session.
+<!-- #endregion block:auth -->
 
 Every data call is an in-memory fixture that honours an `AbortSignal`. Replacing a fixture with
 a real `@keboola/api-client` call is a drop-in — the query hooks already thread `signal`.

package/dist/template/oxlint.config.ts

@@ -19,10 +19,8 @@ export default defineConfig({
     },
   },
   jsPlugins: [
-    // Local design-system + brand-safety lint rules — see
-    // packages/eslint-plugin-design. Aliased to `design` so rule IDs read
-    // `design/<rule>` in lint output. Boilerplate is the canonical scaffold
-    // cloned by `pnpm scaffold:app`, so every generated app inherits these.
+    // Local design-system + brand-safety lint rules. Aliased to `design` so rule
+    // IDs read `design/<rule>` in lint output.
     { name: 'design', specifier: '@keboola/eslint-plugin-design' },
   ],
   rules: {

package/dist/template/package.json

@@ -15,8 +15,8 @@
     "type-check": "tsc"
   },
   "dependencies": {
-    "@keboola/brand-registry": "^1.9.2",
-    "@keboola/design": "^11.0.1",
+    "@keboola/brand-registry": "^1.9.4",
+    "@keboola/design": "^11.5.0",
     "@tanstack/react-form": "^1.29.1",
     "@tanstack/react-query": "^5.96.2",
     "@tanstack/react-router": "^1.120.4",
@@ -28,9 +28,9 @@
     "zustand": "^5.0.8"
   },
   "devDependencies": {
-    "@keboola/eslint-plugin-design": "^0.4.2",
-    "@keboola/oxlint-config": "^10.0.1",
-    "@keboola/tsconfig": "^0.2.0",
+    "@keboola/eslint-plugin-design": "^0.4.3",
+    "@keboola/oxlint-config": "^10.0.2",
+    "@keboola/tsconfig": "^0.2.1",
     "@tailwindcss/vite": "^4.3.3",
     "@tanstack/react-query-devtools": "^5.96.2",
     "@testing-library/jest-dom": "^6.8.0",
@@ -43,8 +43,8 @@
     "@vitejs/plugin-react": "^6.0.0",
     "eslint-plugin-better-tailwindcss": "^4.7.0",
     "jsdom": "^26.1.0",
-    "oxfmt": "^0.57.0",
-    "oxlint": "^1.72.0",
+    "oxfmt": "^0.66.0",
+    "oxlint": "^1.81.0",
     "tailwindcss": "^4.3.3",
     "typescript": "npm:@typescript/typescript6@^6.0.2",
     "vite": "^8.1.5",

package/dist/template/src/auth/AuthScreen.test.tsx

@@ -0,0 +1,44 @@
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+
+import { keboola } from '@keboola/brand-registry';
+import { Button, ThemeProvider } from '@keboola/design';
+
+import { AuthScreen } from './AuthScreen';
+
+// The provider is required, not scenery: the header's `ColorModeToggle` reads the scheme through
+// `useTheme`, and `BrandLogo` renders nothing without a brand registered.
+const renderScreen = () =>
+  render(
+    <ThemeProvider brands={[keboola]} defaultBrandId={keboola.id} defaultScheme="light">
+      <AuthScreen title="Sign in">
+        <Button>Continue</Button>
+      </AuthScreen>
+    </ThemeProvider>,
+  );
+
+describe('<AuthScreen />', () => {
+  it('carries the page heading at h1', () => {
+    renderScreen();
+
+    expect(screen.getByRole('heading', { level: 1, name: 'Sign in' })).toBeInTheDocument();
+  });
+
+  it('keeps the colour-scheme control inside the header landmark', () => {
+    // The control is positioned away from the lockup, so its landmark is what can silently
+    // regress — outside one, axe reports it as unreachable by landmark navigation.
+    renderScreen();
+
+    expect(screen.getByRole('banner')).toContainElement(
+      screen.getByRole('button', { name: /^Color mode:/ }),
+    );
+  });
+
+  it('renders the card body inside the main landmark', () => {
+    renderScreen();
+
+    expect(screen.getByRole('main')).toContainElement(
+      screen.getByRole('button', { name: 'Continue' }),
+    );
+  });
+});

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

@@ -0,0 +1,63 @@
+import type { ReactNode } from 'react';
+
+import { BrandLogo, Card } from '@keboola/design';
+
+import { ColorModeToggle } from '../components/ColorModeToggle';
+
+// The product name beside the brand mark.
+//
+// - `create-keboola-app` rewrites this literal to the generated app's title while extracting
+//   the template (`parameterise` in the package's `extract.ts`), so it has to stay a top-level
+//   single-quoted `const`.
+const PRODUCT = '__APP_TITLE__';
+
+/**
+ * The chrome every pre-project screen shares: brand lockup, one centred card, no navigation.
+ *
+ * - Renders *instead of* `AppChrome`, not inside it — `routes/__root.tsx` picks one from
+ *   `useIsAuthRoute`. A visitor with no session gets no rail, no breadcrumb and no history.
+ * - `tailwindcss-preflight` and `text-foreground` are set here rather than inherited. A real app
+ *   moves this screen ahead of the router, because the session decides whether the router mounts
+ *   at all, and then nothing above it sets either: without the preflight scope the card's
+ *   controls pick up UA chrome, and without the ink `BrandLogo`'s inline SVG inherits
+ *   `currentColor` and goes near-black on the dark page.
+ * - `header` and `main` are landmarks, not decoration. Outside one, axe reports these controls as
+ *   unreachable by landmark navigation — which is why the colour-scheme control sits inside
+ *   `header` even though it is positioned away from the lockup.
+ * - `Card.Title as="h1"` — the card carries the page's only heading, and the default `h3` opens
+ *   the outline three levels down.
+ * - `variant="mark"` beside the product name as text. The wordmark already spells the brand, so
+ *   pairing it with a product name states the brand twice; the mark reads as one lockup. It also
+ *   degrades in the right order — `BrandLogo` falls back to the wordmark for a brand that ships
+ *   no mark and returns `null` for one that ships neither, which is why the name is text and not
+ *   part of the image.
+ * - `h-8`, not the navbar's `h-6`: with no chrome around it the lockup is the only thing naming
+ *   the product, and at bar size it reads as chrome that lost its bar.
+ * - Every pre-project state reuses this chrome — see `AUTH_STATES` in `states.tsx` — so the
+ *   common path does not jump when one state replaces another.
+ */
+export function AuthScreen({ title, children }: { title: string; children: ReactNode }) {
+  return (
+    <div className="tailwindcss-preflight tw:relative tw:flex tw:min-h-screen tw:flex-col tw:items-center tw:justify-center tw:gap-6 tw:bg-muted tw:px-4 tw:py-12 tw:text-foreground">
+      <header>
+        <div className="tw:flex tw:items-center tw:gap-3">
+          <BrandLogo variant="mark" className="tw:h-8" />
+          <span className="tw:text-lg tw:font-semibold">{PRODUCT}</span>
+        </div>
+
+        <div className="tw:absolute tw:top-4 tw:right-4">
+          <ColorModeToggle />
+        </div>
+      </header>
+
+      <main className="tw:w-full tw:max-w-md">
+        <Card>
+          <Card.Header layout="stack">
+            <Card.Title as="h1">{title}</Card.Title>
+          </Card.Header>
+          <Card.Content className="tw:flex tw:flex-col tw:gap-4">{children}</Card.Content>
+        </Card>
+      </main>
+    </div>
+  );
+}

package/dist/template/src/auth/session.test.tsx

@@ -0,0 +1,64 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, expect, it, vi } from 'vitest';
+
+import type { AuthState } from './session';
+import { AUTH_STATES, isAuthState } from './session';
+
+const renderState = (state: AuthState, onRetry = () => {}) => {
+  const { body: Body } = AUTH_STATES[state];
+  return render(<Body onRetry={onRetry} />);
+};
+
+describe('AUTH_STATES', () => {
+  it('asks for a credential when signed out', () => {
+    renderState('signed-out');
+
+    expect(screen.getByLabelText(/Email/)).toBeInTheDocument();
+    expect(screen.getByLabelText(/Password/)).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Sign in' })).toBeInTheDocument();
+  });
+
+  it('announces the wait while restoring', () => {
+    renderState('restoring');
+
+    // The wait resolves without the reader acting, so the region has to be live.
+    const message = screen.getByText(/still signed in/);
+    expect(message.closest('[aria-live="polite"]')).not.toBeNull();
+  });
+
+  it.each([
+    ['expired', 'Sign in again'],
+    ['unavailable', 'Try again'],
+  ] as const)('lets the reader retry from %s', async (state, action) => {
+    const user = userEvent.setup();
+    const onRetry = vi.fn();
+    renderState(state, onRetry);
+
+    await user.click(screen.getByRole('button', { name: action }));
+
+    expect(onRetry).toHaveBeenCalledOnce();
+  });
+
+  it('distinguishes an expired session from an unreachable service', () => {
+    // Telling someone their session expired while the network is down sends them to re-enter a
+    // password that would have worked, so the two copies must not converge.
+    const { unmount } = renderState('expired');
+    expect(screen.getByText(/session ended/)).toBeInTheDocument();
+    unmount();
+
+    renderState('unavailable');
+    expect(screen.getByText(/could not reach the service/)).toBeInTheDocument();
+  });
+});
+
+describe('isAuthState', () => {
+  it('accepts every declared state and nothing else', () => {
+    for (const state of Object.keys(AUTH_STATES)) expect(isAuthState(state)).toBe(true);
+
+    expect(isAuthState('signedout')).toBe(false);
+    expect(isAuthState(undefined)).toBe(false);
+    // `Object.hasOwn` rather than `in`, so a prototype key is not a state.
+    expect(isAuthState('toString')).toBe(false);
+  });
+});

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

@@ -0,0 +1,58 @@
+import type { ComponentType } from 'react';
+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.
+ */
+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.
+ */
+export const useIsAuthRoute = (): boolean =>
+  useRouterState({ select: (state) => state.location.pathname === AUTH_ROUTE });
+
+/** 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. */
+  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.
+ */
+export const AUTH_STATES = {
+  'signed-out': { title: 'Sign in', body: SignInForm },
+  restoring: { title: 'Restoring your session', body: Restoring },
+  expired: { title: 'Session expired', body: Expired },
+  unavailable: { title: 'Cannot reach the service', body: Unavailable },
+} as const satisfies Readonly<Record<string, AuthStateView>>;
+
+export type AuthState = keyof typeof AUTH_STATES;
+
+/** Narrows an unvalidated search param. Anything else is not a state, including `undefined`. */
+export const isAuthState = (value: unknown): value is AuthState =>
+  typeof value === 'string' && Object.hasOwn(AUTH_STATES, value);

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

@@ -0,0 +1,88 @@
+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.
+ *
+ * - 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.
+ */
+export const SignInForm = () => {
+  const form = useAppForm({
+    defaultValues: { email: '', password: '' },
+    onSubmit: async ({ value }) => {
+      await Promise.resolve(value);
+    },
+  });
+
+  return (
+    <form.AppForm>
+      <form.FormBody>
+        <form.AppField name="email">
+          {(field) => <field.TextField label="Email" type="email" required />}
+        </form.AppField>
+        <form.AppField name="password">
+          {(field) => <field.PasswordField label="Password" required />}
+        </form.AppField>
+        <form.SubmitButton className="tw:w-full">Sign in</form.SubmitButton>
+      </form.FormBody>
+    </form.AppForm>
+  );
+};
+
+/**
+ * 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.
+ */
+export const Restoring = () => (
+  <div
+    className="tw:flex tw:items-center tw:gap-3 tw:text-sm tw:text-muted-foreground"
+    aria-live="polite"
+  >
+    <DotsLoader />
+    Checking whether you are still signed in.
+  </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.
+ */
+export const Expired = ({ onRetry }: AuthStateProps) => (
+  <>
+    <Alert variant="warning">
+      Your session ended. Sign in again to pick up where you left off.
+    </Alert>
+    <Button variant="primary" className="tw:w-full" onClick={onRetry}>
+      Sign in again
+    </Button>
+  </>
+);
+
+/**
+ * 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.
+ */
+export const Unavailable = ({ onRetry }: AuthStateProps) => (
+  <>
+    <Alert variant="error">
+      We could not reach the service. Your credentials are fine — the request never got an answer.
+    </Alert>
+    <Button variant="outline" className="tw:w-full" onClick={onRetry}>
+      Try again
+    </Button>
+  </>
+);

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

@@ -89,7 +89,7 @@ export function AppChrome({ children }: { children: ReactNode }) {
               <Navbar.Menu marker="forward-slash">
                 <Navbar.MenuItem>
                   <Navbar.MenuButton asChild>
-                    <Link to="/">Boilerplate</Link>
+                    <Link to="/">__APP_TITLE__</Link>
                   </Navbar.MenuButton>
                 </Navbar.MenuItem>
               </Navbar.Menu>

package/dist/template/src/nav.ts

@@ -3,7 +3,7 @@ import type { ComponentType } from 'react';
 import { LayoutDashboard } from '@keboola/design/icons';
 
 // #region block:crud
-import { tokensNavItem } from './routes/tokens/-nav';
+import { tokensNavItem } from './tokens/nav';
 // #endregion block:crud
 
 export type NavItem = { to: string; label: string; icon: ComponentType };

package/dist/template/src/{routes/-fixtures.ts → overview-fixtures.ts}

@@ -1,7 +1,7 @@
 // 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 -hooks.ts.
+// cancellation exactly as it would against a real client — see overview-hooks.ts.
 
 export type Kpi = {
   label: string;

package/dist/template/src/{routes/-hooks.ts → overview-hooks.ts}

@@ -1,6 +1,6 @@
 import { useQuery } from '@tanstack/react-query';
 
-import { fetchOverview } from './-fixtures';
+import { fetchOverview } from './overview-fixtures';
 
 const queryKeys = {
   overview: ['overview'] as const,

package/dist/template/src/overview-sections.tsx

@@ -1,6 +1,5 @@
 import type { ReactNode } from 'react';
 
-import type { Overview } from './routes/-fixtures';
 // #region block:chart
 import { chartSection } from './sections/chart';
 // #endregion block:chart
@@ -10,6 +9,10 @@ import { gridSection } from './sections/grid';
 // #region block:kpi
 import { kpiSection } from './sections/kpi';
 // #endregion block:kpi
+// `simple-import-sort` orders a sibling path after every nested one, so this import belongs
+// past the final section region rather than inside it — the shell needs it whether or not a
+// scaffold keeps that block.
+import type { Overview } from './overview-fixtures';
 
 /**
  * One block's contribution to the overview.

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

@@ -2,7 +2,7 @@ import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { expect, it } from 'vitest';
 
-import type { BudgetRow } from '../routes/-fixtures';
+import type { BudgetRow } from '../overview-fixtures';
 
 import { CreditBudgetGrid } from './DataGrid';
 

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

@@ -8,8 +8,8 @@ import {
 
 import { NumberInput, Table } from '@keboola/design';
 
-import type { BudgetRow } from '../routes/-fixtures';
-import { BUDGET_MONTHS } from '../routes/-fixtures';
+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,

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

@@ -2,6 +2,9 @@ import { createRootRoute, Outlet } from '@tanstack/react-router';
 
 import { Toaster } from '@keboola/design';
 
+// #region block:auth
+import { useIsAuthRoute } from '../auth/session';
+// #endregion block:auth
 import { AppChrome } from '../components/AppChrome';
 
 export const Route = createRootRoute({
@@ -9,6 +12,31 @@ 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.
+  const isAuthRoute = useIsAuthRoute();
+  if (isAuthRoute) {
+    return (
+      <div className="tailwindcss-preflight">
+        <Outlet />
+        <Toaster />
+      </div>
+    );
+  }
+
+  // #endregion block:auth
   return (
     <div className="tailwindcss-preflight">
       <AppChrome>

package/dist/template/src/routes/{-index.test.tsx → index.test.tsx}

@@ -6,9 +6,9 @@ import userEvent from '@testing-library/user-event';
 // #endregion block:assistant
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 
+import * as fixtures from '../overview-fixtures';
 import { useAppStore } from '../store';
 
-import * as fixtures from './-fixtures';
 import { HomePage } from './index';
 
 const renderPage = () => {

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

@@ -7,12 +7,11 @@ import { ErrorState, PageHeader, PageLayout } from '@keboola/design';
 import { HomePrompt } from '../components/HomePrompt';
 import { SelectionFloater } from '../components/SelectionFloater';
 // #endregion block:assistant
+import type { Overview } from '../overview-fixtures';
+import { useOverview } from '../overview-hooks';
 import { OVERVIEW_SECTIONS } from '../overview-sections';
 import { useAppStore } from '../store';
 
-import type { Overview } from './-fixtures';
-import { useOverview } from './-hooks';
-
 export const Route = createFileRoute('/')({
   component: HomePage,
 });

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

@@ -0,0 +1,56 @@
+import { createMemoryHistory, createRouter, RouterProvider } from '@tanstack/react-router';
+import { render, screen } from '@testing-library/react';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+
+import { keboola } from '@keboola/brand-registry';
+import { ThemeProvider } from '@keboola/design';
+
+import { routeTree } from '../routeTree.gen';
+
+// jsdom implements no scrolling, and Router's scroll restoration calls this on every navigation —
+// unstubbed it floods the run with `Not implemented: window.scrollTo`.
+beforeEach(() => {
+  vi.stubGlobal('scrollTo', vi.fn());
+});
+
+afterEach(() => {
+  vi.unstubAllGlobals();
+});
+
+// The real tree, not a stub: the behaviour under test is the root layout choosing between
+// AppChrome and the bare outlet, and a hand-built tree would not exercise that choice.
+const renderAt = (path: string) => {
+  const router = createRouter({
+    routeTree,
+    history: createMemoryHistory({ initialEntries: [path] }),
+  });
+  return render(
+    <ThemeProvider brands={[keboola]} defaultBrandId={keboola.id} defaultScheme="light">
+      <RouterProvider router={router} />
+    </ThemeProvider>,
+  );
+};
+
+describe('/signed-out', () => {
+  it('renders without the app chrome', async () => {
+    renderAt('/signed-out');
+
+    expect(await screen.findByRole('heading', { level: 1, name: 'Sign in' })).toBeInTheDocument();
+    // The rail is the tell: a signed-out visitor must reach no destination in the app.
+    expect(screen.queryByRole('navigation', { name: 'Sections' })).not.toBeInTheDocument();
+  });
+
+  it('picks the state named by the search param', async () => {
+    renderAt('/signed-out?state=expired');
+
+    expect(
+      await screen.findByRole('heading', { level: 1, name: 'Session expired' }),
+    ).toBeInTheDocument();
+  });
+
+  it('falls back to the sign-in form for a state it does not know', async () => {
+    renderAt('/signed-out?state=nonsense');
+
+    expect(await screen.findByRole('heading', { level: 1, name: 'Sign in' })).toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,35 @@
+import { createFileRoute, useNavigate } from '@tanstack/react-router';
+
+import { AuthScreen } from '../auth/AuthScreen';
+import type { AuthState } from '../auth/session';
+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.
+ */
+export const Route = createFileRoute('/signed-out')({
+  validateSearch: (search: Record<string, unknown>): { state: AuthState } => ({
+    state: isAuthState(search.state) ? search.state : 'signed-out',
+  }),
+  component: SignedOutPage,
+});
+
+function SignedOutPage() {
+  const { state } = Route.useSearch();
+  const navigate = useNavigate();
+  const { title, body: Body } = AUTH_STATES[state];
+
+  return (
+    <AuthScreen title={title}>
+      <Body onRetry={() => void navigate({ to: AUTH_ROUTE, search: { state: 'signed-out' } })} />
+    </AuthScreen>
+  );
+}

package/dist/template/src/routes/tokens/$id.tsx

@@ -2,8 +2,8 @@ import { createFileRoute, Link } from '@tanstack/react-router';
 
 import { Breadcrumb, Button, ErrorState, PageHeader, PageLayout, Skeleton } from '@keboola/design';
 
-import { useToken } from './-hooks';
-import type { Token } from './-types';
+import { useToken } from '../../tokens/hooks';
+import type { Token } from '../../tokens/types';
 
 export const Route = createFileRoute('/tokens/$id')({
   component: TokenDetailPage,

package/dist/template/src/routes/tokens/{-index.test.tsx → index.test.tsx}

@@ -3,7 +3,7 @@ import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 
-import type { Token } from './-types';
+import type { Token } from '../../tokens/types';
 
 // Render the page without a RouterProvider: mock the two router exports it uses
 // (`createFileRoute` returns the Route object; `Link` renders a plain anchor).
@@ -14,7 +14,7 @@ vi.mock('@tanstack/react-router', () => ({
 
 // Drive each async branch deterministically by mocking the query hook boundary.
 const { useTokensMock } = vi.hoisted(() => ({ useTokensMock: vi.fn() }));
-vi.mock('./-hooks', () => ({ useTokens: () => useTokensMock() }));
+vi.mock('../../tokens/hooks', () => ({ useTokens: () => useTokensMock() }));
 
 import { Route } from './index';
 

package/dist/template/src/routes/tokens/index.tsx

@@ -14,9 +14,8 @@ import {
 } from '@keboola/design';
 
 import { useAppStore } from '../../store';
-
-import { useTokens } from './-hooks';
-import type { Token } from './-types';
+import { useTokens } from '../../tokens/hooks';
+import type { Token } from '../../tokens/types';
 
 export const Route = createFileRoute('/tokens/')({
   component: TokensListPage,

package/dist/template/src/routes/tokens/new.tsx

@@ -13,8 +13,8 @@ import {
   toast,
 } from '@keboola/design';
 
-import { useCreateToken } from './-hooks';
-import { type CreateTokenInput, EXPIRY_OPTIONS, type TokenExpiry } from './-types';
+import { useCreateToken } from '../../tokens/hooks';
+import { type CreateTokenInput, EXPIRY_OPTIONS, type TokenExpiry } from '../../tokens/types';
 
 export const Route = createFileRoute('/tokens/new')({
   component: NewTokenPage,

package/dist/template/src/{routes/tokens/-fixtures.test.ts → tokens/fixtures.test.ts}

@@ -1,6 +1,6 @@
 import { beforeEach, describe, expect, it } from 'vitest';
 
-import { createToken, fetchToken, fetchTokens, resetFixtures } from './-fixtures';
+import { createToken, fetchToken, fetchTokens, resetFixtures } from './fixtures';
 
 describe('fixtures', () => {
   beforeEach(() => {

package/dist/template/src/{routes/tokens/-fixtures.ts → tokens/fixtures.ts}

@@ -1,4 +1,4 @@
-import type { CreateTokenInput, Token } from './-types';
+import type { CreateTokenInput, Token } from './types';
 
 // Hand-rolled in-memory store — replaces a real API until @keboola/api-client
 // gains a typed Tokens namespace. Swap fetchTokens / createToken for real API

package/dist/template/src/{routes/tokens/-hooks.ts → tokens/hooks.ts}

@@ -1,7 +1,7 @@
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 
-import { createToken, fetchToken, fetchTokens } from './-fixtures';
-import type { CreateTokenInput } from './-types';
+import { createToken, fetchToken, fetchTokens } from './fixtures';
+import type { CreateTokenInput } from './types';
 
 const queryKeys = {
   all: ['tokens'] as const,

package/dist/template/src/{routes/tokens/-nav.ts → tokens/nav.ts}

@@ -1,6 +1,6 @@
 import { KeyRound } from '@keboola/design/icons';
 
-import type { NavItem } from '../../nav';
+import type { NavItem } from '../nav';
 
 /**
  * This module's entry in the rail.

package/dist/template/vite.config.ts

@@ -9,6 +9,14 @@ export default defineConfig({
     TanStackRouterVite({
       routesDirectory: './src/routes',
       generatedRouteTree: './src/routeTree.gen.ts',
+      /**
+       * `routes/` holds route files and their tests, nothing else.
+       *
+       * - A test file exports no `Route`, so unmatched it costs a generator warning per build.
+       * - Matched against the file name, not the path (`routeFileIgnorePrefix` still defaults
+       *   to `-`; nothing here relies on it).
+       */
+      routeFileIgnorePattern: '\\.test\\.tsx?$',
     }),
     react(),
     tailwindcss(),

package/package.json

@@ -1,10 +1,9 @@
 {
   "name": "create-keboola-app",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Scaffold a Keboola-shaped frontend app — Vite + React 19 + TanStack Router/Query/Form + Zustand + @keboola/design — from a minimal shell plus the blocks you pick",
   "license": "MIT",
   "type": "module",
-  "bin": "./dist/cli.js",
   "files": [
     "dist",
     "README.md",
@@ -16,17 +15,6 @@
   "engines": {
     "node": ">=20"
   },
-  "scripts": {
-    "build": "tsdown && node dist/extract.js",
-    "lint": "pnpm lint:format && pnpm lint:oxlint",
-    "lint:fix": "oxlint --fix . && oxfmt",
-    "lint:format": "oxfmt --check",
-    "lint:oxlint": "oxlint . --quiet",
-    "knip:check": "pnpm --dir ../.. exec knip --workspace packages/create-keboola-app",
-    "knip:fix": "pnpm --dir ../.. exec knip --workspace packages/create-keboola-app --fix-type types,exports,files",
-    "test": "vitest run --passWithNoTests --reporter=dot",
-    "type-check": "tsc"
-  },
   "repository": {
     "type": "git",
     "url": "https://github.com/keboola/ui.git",
@@ -50,15 +38,29 @@
     "@tanstack/router-generator": "^1.120.4"
   },
   "devDependencies": {
-    "@keboola/oxlint-config": "workspace:^",
-    "@keboola/tsconfig": "workspace:^",
     "@types/node": "24.12.0",
     "@typescript/native": "npm:typescript@^7.0.2",
-    "oxfmt": "^0.57.0",
-    "oxlint": "^1.72.0",
+    "oxfmt": "^0.66.0",
+    "oxlint": "^1.81.0",
     "tsdown": "^0.22.14",
     "typescript": "npm:@typescript/typescript6@^6.0.2",
     "vite": "^8.1.5",
-    "vitest": "^4.1.10"
+    "vitest": "^4.1.10",
+    "@keboola/tsconfig": "^0.2.1",
+    "@keboola/oxlint-config": "^10.0.2"
+  },
+  "scripts": {
+    "build": "tsdown && node dist/extract.js",
+    "lint": "pnpm lint:format && pnpm lint:oxlint",
+    "lint:fix": "oxlint --fix . && oxfmt",
+    "lint:format": "oxfmt --check",
+    "lint:oxlint": "oxlint . --quiet",
+    "knip:check": "pnpm --dir ../.. exec knip --workspace packages/create-keboola-app",
+    "knip:fix": "pnpm --dir ../.. exec knip --workspace packages/create-keboola-app --fix-type types,exports,files",
+    "test": "vitest run --passWithNoTests --reporter=dot",
+    "type-check": "tsc"
+  },
+  "bin": {
+    "create-keboola-app": "./dist/cli.js"
   }
-}
+}