@owlmeans/create-app 0.1.10

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

@@ -0,0 +1,77 @@
+@import "tailwindcss";
+
+/*
+ * 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
+ * components/ui and the @owlmeans web components consume them via `bg-background`, etc.
+ */
+@theme {
+  --color-background:           oklch(1 0 0);
+  --color-foreground:           oklch(0.145 0 0);
+
+  --color-card:                 oklch(1 0 0);
+  --color-card-foreground:      oklch(0.145 0 0);
+
+  --color-popover:              oklch(1 0 0);
+  --color-popover-foreground:   oklch(0.145 0 0);
+
+  --color-primary:              oklch(0.205 0 0);
+  --color-primary-foreground:   oklch(0.985 0 0);
+
+  --color-secondary:            oklch(0.97 0 0);
+  --color-secondary-foreground: oklch(0.205 0 0);
+
+  --color-muted:                oklch(0.97 0 0);
+  --color-muted-foreground:     oklch(0.556 0 0);
+
+  --color-accent:               oklch(0.97 0 0);
+  --color-accent-foreground:    oklch(0.205 0 0);
+
+  --color-destructive:          oklch(0.577 0.245 27.325);
+  --color-success:              oklch(0.62 0.18 145);
+
+  --color-border:               oklch(0.922 0 0);
+  --color-input:                oklch(0.922 0 0);
+  --color-ring:                 oklch(0.708 0 0);
+
+  --radius:                     0.625rem;
+
+  --animate-progress-indeterminate: progress-indeterminate 1.5s linear infinite;
+
+  @keyframes progress-indeterminate {
+    0%   { transform: translateX(-100%); }
+    100% { transform: translateX(100%); }
+  }
+}
+
+.dark {
+  --color-background:           oklch(0.145 0 0);
+  --color-foreground:           oklch(0.985 0 0);
+  --color-card:                 oklch(0.205 0 0);
+  --color-card-foreground:      oklch(0.985 0 0);
+  --color-popover:              oklch(0.205 0 0);
+  --color-popover-foreground:   oklch(0.985 0 0);
+  --color-primary:              oklch(0.922 0 0);
+  --color-primary-foreground:   oklch(0.205 0 0);
+  --color-secondary:            oklch(0.269 0 0);
+  --color-secondary-foreground: oklch(0.985 0 0);
+  --color-muted:                oklch(0.269 0 0);
+  --color-muted-foreground:     oklch(0.708 0 0);
+  --color-accent:               oklch(0.269 0 0);
+  --color-accent-foreground:    oklch(0.985 0 0);
+  --color-destructive:          oklch(0.704 0.191 22.216);
+  --color-success:              oklch(0.7 0.18 145);
+  --color-border:               oklch(1 0 0 / 10%);
+  --color-input:                oklch(1 0 0 / 15%);
+  --color-ring:                 oklch(0.556 0 0);
+}
+
+@layer base {
+  * {
+    border-color: var(--color-border);
+  }
+  body {
+    background-color: var(--color-background);
+    color: var(--color-foreground);
+  }
+}

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

@@ -0,0 +1,15 @@
+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 { render } from './render.js'
+import type { Config, Context } from './types.js'
+
+const context = makeContext<Config, Context>(config)
+context.registerEntrypoints(appModules)
+
+context.serviceRoute(APP_WEB, true)
+context.serviceRoute(APP_API, true)
+
+render<Config, Context>(context)

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

@@ -0,0 +1,21 @@
+import type { FC, PropsWithChildren } from 'react'
+import { HOME, useNavigate } from '@owlmeans/web-panel'
+import { MainNavigation } from '@/components/nav/main'
+
+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>
+  )
+}

package/template/sources/web/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from 'clsx'
+import { twMerge } from 'tailwind-merge'
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}

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

@@ -0,0 +1,20 @@
+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 { 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)))
+
+export const appModules = modules

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

@@ -0,0 +1,8 @@
+import type { AppContext } from '@owlmeans/web-client'
+import { render as basicRender, provide } from '@owlmeans/web-client'
+import { PanelApp } from '@owlmeans/web-panel'
+import type { Config, Context } from './types.js'
+
+export const render = <C extends Config, T extends Context<C>>(context: T) => {
+  basicRender(<PanelApp context={context as unknown as AppContext} provide={provide} />)
+}

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

