@owlmeans/create-app 0.1.18-rc.2 → 0.1.18-rc.21

package/template/sources/api/src/index.ts

@@ -1,9 +1,9 @@
 import { main } from '@owlmeans/server-app'
 import config from './config.js'
 import { makeContext } from './context.js'
-import { appModules } from './modules.js'
+import { appEntrypoints } from './entrypoints.js'
 import type { Config, Context } from './types.js'
 
 const context = makeContext<Config, Context>(config)
 
-main<{}, Config, Context>(context, appModules)
+main<{}, Config, Context>(context, appEntrypoints)

package/template/sources/api/src/types.bare.ts

@@ -0,0 +1,5 @@
+import type { AppConfig, AppContext } from '@owlmeans/server-app'
+
+export interface Config extends AppConfig {}
+
+export interface Context<C extends Config = Config> extends AppContext<C> {}

package/template/sources/common/package.json

@@ -19,15 +19,15 @@
     "typecheck": "tsc -b"
   },
   "dependencies": {
-    "@owlmeans/config": "^0.1.16",
-    "@owlmeans/entrypoint": "^0.1.16",
-    "@owlmeans/error": "^0.1.16",
-    "@owlmeans/resource": "^0.1.16",
-    "@owlmeans/route": "^0.1.16",
+    "@owlmeans/config": "^0.1.18-rc.16",
+    "@owlmeans/entrypoint": "^0.1.18-rc.15",
+    "@owlmeans/error": "^0.1.18-rc.12",
+    "@owlmeans/resource": "^0.1.18-rc.13",
+    "@owlmeans/route": "^0.1.18-rc.13",
     "ajv": "^8.17.1"
   },
   "devDependencies": {
-    "@owlmeans/dep-config": "^0.1.16",
+    "@owlmeans/dep-config": "^0.1.18-rc.6",
     "@types/node": "^24.10.1",
     "typescript": "^7.0.2"
   }

package/template/sources/common/src/consts.bare.ts

@@ -0,0 +1,8 @@
+/** Service aliases shared between web and api. */
+export const APP = '__APP_SLUG__'
+export const APP_WEB = '__APP_SLUG__-web'
+export const APP_API = '__APP_SLUG__-api'
+
+/** Local development ports. */
+export const WEB_PORT = 3001
+export const API_PORT = 3000

package/template/sources/common/src/consts.ts

@@ -6,16 +6,3 @@ export const APP_API = '__APP_SLUG__-api'
 /** Local development ports. */
 export const WEB_PORT = 3001
 export const API_PORT = 3000
-
-/** Backend (API) entrypoint identifiers. */
-export const session = {
-  base: '__APP_SLUG__:api:session',
-  list: '__APP_SLUG__:api:session:list',
-  add: '__APP_SLUG__:api:session:add',
-  remove: '__APP_SLUG__:api:session:remove',
-}
-
-/** Frontend (web) entrypoint identifiers. */
-export const web = {
-  session: '__APP_SLUG__:web:session',
-}

package/template/sources/common/src/entrypoints.bare.ts

@@ -0,0 +1,14 @@
+import { openProtocol } from '@owlmeans/entrypoint'
+import { BASE, HOME } from '@owlmeans/context'
+import { frontend, route } from '@owlmeans/route'
+
+const webBase = openProtocol(route(BASE, '/', frontend()))
+
+/** The shared immutable protocol tree. Add API declarations below `api` as the shell grows. */
+export const appEntrypoints = {
+  api: {},
+  web: {
+    base: webBase,
+    home: openProtocol(route(HOME, '/', frontend({ default: true, parent: webBase }))),
+  },
+}

package/template/sources/common/src/entrypoints.ts

