@owlmeans/create-app 0.1.10

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

@@ -0,0 +1,14 @@
+import { makeContext as makeBasicContext } from '@owlmeans/server-app'
+import { appendStaticResource } from '@owlmeans/static-resource'
+import { SESSION_ITEMS } from './consts.js'
+import type { Config, Context } from './types.js'
+
+export const makeContext = <C extends Config, T extends Context<C>>(cfg: C): T => {
+  const context = makeBasicContext<C, T>(cfg, true)
+
+  // Register an in-memory resource for session items. No database required —
+  // data lives in process memory and is cleared when the api restarts.
+  appendStaticResource<C, T>(context, SESSION_ITEMS)
+
+  return context
+}

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

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

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

@@ -0,0 +1,11 @@
+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/api/src/types.ts

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

package/template/sources/api/tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "extends": [
+    "@owlmeans/dep-config/tsconfig.base.json",
+    "@owlmeans/dep-config/tsconfig.node.json"
+  ],
+  "compilerOptions": {
+    "rootDir": "./src/",
+    "outDir": "./build/"
+  },
+  "exclude": ["./dist/**/*", "./build/**/*", "./*.ts"]
+}

package/template/sources/common/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "__APP_SLUG__-common",
+  "version": "0.1.0",
+  "private": true,
+  "type": "module",
+  "main": "build/index.js",
+  "module": "build/index.js",
+  "types": "build/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./build/index.js",
+      "types": "./build/index.d.ts",
+      "default": "./build/index.js"
+    }
+  },
+  "scripts": {
+    "dev": "tsc -b -w --preserveWatchOutput --pretty",
+    "build": "tsc -b",
+    "typecheck": "tsc -b"
+  },
+  "dependencies": {
+    "@owlmeans/config": "^0.1.9",
+    "@owlmeans/entrypoint": "^0.1.9",
+    "@owlmeans/error": "^0.1.9",
+    "@owlmeans/resource": "^0.1.9",
+    "@owlmeans/route": "^0.1.9",
+    "ajv": "^8.17.1"
+  },
+  "devDependencies": {
+    "@owlmeans/dep-config": "^0.1.9",
+    "@types/node": "^24.10.1",
+    "typescript": "^5.9.2"
+  }
+}

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

@@ -0,0 +1,24 @@
+import { AppType, service } from '@owlmeans/config'
+import { API_PORT, APP, APP_API, APP_WEB, WEB_PORT } from './consts.js'
+
+// The web (frontend) service this config belongs to by default.
+const cfg = service({
+  type: AppType.Frontend,
+  service: APP_WEB,
+  host: 'localhost',
+  port: WEB_PORT,
+})
+
+// The api (backend) service the web calls. `base: 'api'` prefixes every API route with `/api`.
+service({
+  type: AppType.Backend,
+  service: APP_API,
+  host: 'localhost',
+  port: API_PORT,
+  base: 'api',
+}, cfg)
+
+cfg.debug = { all: true }
+cfg.alias = APP
+
+export const commonConfig = cfg

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