@@ -0,0 +1,24 @@
+import type { FC } from 'react'
+import { useNavigate } from '@owlmeans/web-panel'
+import { web } from '__APP_SLUG__-common'
+import { Button } from '@/components/ui/button'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
+
+export const HomeScreen: FC = () => {
+  const nav = useNavigate()
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Welcome to __APP_NAME__</CardTitle>
+        <CardDescription>
+          A minimal fullstack OwlMeans Common app — no authentication, with session data
+          held in an in-memory resource on the backend.
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <Button onClick={nav.press(web.session)}>Open the session demo →</Button>
+      </CardContent>
+    </Card>
+  )
+}

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

@@ -0,0 +1,94 @@
+import { useEffect, useState, type FC } from 'react'
+import type { ClientEntrypoint } from '@owlmeans/client-entrypoint'
+import { session, type SessionItem } from '__APP_SLUG__-common'
+import { useContext } from '../context.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)
+  if (sid == null) {
+    sid = crypto.randomUUID()
+    localStorage.setItem(SID_KEY, sid)
+  }
+  return sid
+}
+
+export const SessionScreen: FC = () => {
+  const ctx = useContext()
+  const sid = sessionId()
+  const [items, setItems] = useState<SessionItem[]>([])
+  const [text, setText] = useState('')
+  const [busy, setBusy] = useState(false)
+
+  const load = async () => {
+    const [data] = await ctx
+      .entrypoint<ClientEntrypoint<SessionItem[]>>(session.list)
+      .call({ params: { sid } })
+    setItems(data ?? [])
+  }
+
+  useEffect(() => { void load() }, [])
+
+  const add = async () => {
+    if (text.trim() === '') return
+    setBusy(true)
+    try {
+      await ctx
+        .entrypoint<ClientEntrypoint<SessionItem>>(session.add)
+        .call({ params: { sid }, body: { text } })
+      setText('')
+      await load()
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  const remove = async (id: string) => {
+    await ctx
+      .entrypoint<ClientEntrypoint<{ removed: boolean }>>(session.remove)
+      .call({ params: { sid, id } })
+    await load()
+  }
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Session items</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <p className="mb-4 text-sm text-muted-foreground">
+          Stored in memory on the API, keyed by your session id <code>{sid.slice(0, 8)}…</code>
+        </p>
+        <div className="mb-4 flex gap-2">
+          <Input
+            value={text}
+            onChange={e => setText(e.target.value)}
+            placeholder="Add an item…"
+            onKeyDown={e => { if (e.key === 'Enter') void add() }}
+          />
+          <Button onClick={() => void add()} disabled={busy}>Add</Button>
+        </div>
+        <ul className="flex flex-col gap-2">
+          {items.map(item => (
+            <li
+              key={item.id}
+              className="flex items-center justify-between rounded-md border px-3 py-2"
+            >
+              <span>{item.text}</span>
+              <Button variant="ghost" size="sm" onClick={() => void remove(item.id)}>
+                Remove
+              </Button>
+            </li>
+          ))}
+          {items.length === 0 && (
+            <li className="text-sm text-muted-foreground">No items yet — add one above.</li>
+          )}
+        </ul>
+      </CardContent>
+    </Card>
+  )
+}

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

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

package/template/sources/web/tsconfig.json

@@ -0,0 +1,17 @@
+{
+  "extends": [
+    "@owlmeans/dep-config/tsconfig.base.json",
+    "@owlmeans/dep-config/tsconfig.react.json"
+  ],
+  "compilerOptions": {
+    "rootDir": "./src/",
+    "outDir": "./build/",
+    "moduleResolution": "Bundler",
+    "noEmit": true,
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["./src/**/*"],
+  "exclude": ["./dist/**/*", "./build/**/*", "./*.ts"]
+}

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

@@ -0,0 +1,29 @@
+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'
+
+// Packages that must resolve to a single copy so the React context instances created
+// by providers and read by hooks are the same object.
+const owlMeansSingletons = [
+  '@owlmeans/client',
+  '@owlmeans/client-i18n',
+  '@owlmeans/web-client',
+  '@owlmeans/web-panel',
+]
+
+export default defineConfig({
+  plugins: [react(), tsconfigPaths(), tailwindcss()],
+  server: {
+    port: 3001,
+    host: '0.0.0.0',
+    strictPort: true,
+  },
+  resolve: {
+    alias: [
+      { find: '@', replacement: path.resolve(__dirname, 'src') },
+    ],
+    dedupe: ['react', 'react-dom', 'react-i18next', 'i18next', ...owlMeansSingletons],
+  },
+})