@@ -0,0 +1,60 @@
+import { contract, openProtocol, protocol, typed } from '@owlmeans/entrypoint'
+import { route, RouteMethod, frontend } from '@owlmeans/route'
+import { AddItemSchema, ItemParamsSchema, SessionParamsSchema } from './schemas.js'
+import type { SessionItem } from './types.js'
+
+const aliases = {
+  session: {
+    base: '__APP_SLUG__:api:session',
+    list: '__APP_SLUG__:api:session:list',
+    add: '__APP_SLUG__:api:session:add',
+    remove: '__APP_SLUG__:api:session:remove',
+  },
+  web: {
+    base: '__APP_SLUG__:web:base',
+    home: '__APP_SLUG__:web:home',
+    session: '__APP_SLUG__:web:session',
+    about: '__APP_SLUG__:web:about',
+  },
+}
+
+const sessionBase = protocol(route(aliases.session.base, '/session'), contract())
+const webBase = openProtocol(route(aliases.web.base, '/', frontend()))
+
+/**
+ * Shared entrypoint declarations. The api materializes these with handlers; the web
+ * materializes them with screen components and calls them. Routes resolve under the
+ * api service `base` (`/api`), so e.g. `session.list` → `GET /api/session/:sid/items`.
+ */
+export const session = {
+  base: sessionBase,
+  list: protocol(
+    route(aliases.session.list, '/:sid/items', { parent: sessionBase, method: RouteMethod.GET }),
+    contract.request({ params: SessionParamsSchema }, typed<SessionItem[]>()),
+  ),
+  add: protocol(
+    route(aliases.session.add, '/:sid/items', { parent: sessionBase, method: RouteMethod.POST }),
+    contract.request({
+      params: SessionParamsSchema,
+      body: AddItemSchema,
+    }, typed<SessionItem>()),
+  ),
+  remove: protocol(
+    route(aliases.session.remove, '/:sid/items/:id', { parent: sessionBase, method: RouteMethod.DELETE }),
+    contract.request({ params: ItemParamsSchema }, typed<{ removed: boolean }>()),
+  ),
+}
+
+/** Frontend routes are protocol declarations too; their renderer is bound by the web project. */
+export const web = {
+  base: webBase,
+  home: openProtocol(route(aliases.web.home, '/', frontend({ default: true, parent: webBase }))),
+  session: openProtocol(route(aliases.web.session, '/session', frontend({ parent: webBase }))),
+  about: openProtocol(route(aliases.web.about, '/about', frontend({ parent: webBase }))),
+}
+
+/** The shared immutable protocol tree. Runtime packages bind their own local handlers and screens. */
+export const appEntrypoints = {
+  api: { session },
+  web,
+}

package/template/sources/common/src/index.bare.ts

@@ -0,0 +1,3 @@
+export * from './consts.js'
+export * from './config.js'
+export * from './entrypoints.js'

package/template/sources/common/src/index.ts

@@ -2,4 +2,4 @@ export * from './consts.js'
 export * from './types.js'
 export * from './schemas.js'
 export * from './config.js'
-export * from './modules.js'
+export * from './entrypoints.js'

package/template/sources/common/src/schemas.ts

@@ -1,25 +1,25 @@
-import type { JSONSchemaType } from 'ajv'
+import { schema } from '@owlmeans/entrypoint'
 import type { AddItemPayload, ItemParams, SessionParams } from './types.js'
 
-export const AddItemSchema: JSONSchemaType<AddItemPayload> = {
+export const AddItemSchema = schema<AddItemPayload>({
   type: 'object',
   properties: {
     text: { type: 'string', minLength: 1, maxLength: 280 },
   },
   required: ['text'],
   additionalProperties: false,
-}
+})
 
-export const SessionParamsSchema: JSONSchemaType<SessionParams> = {
+export const SessionParamsSchema = schema<SessionParams>({
   type: 'object',
   properties: {
     sid: { type: 'string', minLength: 1 },
   },
   required: ['sid'],
   additionalProperties: false,
-}
+})
 
