@owlmeans/create-app 0.1.18-rc.8 → 0.1.19-rc.0

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

@@ -1,9 +1,7 @@
 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'
+import { SESSION_STATE } from './consts.js'
 
 export const useContext = (): Context => useBasicContext<Config, Context>()
 
@@ -15,9 +13,5 @@ export const makeContext = <C extends Config, T extends Context<C>>(cfg: C): T =
   // the app in a module of its own.
   appendStateResource<C, T>(context, SESSION_STATE)
 
-  // A child context has to inherit THIS factory, not the layer's. Without the line, a derived
-  // context is built without the resource registered above and every lookup on it throws.
-  context.makeContext = makeContext as typeof context.makeContext
-
   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 { appProtocols } 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 appBindings = [
+  ...baseEntrypoints,
+  ...bindAll(appProtocols.api),
+  // BASE renders the shared layout; HOME is its default child.
+  bindScreen(appProtocols.web.base, handler(MainLayout)),
+  bindScreen(appProtocols.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 { appProtocols } 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 appBindings = [
+  ...baseEntrypoints,
+  ...bindAll(appProtocols.api),
+  bindScreen(appProtocols.web.base, handler(MainLayout)),
+  bindScreen(appProtocols.web.home, handler(HomeScreen)),
+  bindScreen(appProtocols.web.session, handler(SessionScreen)),
+  bindScreen(appProtocols.web.about, handler(AboutScreen)),
+]

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

@@ -5,7 +5,7 @@
  * 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/build";
+@source "../../../node_modules/@owlmeans/web-panel/src";
 
 /*
  * shadcn / Tailwind v4 design tokens (new-york, neutral). The app owns these — they

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 { appBindings } 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(appBindings)
 
 context.serviceRoute(APP_WEB, true)
 context.serviceRoute(APP_API, true)

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

@@ -1,14 +1,19 @@
 import type { FC, PropsWithChildren } from 'react'
 import { NavLayout } from '@owlmeans/web-panel'
-import { footerLinks, navConfig } from '@/nav'
+import { navConfig } from '@/nav'
+import { footerLinks } from '@/consts'
 
 /**
  * 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} contentClassName="mx-auto w-full max-w-4xl">
+  <NavLayout nav={navConfig} title="__APP_NAME__" footer={footerLinks}>
     {children}
   </NavLayout>
 )

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

@@ -0,0 +1,24 @@
+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' }] },
+  ],
+}
+
+// The platform/owner credit — "Powered by OwlMeans" and the copyright the platform delivers — is
+// rendered by the shell itself (`NavLayout`'s `Footer`) and is never a footer link: an app link
+// list is places IN the app, and the credit is not one of those.
+export const footerLinks: PanelNavLink[] = [
+  { href: '/THIRD-PARTY-NOTICES.txt', label: 'Third-party notices' },
+  { alias: HOME, label: '__APP_NAME__' },
+]

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

@@ -1,5 +1,4 @@
-import { HOME } from '@owlmeans/web-panel'
-import type { PanelNavConfig, PanelNavLink } from '@owlmeans/web-panel'
+import { HOME, type PanelNavConfig } from '@owlmeans/web-panel'
 import { web } from '__APP_SLUG__-common'
 
 /**
@@ -15,14 +14,10 @@ export const navConfig: PanelNavConfig = {
     { name: 'home', label: 'Home', items: [{ alias: HOME, label: 'Overview' }] },
     {
       name: 'demo', label: 'Demo', items: [
-        { alias: web.session, label: 'Session' },
-        { alias: web.about, label: 'About' },
+        { alias: web.session.alias, label: 'Session' },
+        { alias: web.about.alias, 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/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>
+)

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

@@ -1,19 +1,17 @@
 import { useEffect, useState, type FC } from 'react'
-import type { ClientEntrypoint } from '@owlmeans/client-entrypoint'
 import { useStoreList } from '@owlmeans/client'
 import { session, type SessionItem } from '__APP_SLUG__-common'
-import { SESSION_STATE, useContext } from '../context.js'
+import { useContext } from '../context.js'
+import { SESSION_ID_KEY, SESSION_STATE } from '../consts.js'
 import { Button } from '@/components/ui/button'
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
 import { Input } from '@/components/ui/input'
 
-const SID_KEY = '__APP_SLUG__-sid'
-
 const sessionId = (): string => {
-  let sid = localStorage.getItem(SID_KEY)
+  let sid = localStorage.getItem(SESSION_ID_KEY)
   if (sid == null) {
     sid = crypto.randomUUID()
-    localStorage.setItem(SID_KEY, sid)
+    localStorage.setItem(SESSION_ID_KEY, sid)
   }
   return sid
 }
@@ -33,15 +31,15 @@ export const SessionScreen: FC = () => {
    */
   const items = useStoreList<SessionItem>({ query: {}, resource: SESSION_STATE })
 
-  // The server is the source of truth; the store is what the screen reads. Fetch once, write
-  // what came back into the store, and let the subscription render it.
+  // The server is the source of truth; the store is what the screen reads. Fetch once, install
+  // what came back, and let the subscription render it. `replace` rather than a save per item:
+  // the endpoint answers with the session's whole set, so an item removed on another tab has to
+  // leave the store too, and one write wakes the subscribers once instead of once per record.
   const load = async () => {
-    const [data] = await ctx
-      .entrypoint<ClientEntrypoint<SessionItem[]>>(session.list)
+    const data = await ctx
+      .entrypoint(session.list)
       .call({ params: { sid } })
-    for (const item of data ?? []) {
-      await store.save(item)
-    }
+    await store.replace(data ?? [])
   }
 
   useEffect(() => { void load() }, [])
@@ -50,8 +48,8 @@ export const SessionScreen: FC = () => {
     if (text.trim() === '') return
     setBusy(true)
     try {
-      const [item] = await ctx
-        .entrypoint<ClientEntrypoint<SessionItem>>(session.add)
+      const item = await ctx
+        .entrypoint(session.add)
         .call({ params: { sid }, body: { text } })
       setText('')
       if (item != null) {
@@ -64,7 +62,7 @@ export const SessionScreen: FC = () => {
 
   const remove = async (id: string) => {
     await ctx
-      .entrypoint<ClientEntrypoint<{ removed: boolean }>>(session.remove)
+      .entrypoint(session.remove)
       .call({ params: { sid, id } })
     await store.delete(id)
   }

package/template/sources/web/src/vite-env.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+  /** `debug` | `info` | `warn` | `error` | `silent`. Default: `debug` under `vite`, `info` in a build. */
+  readonly VITE_LOG_LEVEL?: string
+  /** Scopes forced to debug whatever the level is, e.g. `session,i18n` or `*`. */
+  readonly VITE_LOG_DEBUG?: string
+}

package/template/sources/web/vite.config.ts

@@ -1,6 +1,6 @@
+import { createThirdPartyNoticesPlugin } from '@owlmeans/dep-config/notices'
 import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
-import tsconfigPaths from 'vite-tsconfig-paths'
 import tailwindcss from '@tailwindcss/vite'
 import path from 'path'
 
@@ -14,13 +14,15 @@ const owlMeansSingletons = [
 ]
 
 export default defineConfig({
-  plugins: [react(), tsconfigPaths(), tailwindcss()],
+  plugins: [createThirdPartyNoticesPlugin({ root: import.meta.dirname, additionalPackages: ['tailwindcss'] }), react(), tailwindcss()],
   server: {
     port: 3001,
     host: '0.0.0.0',
     strictPort: true,
   },
   resolve: {
+    // Vite resolves the `paths` of tsconfig.json itself since 8.
+    tsconfigPaths: true,
     alias: [
       { find: '@', replacement: path.resolve(__dirname, 'src') },
     ],

package/template/CLAUDE.md

@@ -1,13 +0,0 @@
-@AGENTS.md
-
-## Claude Code bridge
-
-All guidance lives in `AGENTS.md` (imported above) and in skills under
-`.agents/skills/<name>/SKILL.md` — the single canonical location shared with Copilot
-and Codex. `.claude/skills/` holds only generated per-skill symlinks (gitignored
-except `.gitkeep`); the committed `SessionStart` hook runs
-`sh .agents/scripts/link-skills.sh` to (re)create them each session.
-
-- Never author files under `.claude/skills/` — write skills in `.agents/skills/`.
-- After creating, renaming, or deleting a skill, re-run
-  `sh .agents/scripts/link-skills.sh` so this session picks it up.

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

@@ -1,11 +0,0 @@
-import { elevate, modules } from '@owlmeans/server-app'
-import { session, sessionModules } from '__APP_SLUG__-common'
-import * as handlers from './app/session/index.js'
-
-// Attach handler implementations to the shared entrypoint declarations.
-elevate(sessionModules, session.base)
-elevate(sessionModules, session.list, handlers.list)
-elevate(sessionModules, session.add, handlers.add)
-elevate(sessionModules, session.remove, handlers.remove)
-
-export const appModules = [...modules, ...sessionModules]

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

@@ -1,26 +0,0 @@
-import { body, entrypoint, filter, params } from '@owlmeans/entrypoint'
-import { route, RouteMethod } from '@owlmeans/route'
-import { session } from './consts.js'
-import { AddItemSchema, ItemParamsSchema, SessionParamsSchema } from './schemas.js'
-import type { AddItemPayload, ItemParams, SessionParams } from './types.js'
-
-/**
- * Shared entrypoint declarations. The api elevates these with handlers; the web
- * elevates 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 sessionModules = [
-  entrypoint(route(session.base, '/session')),
-  entrypoint(
-    route(session.list, '/:sid/items', { parent: session.base, method: RouteMethod.GET }),
-    filter(params<SessionParams>(SessionParamsSchema)),
-  ),
-  entrypoint(
-    route(session.add, '/:sid/items', { parent: session.base, method: RouteMethod.POST }),
-    filter(params<SessionParams>(SessionParamsSchema, body<AddItemPayload>(AddItemSchema))),
-  ),
-  entrypoint(
-    route(session.remove, '/:sid/items/:id', { parent: session.base, method: RouteMethod.DELETE }),
-    filter(params<ItemParams>(ItemParamsSchema)),
-  ),
-]

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

@@ -1,22 +0,0 @@
-import { BASE, elevate, entrypoint, frontend, handler, HOME, modules as baseModules, route } from '@owlmeans/web-panel'
-import { session, sessionModules, web } 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'
-
-const modules = [...baseModules, ...sessionModules]
-
-// Backend entrypoints — elevated without a component so the client can call them.
-elevate(modules, session.base)
-elevate(modules, session.list)
-elevate(modules, session.add)
-elevate(modules, session.remove)
-
-// Frontend layout + screens. BASE renders the shared layout; HOME is its default child.
-modules.push(entrypoint(route(BASE, '/', frontend()), handler(MainLayout)))
-modules.push(entrypoint(route(HOME, '/', frontend({ default: true, parent: BASE })), handler(HomeScreen)))
-modules.push(entrypoint(route(web.session, '/session', frontend({ parent: BASE })), handler(SessionScreen)))
-modules.push(entrypoint(route(web.about, '/about', frontend({ parent: BASE })), handler(AboutScreen)))
-
-export const appModules = modules