@@ -0,0 +1,21 @@
+/** 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
+
+/** 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/index.ts

@@ -0,0 +1,5 @@
+export * from './consts.js'
+export * from './types.js'
+export * from './schemas.js'
+export * from './config.js'
+export * from './modules.js'

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

@@ -0,0 +1,26 @@
+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/common/src/schemas.ts

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

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

@@ -0,0 +1,19 @@
+export interface SessionItem {
+  id: string
+  sessionId: string
+  text: string
+  createdAt: string
+}
+
+export interface AddItemPayload {
+  text: string
+}
+
+export interface SessionParams {
+  sid: string
+}
+
+export interface ItemParams {
+  sid: string
+  id: string
+}

package/template/sources/common/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "extends": "@owlmeans/dep-config/tsconfig.base.json",
+  "compilerOptions": {
+    "rootDir": "./src/",
+    "outDir": "./build/"
+  },
+  "exclude": ["./dist/**/*", "./build/**/*", "./*.ts"]
+}

package/template/sources/web/index.html

@@ -0,0 +1,15 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>__APP_NAME__</title>
+</head>
+
+<body>
+  <div id="root"></div>
+  <script type="module" src="./src/index.tsx"></script>
+</body>
+
+</html>

package/template/sources/web/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "__APP_SLUG__-web",
+  "version": "0.1.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "sleep 3 && vite",
+    "start": "vite",
+    "build": "vite build",
+    "typecheck": "tsc --noEmit",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@owlmeans/client": "^0.1.9",
+    "@owlmeans/client-config": "^0.1.9",
+    "@owlmeans/client-context": "^0.1.9",
+    "@owlmeans/client-entrypoint": "^0.1.9",
+    "@owlmeans/client-i18n": "^0.1.9",
+    "@owlmeans/entrypoint": "^0.1.9",
+    "@owlmeans/route": "^0.1.9",
+    "@owlmeans/web-client": "^0.1.9",
+    "@owlmeans/web-panel": "^0.1.9",
+    "__APP_SLUG__-common": "workspace:^",
+    "@radix-ui/react-label": "^2.1.0",
+    "@radix-ui/react-progress": "^1.1.0",
+    "@radix-ui/react-slot": "^1.1.0",
+    "ajv": "^8.17.1",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.1.0",
+    "i18next": "^23.16.8",
+    "lucide-react": "^0.460.0",
+    "react": "19.1.1",
+    "react-dom": "19.1.1",
+    "react-hook-form": "^7.62.0",
+    "react-i18next": "^15.7.4",
+    "tailwind-merge": "^2.5.0",
+    "tailwindcss": "^4.1.13"
+  },
+  "devDependencies": {
+    "@owlmeans/dep-config": "^0.1.9",
+    "@tailwindcss/vite": "^4.1.13",
+    "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^5.0.2",
+    "typescript": "^5.9.2",
+    "vite": "^7.1.5",
+    "vite-tsconfig-paths": "^5.1.4"
+  }
+}

package/template/sources/web/src/components/nav/main.tsx

@@ -0,0 +1,15 @@
+import type { FC } from 'react'
+import { HOME, useNavigate } from '@owlmeans/web-panel'
+import { web } from '__APP_SLUG__-common'
+import { Button } from '@/components/ui/button'
+
+export const MainNavigation: FC = () => {
+  const nav = useNavigate()
+
+  return (
+    <nav className="flex items-center gap-1">
+      <Button variant="ghost" size="sm" onClick={nav.press(HOME)}>Home</Button>
+      <Button variant="ghost" size="sm" onClick={nav.press(web.session)}>Session</Button>
+    </nav>
+  )
+}

package/template/sources/web/src/components/ui/alert.tsx

@@ -0,0 +1,70 @@
+// shadcn alert — sourced from shadcn (new-york)
+// Extended with a `success` variant on top of the default `default` / `destructive`.
+import * as React from 'react'
+import { cva, type VariantProps } from 'class-variance-authority'
+
+import { cn } from '@/lib/utils'
+
+const alertVariants = cva(
+  "relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
+  {
+    variants: {
+      variant: {
+        default: "bg-card text-card-foreground",
+        destructive:
+          "text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90",
+        success:
+          "text-success bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-success/90",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function Alert({
+  className,
+  variant,
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>) {
+  return (
+    <div
+      data-slot="alert"
+      role="alert"
+      className={cn(alertVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-title"
+      className={cn(
+        "col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDescription({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-description"
+      className={cn(
+        "text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Alert, AlertTitle, AlertDescription }

package/template/sources/web/src/components/ui/button.tsx

@@ -0,0 +1,60 @@
+// shadcn button — sourced from shadcn (new-york)
+import * as React from 'react'
+import { Slot } from '@radix-ui/react-slot'
+import { cva, type VariantProps } from 'class-variance-authority'
+
+import { cn } from '@/lib/utils'
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive cursor-pointer",
+  {
+    variants: {
+      variant: {
+        default:
+          "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline:
+          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+        secondary:
+          "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
+        ghost:
+          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        icon: "size-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function Button({
+  className,
+  variant,
+  size,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"button"> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean
+  }) {
+  const Comp = asChild ? Slot : "button"
+
+  return (
+    <Comp
+      data-slot="button"
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+export { Button, buttonVariants }

package/template/sources/web/src/components/ui/card.tsx

@@ -0,0 +1,93 @@
+// shadcn card — sourced from shadcn (new-york)
+import * as React from 'react'
+
+import { cn } from '@/lib/utils'
+
+function Card({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card"
+      className={cn(
+        "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-header"
+      className={cn(
+        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-title"
+      className={cn("leading-none font-semibold", className)}
+      {...props}
+    />
+  )
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+function CardAction({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-action"
+      className={cn(
+        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-content"
+      className={cn("px-6", className)}
+      {...props}
+    />
+  )
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-footer"
+      className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardAction,
+  CardDescription,
+  CardContent,
+}

package/template/sources/web/src/components/ui/input.tsx

@@ -0,0 +1,22 @@
+// shadcn input — sourced from shadcn (new-york)
+import * as React from 'react'
+
+import { cn } from '@/lib/utils'
+
+function Input({ className, type, ...props }: React.ComponentProps<"input">) {
+  return (
+    <input
+      type={type}
+      data-slot="input"
+      className={cn(
+        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+        "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Input }

package/template/sources/web/src/components/ui/label.tsx

@@ -0,0 +1,23 @@
+// shadcn label — sourced from shadcn (new-york)
+import * as React from 'react'
+import * as LabelPrimitive from '@radix-ui/react-label'
+
+import { cn } from '@/lib/utils'
+
+function Label({
+  className,
+  ...props
+}: React.ComponentProps<typeof LabelPrimitive.Root>) {
+  return (
+    <LabelPrimitive.Root
+      data-slot="label"
+      className={cn(
+        "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Label }

package/template/sources/web/src/components/ui/progress.tsx

@@ -0,0 +1,44 @@
+// shadcn progress — sourced from shadcn (new-york)
+// Extended with `indeterminate` mode: when `value === undefined` (or not passed),
+// the indicator animates left-to-right continuously via the
+// `--animate-progress-indeterminate` token defined in index.css.
+import * as React from 'react'
+import * as ProgressPrimitive from '@radix-ui/react-progress'
+
+import { cn } from '@/lib/utils'
+
+function Progress({
+  className,
+  value,
+  ...props
+}: React.ComponentProps<typeof ProgressPrimitive.Root>) {
+  const indeterminate = value == null
+
+  return (
+    <ProgressPrimitive.Root
+      data-slot="progress"
+      className={cn(
+        "bg-primary/20 relative h-2 w-full overflow-hidden rounded-full",
+        className
+      )}
+      value={indeterminate ? undefined : value}
+      {...props}
+    >
+      <ProgressPrimitive.Indicator
+        data-slot="progress-indicator"
+        data-state={indeterminate ? 'indeterminate' : 'determinate'}
+        className={cn(
+          "bg-primary h-full w-full flex-1 transition-all",
+          indeterminate && "absolute inset-y-0 left-0 w-1/3 animate-[progress-indeterminate_1.5s_linear_infinite]"
+        )}
+        style={
+          indeterminate
+            ? undefined
+            : { transform: `translateX(-${100 - (value || 0)}%)` }
+        }
+      />
+    </ProgressPrimitive.Root>
+  )
+}
+
+export { Progress }

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

@@ -0,0 +1,7 @@
+import { config } from '@owlmeans/web-panel'
+import { APP_WEB, commonConfig } from '__APP_SLUG__-common'
+import type { Config } from './types.js'
+
+const cfg: Config = config(APP_WEB, commonConfig as Config)
+
+export default cfg

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

@@ -0,0 +1,7 @@
+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>()
+
+export const makeContext = <C extends Config, T extends Context<C>>(cfg: C): T =>
+  makeBasicContext<C, T>(cfg)