-export const ItemParamsSchema: JSONSchemaType<ItemParams> = {
+export const ItemParamsSchema = schema<ItemParams>({
   type: 'object',
   properties: {
     sid: { type: 'string', minLength: 1 },
@@ -27,4 +27,4 @@ export const ItemParamsSchema: JSONSchemaType<ItemParams> = {
   },
   required: ['sid', 'id'],
   additionalProperties: false,
-}
+})

package/template/sources/web/index.html

@@ -1,9 +1,11 @@
 <!doctype html>
-<html lang="en">
+<html lang="__APP_LANG__">
 
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <meta name="application-name" content="__APP_NAME__" />
+  <meta name="description" content="__APP_DESCRIPTION__" />
   <title>__APP_NAME__</title>
 </head>
 

package/template/sources/web/package.json

@@ -11,19 +11,21 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@owlmeans/client": "^0.1.16",
-    "@owlmeans/client-config": "^0.1.16",
-    "@owlmeans/client-context": "^0.1.16",
-    "@owlmeans/client-entrypoint": "^0.1.16",
-    "@owlmeans/client-i18n": "^0.1.16",
-    "@owlmeans/entrypoint": "^0.1.16",
-    "@owlmeans/route": "^0.1.16",
-    "@owlmeans/web-client": "^0.1.16",
-    "@owlmeans/web-panel": "^0.1.16",
-    "__APP_SLUG__-common": "workspace:^",
+    "@owlmeans/client": "^0.1.18-rc.20",
+    "@owlmeans/client-config": "^0.1.18-rc.16",
+    "@owlmeans/client-context": "^0.1.18-rc.17",
+    "@owlmeans/client-entrypoint": "^0.1.18-rc.17",
+    "@owlmeans/client-i18n": "^0.1.18-rc.19",
+    "@owlmeans/entrypoint": "^0.1.18-rc.15",
+    "@owlmeans/route": "^0.1.18-rc.13",
+    "@owlmeans/state": "^0.1.18-rc.14",
+    "@owlmeans/web-client": "^0.1.18-rc.28",
+    "@owlmeans/web-panel": "^0.1.18-rc.36",
     "@radix-ui/react-label": "^2.1.0",
+    "@radix-ui/react-navigation-menu": "^1.2.14",
     "@radix-ui/react-progress": "^1.1.0",
     "@radix-ui/react-slot": "^1.1.0",
+    "__APP_SLUG__-common": "workspace:^",
     "ajv": "^8.17.1",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",
@@ -37,7 +39,7 @@
     "tailwindcss": "^4.1.13"
   },
   "devDependencies": {
-    "@owlmeans/dep-config": "^0.1.16",
+    "@owlmeans/dep-config": "^0.1.18-rc.6",
     "@tailwindcss/vite": "^4.1.13",
     "@types/react": "^19.2.17",
     "@types/react-dom": "^19.2.3",

package/template/sources/web/src/components/ui/navigation-menu.tsx

@@ -0,0 +1,169 @@
+// shadcn navigation-menu — sourced from shadcn/ui (new-york) 2026-08-24
+import * as React from "react"
+import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu"
+import { cva } from "class-variance-authority"
+import { ChevronDownIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function NavigationMenu({
+  className,
+  children,
+  viewport = true,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Root> & {
+  viewport?: boolean
+}) {
+  return (
+    <NavigationMenuPrimitive.Root
+      data-slot="navigation-menu"
+      data-viewport={viewport}
+      className={cn(
+        "group/navigation-menu relative flex max-w-max flex-1 items-center justify-center",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      {viewport && <NavigationMenuViewport />}
+    </NavigationMenuPrimitive.Root>
+  )
+}
+
+function NavigationMenuList({
+  className,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.List>) {
+  return (
+    <NavigationMenuPrimitive.List
+      data-slot="navigation-menu-list"
+      className={cn(
+        "group flex flex-1 list-none items-center justify-center gap-1",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function NavigationMenuItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Item>) {
+  return (
+    <NavigationMenuPrimitive.Item
+      data-slot="navigation-menu-item"
+      className={cn("relative", className)}
+      {...props}
+    />
+  )
+}
+
+const navigationMenuTriggerStyle = cva(
+  "group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=open]:hover:bg-accent data-[state=open]:text-accent-foreground data-[state=open]:focus:bg-accent data-[state=open]:bg-accent/50 focus-visible:ring-ring/50 outline-none transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1"
+)
+
+function NavigationMenuTrigger({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Trigger>) {
+  return (
+    <NavigationMenuPrimitive.Trigger
+      data-slot="navigation-menu-trigger"
+      className={cn(navigationMenuTriggerStyle(), "group", className)}
+      {...props}
+    >
+      {children}{" "}
+      <ChevronDownIcon
+        className="relative top-[1px] ml-1 size-3 transition duration-300 group-data-[state=open]:rotate-180"
+        aria-hidden="true"
+      />
+    </NavigationMenuPrimitive.Trigger>
+  )
+}
+
+function NavigationMenuContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Content>) {
+  return (
+    <NavigationMenuPrimitive.Content
+      data-slot="navigation-menu-content"
+      className={cn(
+        "data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 top-0 left-0 w-full p-2 pr-2.5 md:absolute md:w-auto",
+        "group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:data-[state=open]:animate-in group-data-[viewport=false]/navigation-menu:data-[state=closed]:animate-out group-data-[viewport=false]/navigation-menu:data-[state=closed]:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:fade-in-0 group-data-[viewport=false]/navigation-menu:data-[state=closed]:fade-out-0 group-data-[viewport=false]/navigation-menu:top-full group-data-[viewport=false]/navigation-menu:mt-1.5 group-data-[viewport=false]/navigation-menu:overflow-hidden group-data-[viewport=false]/navigation-menu:rounded-md group-data-[viewport=false]/navigation-menu:border group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:duration-200 **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function NavigationMenuViewport({
+  className,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Viewport>) {
+  return (
+    <div
+      className={cn(
+        "absolute top-full left-0 isolate z-50 flex justify-center"
+      )}
+    >
+      <NavigationMenuPrimitive.Viewport
+        data-slot="navigation-menu-viewport"
+        className={cn(
+          "origin-top-center bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border shadow md:w-[var(--radix-navigation-menu-viewport-width)]",
+          className
+        )}
+        {...props}
+      />
+    </div>
+  )
+}
+
+function NavigationMenuLink({
+  className,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Link>) {
+  return (
+    <NavigationMenuPrimitive.Link
+      data-slot="navigation-menu-link"
+      className={cn(
+        "data-[active=true]:focus:bg-accent data-[active=true]:hover:bg-accent data-[active=true]:bg-accent/50 data-[active=true]:text-accent-foreground hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus-visible:ring-ring/50 [&_svg:not([class*='text-'])]:text-muted-foreground flex flex-col gap-1 rounded-sm p-2 text-sm transition-all outline-none focus-visible:ring-[3px] focus-visible:outline-1 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function NavigationMenuIndicator({
+  className,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Indicator>) {
+  return (
+    <NavigationMenuPrimitive.Indicator
+      data-slot="navigation-menu-indicator"
+      className={cn(
+        "data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden",
+        className
+      )}
+      {...props}
+    >
+      <div className="bg-border relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm shadow-md" />
+    </NavigationMenuPrimitive.Indicator>
+  )
+}
+
+export {
+  NavigationMenu,
+  NavigationMenuList,
+  NavigationMenuItem,
+  NavigationMenuContent,
+  NavigationMenuTrigger,
+  NavigationMenuLink,
+  NavigationMenuIndicator,
+  NavigationMenuViewport,
+  navigationMenuTriggerStyle,
+}

package/template/sources/web/src/context.bare.ts

@@ -0,0 +1,13 @@
+import { makeContext as makeBasicContext, useContext as useBasicContext } from '@owlmeans/web-panel'
+import type { Config, Context } from './types.js'
+
+export const useContext = (): Context => useBasicContext<Config, Context>()
+
+/**
+ * The framework's client store lives ON the context, so a screen, a guard and a service all
+ * reach the same records — which is what separates it from a store held beside the app in a
+ * module of its own. `appendStateResource<C, T>(context, ALIAS)` from '@owlmeans/state'
+ * (already a dependency) registers one; screens then address it by that alias, never by path.
+ */
+export const makeContext = <C extends Config, T extends Context<C>>(cfg: C): T =>
+  makeBasicContext<C, T>(cfg)

package/template/sources/web/src/context.ts

@@ -1,7 +1,19 @@
 import { makeContext as makeBasicContext, useContext as useBasicContext } from '@owlmeans/web-panel'
+import { appendStateResource } from '@owlmeans/state'
 import type { Config, Context } from './types.js'
 
+/** The alias the session items are stored under. Screens address the store by it, never by path. */
+export const SESSION_STATE = 'session-items'
+
 export const useContext = (): Context => useBasicContext<Config, Context>()
 
-export const makeContext = <C extends Config, T extends Context<C>>(cfg: C): T =>
-  makeBasicContext<C, T>(cfg)
+export const makeContext = <C extends Config, T extends Context<C>>(cfg: C): T => {
+  const context = makeBasicContext<C, T>(cfg)
+
+  // The framework's client store. A state resource lives ON the context, so a screen, a guard and
+  // a service all reach the same records — which is what separates it from a store held beside
+  // the app in a module of its own.
+  appendStateResource<C, T>(context, SESSION_STATE)
+
+  return context
+}

package/template/sources/web/src/entrypoints.bare.ts

@@ -0,0 +1,13 @@
+import { bindAll, bindScreen, entrypoints as baseEntrypoints, handler } from '@owlmeans/web-panel'
+import { appEntrypoints as protocols } from '__APP_SLUG__-common'
+import { MainLayout } from './layout/main.js'
+import { HomeScreen } from './screens/home.js'
+
+/** Local browser bindings for shared API and screen protocols. */
+export const appEntrypoints = [
+  ...baseEntrypoints,
+  ...bindAll(protocols.api),
+  // BASE renders the shared layout; HOME is its default child.
+  bindScreen(protocols.web.base, handler(MainLayout)),
+  bindScreen(protocols.web.home, handler(HomeScreen)),
+]

package/template/sources/web/src/entrypoints.ts

@@ -0,0 +1,16 @@
+import { bindAll, bindScreen, entrypoints as baseEntrypoints, handler } from '@owlmeans/web-panel'
+import { appEntrypoints as protocols } from '__APP_SLUG__-common'
+import { MainLayout } from './layout/main.js'
+import { AboutScreen } from './screens/about.js'
+import { HomeScreen } from './screens/home.js'
+import { SessionScreen } from './screens/session.js'
+
+/** Local browser bindings for shared API and screen protocols. */
+export const appEntrypoints = [
+  ...baseEntrypoints,
+  ...bindAll(protocols.api),
+  bindScreen(protocols.web.base, handler(MainLayout)),
+  bindScreen(protocols.web.home, handler(HomeScreen)),
+  bindScreen(protocols.web.session, handler(SessionScreen)),
+  bindScreen(protocols.web.about, handler(AboutScreen)),
+]

package/template/sources/web/src/index.css

@@ -1,5 +1,12 @@
 @import "tailwindcss";
 
+/*
+ * Tailwind scans this app's sources for class names, and node_modules is excluded from that
+ * scan by default — so the classes that exist ONLY inside @owlmeans/web-panel components
+ * (the navigation shell, the footer) would never reach the stylesheet. This line adds them.
+ */
+@source "../../../node_modules/@owlmeans/web-panel/src";
+
 /*
  * shadcn / Tailwind v4 design tokens (new-york, neutral). The app owns these — they
  * replace what @owlmeans/owl-theme would otherwise provide. The shadcn primitives in

package/template/sources/web/src/index.tsx

@@ -2,12 +2,12 @@ import './index.css'
 import { APP_API, APP_WEB } from '__APP_SLUG__-common'
 import config from './config.js'
 import { makeContext } from './context.js'
-import { appModules } from './modules.js'
+import { appEntrypoints } from './entrypoints.js'
 import { render } from './render.js'
 import type { Config, Context } from './types.js'
 
 const context = makeContext<Config, Context>(config)
-context.registerEntrypoints(appModules)
+context.registerEntrypoints(appEntrypoints)
 
 context.serviceRoute(APP_WEB, true)
 context.serviceRoute(APP_API, true)

package/template/sources/web/src/layout/main.tsx

@@ -1,21 +1,18 @@
 import type { FC, PropsWithChildren } from 'react'
-import { HOME, useNavigate } from '@owlmeans/web-panel'
-import { MainNavigation } from '@/components/nav/main'
+import { NavLayout } from '@owlmeans/web-panel'
+import { footerLinks, navConfig } from '@/nav'
 
-export const MainLayout: FC<PropsWithChildren> = ({ children }) => {
-  const nav = useNavigate()
-
-  return (
-    <div className="min-h-screen bg-background text-foreground">
-      <header className="border-b">
-        <div className="mx-auto flex h-16 max-w-4xl items-center justify-between px-4">
-          <a onClick={nav.press(HOME)} className="cursor-pointer text-lg font-semibold">
-            __APP_NAME__
-          </a>
-          <MainNavigation />
-        </div>
-      </header>
-      <main className="mx-auto max-w-4xl px-4 py-8">{children}</main>
-    </div>
-  )
-}
+/**
+ * The application shell. `NavLayout` renders the header with the section menu, the side menu
+ * of the active section (hidden when that section has a single screen), the content, and the
+ * footer — the screen arrives as `children`.
+ *
+ * The page width comes from the shell, which applies it to the header, the content and the
+ * footer alike; set `containerClassName` to change it for all three at once, never a width on
+ * the content alone.
+ */
+export const MainLayout: FC<PropsWithChildren> = ({ children }) => (
+  <NavLayout nav={navConfig} title="__APP_NAME__" footer={footerLinks}>
+    {children}
+  </NavLayout>
+)

package/template/sources/web/src/nav.bare.ts

@@ -0,0 +1,21 @@
+import { HOME } from '@owlmeans/web-panel'
+import type { PanelNavConfig, PanelNavLink } from '@owlmeans/web-panel'
+
+/**
+ * The application's navigation, as data.
+ *
+ * Sections are the top menu; their items are the side menu of whichever section is active.
+ * A section holding ONE item renders no side menu at all — which is why the single-screen
+ * shell below shows none. Labels here are literal; drop them to fall back on the panel i18n
+ * keys (`nav.<section>` / `modules.<alias>`) instead.
+ */
+export const navConfig: PanelNavConfig = {
+  sections: [
+    { name: 'home', label: 'Home', items: [{ alias: HOME, label: 'Overview' }] },
+  ],
+}
+
+export const footerLinks: PanelNavLink[] = [
+  { alias: HOME, label: '__APP_NAME__' },
+  { href: 'https://owlmeans.com', label: 'OwlMeans', open: true },
+]

package/template/sources/web/src/nav.ts

@@ -0,0 +1,28 @@
+import { HOME } from '@owlmeans/web-panel'
+import type { PanelNavConfig, PanelNavLink } from '@owlmeans/web-panel'
+import { web } from '__APP_SLUG__-common'
+
+/**
+ * The application's navigation, as data.
+ *
+ * Sections are the top menu; their items are the side menu of whichever section is active.
+ * A section holding ONE item renders no side menu at all — `home` below shows that, `demo`
+ * shows the two-level case. Labels here are literal; drop them to fall back on the panel
+ * i18n keys (`nav.<section>` / `modules.<alias>`) instead.
+ */
+export const navConfig: PanelNavConfig = {
+  sections: [
+    { name: 'home', label: 'Home', items: [{ alias: HOME, label: 'Overview' }] },
+    {
+      name: 'demo', label: 'Demo', items: [
+        { alias: web.session, label: 'Session' },
+        { alias: web.about, label: 'About' },
+      ]
+    },
+  ],
+}
+
+export const footerLinks: PanelNavLink[] = [
+  { alias: HOME, label: '__APP_NAME__' },
+  { href: 'https://owlmeans.com', label: 'OwlMeans', open: true },
+]

package/template/sources/web/src/screens/about.tsx

@@ -0,0 +1,19 @@
+import type { FC } from 'react'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
+
+export const AboutScreen: FC = () => (
+  <Card>
+    <CardHeader>
+      <CardTitle>About __APP_NAME__</CardTitle>
+      <CardDescription>
+        The second screen of the Demo section — which is why that section shows a side menu
+        and the single-screen Home section does not.
+      </CardDescription>
+    </CardHeader>
+    <CardContent>
+      <p className="text-sm text-muted-foreground">
+        Built with OwlMeans Common. Navigation lives in <code>src/nav.ts</code>.
+      </p>
+    </CardContent>
+  </Card>
+)

package/template/sources/web/src/screens/home.bare.tsx

@@ -0,0 +1,17 @@
+import type { FC } from 'react'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
+
+export const HomeScreen: FC = () => (
+  <Card>
+    <CardHeader>
+      <CardTitle>__APP_NAME__</CardTitle>
+      <CardDescription>__APP_DESCRIPTION__</CardDescription>
+    </CardHeader>
+    <CardContent>
+      <p className="text-sm text-muted-foreground">
+        Screens live in <code>src/screens</code>, the menu that reaches them in
+        {' '}<code>src/nav.ts</code>, and the routes they hang off in <code>src/entrypoints.ts</code>.
+      </p>
+    </CardContent>
+  </Card>
+)