@jskit-ai/create-app 0.1.93 → 0.1.95

package/templates/base-shell/src/pages/home/settings.vue

@@ -0,0 +1,109 @@
+<script setup>
+import ShellOutlet from "@jskit-ai/shell-web/client/components/ShellOutlet";
+import { RouterView } from "vue-router";
+</script>
+
+<template>
+  <section class="generated-ui-screen generated-ui-screen--settings settings-shell d-flex flex-column ga-4">
+    <header>
+      <p class="text-overline text-medium-emphasis mb-1">Settings</p>
+      <h1 class="settings-shell__title">Home settings</h1>
+      <p class="text-body-2 text-medium-emphasis mb-0">Configure shell behavior for this surface.</p>
+    </header>
+
+    <v-sheet rounded="lg" border class="settings-shell__panel">
+      <div class="settings-shell__body">
+        <nav class="settings-shell__nav" aria-label="Home settings sections">
+          <v-list nav density="compact" rounded="lg">
+            <ShellOutlet target="home-settings:primary-menu" />
+          </v-list>
+        </nav>
+
+        <main class="settings-shell__content">
+          <RouterView />
+        </main>
+      </div>
+    </v-sheet>
+  </section>
+</template>
+
+<style scoped>
+.generated-ui-screen {
+  --generated-ui-screen-title-size: 1.85rem;
+  --generated-ui-screen-panel-padding: 1rem;
+}
+
+.settings-shell__title {
+  font-size: var(--generated-ui-screen-title-size);
+  font-weight: 650;
+  letter-spacing: 0;
+  line-height: 1.15;
+  margin: 0 0 0.35rem;
+}
+
+.settings-shell__panel {
+  overflow: hidden;
+}
+
+.settings-shell__body {
+  display: grid;
+  gap: 1rem;
+  grid-template-columns: minmax(12rem, 16rem) minmax(0, 1fr);
+  padding: var(--generated-ui-screen-panel-padding);
+}
+
+.settings-shell__content {
+  border-left: 1px solid rgba(var(--v-theme-on-surface), 0.18);
+  min-width: 0;
+  padding-left: 1rem;
+}
+
+.settings-shell__nav :deep(.v-list) {
+  padding: 0.35rem;
+}
+
+.settings-shell__nav :deep(.v-list-item) {
+  min-height: 48px;
+  padding-inline: 0.6rem 0.7rem;
+}
+
+.settings-shell__nav :deep(.v-list-item__prepend) {
+  margin-inline-end: 0;
+}
+
+.settings-shell__nav :deep(.v-list-item__spacer) {
+  min-width: 0.5rem;
+  width: 0.5rem;
+}
+
+.settings-shell__nav :deep(.v-list-item-title) {
+  line-height: 1.2;
+}
+
+@media (max-width: 960px) {
+  .generated-ui-screen {
+    --generated-ui-screen-title-size: 1.35rem;
+  }
+
+  .settings-shell__body {
+    grid-template-columns: 1fr;
+  }
+
+  .settings-shell__nav :deep(.v-list) {
+    display: flex;
+    gap: 0.25rem;
+    overflow-x: auto;
+    scrollbar-width: thin;
+  }
+
+  .settings-shell__nav :deep(.v-list-item) {
+    flex: 0 0 auto;
+    min-height: 48px;
+  }
+
+  .settings-shell__content {
+    border-left: 0;
+    padding-left: 0;
+  }
+}
+</style>

package/templates/base-shell/src/pages/home.vue

@@ -8,6 +8,13 @@
 }
 </route>
 
+<script setup>
+import ShellLayout from "@/components/ShellLayout.vue";
+import { RouterView } from "vue-router";
+</script>
+
 <template>
-  <RouterView />
+  <ShellLayout title="" subtitle="">
+    <RouterView />
+  </ShellLayout>
 </template>

package/templates/base-shell/src/placement.js

@@ -0,0 +1,56 @@
+import { createPlacementRegistry } from "@jskit-ai/shell-web/client/placement";
+
+const registry = createPlacementRegistry();
+const { addPlacement } = registry;
+
+export { addPlacement };
+
+// Keep the default export near the top so module installers can append addPlacement(...)
+// blocks at the bottom of this file without changing the export section.
+export default function getPlacements() {
+  return registry.build();
+}
+
+addPlacement({
+  id: "shell-web.home.menu.home",
+  target: "shell.primary-nav",
+  kind: "link",
+  surfaces: ["home"],
+  order: 50,
+  props: {
+    label: "Home",
+    surface: "home",
+    scopedSuffix: "/",
+    unscopedSuffix: "/",
+    exact: true
+  }
+});
+
+addPlacement({
+  id: "shell-web.home.menu.settings",
+  target: "shell.primary-nav",
+  kind: "link",
+  surfaces: ["home"],
+  order: 100,
+  props: {
+    label: "Settings",
+    surface: "home",
+    scopedSuffix: "/settings",
+    unscopedSuffix: "/settings"
+  }
+});
+
+addPlacement({
+  id: "shell-web.home.settings.general",
+  target: "page.section-nav",
+  owner: "home-settings",
+  kind: "link",
+  surfaces: ["home"],
+  order: 100,
+  props: {
+    label: "General",
+    surface: "home",
+    scopedSuffix: "/settings/general",
+    unscopedSuffix: "/settings/general"
+  }
+});

package/templates/base-shell/src/placementTopology.js

@@ -0,0 +1,149 @@
+const placements = [];
+
+function addPlacementTopology(value = {}) {
+  placements.push(value);
+}
+
+export { addPlacementTopology };
+export default { placements };
+
+const menuLinkRenderers = Object.freeze({
+  link: "local.main.ui.surface-aware-menu-link-item"
+});
+
+const bottomNavLinkRenderers = Object.freeze({
+  link: "local.main.ui.tab-link-item"
+});
+
+addPlacementTopology({
+  id: "shell.primary-nav",
+  description: "Primary top-level navigation for the current surface.",
+  surfaces: ["*"],
+  default: true,
+  variants: {
+    compact: {
+      outlet: "shell-layout:primary-bottom-nav",
+      renderers: bottomNavLinkRenderers
+    },
+    medium: {
+      outlet: "shell-layout:primary-menu",
+      renderers: menuLinkRenderers
+    },
+    expanded: {
+      outlet: "shell-layout:primary-menu",
+      renderers: menuLinkRenderers
+    }
+  }
+});
+
+addPlacementTopology({
+  id: "shell.secondary-nav",
+  description: "Secondary navigation for the current surface.",
+  surfaces: ["*"],
+  variants: {
+    compact: {
+      outlet: "shell-layout:secondary-menu",
+      renderers: menuLinkRenderers
+    },
+    medium: {
+      outlet: "shell-layout:secondary-menu",
+      renderers: menuLinkRenderers
+    },
+    expanded: {
+      outlet: "shell-layout:secondary-menu",
+      renderers: menuLinkRenderers
+    }
+  }
+});
+
+addPlacementTopology({
+  id: "shell.identity",
+  description: "Current surface identity and switcher controls.",
+  surfaces: ["*"],
+  variants: {
+    compact: {
+      outlet: "shell-layout:top-left"
+    },
+    medium: {
+      outlet: "shell-layout:top-left"
+    },
+    expanded: {
+      outlet: "shell-layout:top-left"
+    }
+  }
+});
+
+addPlacementTopology({
+  id: "shell.status",
+  description: "Surface status, connection, and utility indicators.",
+  surfaces: ["*"],
+  variants: {
+    compact: {
+      outlet: "shell-layout:top-right"
+    },
+    medium: {
+      outlet: "shell-layout:top-right"
+    },
+    expanded: {
+      outlet: "shell-layout:top-right"
+    }
+  }
+});
+
+addPlacementTopology({
+  id: "shell.global-actions",
+  description: "Global surface actions that should stay outside primary navigation.",
+  surfaces: ["*"],
+  variants: {
+    compact: {
+      outlet: "shell-layout:top-right",
+      renderers: menuLinkRenderers
+    },
+    medium: {
+      outlet: "shell-layout:top-right",
+      renderers: menuLinkRenderers
+    },
+    expanded: {
+      outlet: "shell-layout:top-right",
+      renderers: menuLinkRenderers
+    }
+  }
+});
+
+addPlacementTopology({
+  id: "page.supporting-content",
+  description: "Supporting page content that opens as a bottom sheet on compact layouts and a side panel on wider layouts.",
+  surfaces: ["*"],
+  variants: {
+    compact: {
+      outlet: "shell-layout:supporting-bottom-sheet"
+    },
+    medium: {
+      outlet: "shell-layout:supporting-side-panel"
+    },
+    expanded: {
+      outlet: "shell-layout:supporting-side-panel"
+    }
+  }
+});
+
+addPlacementTopology({
+  id: "page.section-nav",
+  owner: "home-settings",
+  description: "Navigation between child pages in the home settings section.",
+  surfaces: ["home"],
+  variants: {
+    compact: {
+      outlet: "home-settings:primary-menu",
+      renderers: menuLinkRenderers
+    },
+    medium: {
+      outlet: "home-settings:primary-menu",
+      renderers: menuLinkRenderers
+    },
+    expanded: {
+      outlet: "home-settings:primary-menu",
+      renderers: menuLinkRenderers
+    }
+  }
+});

package/templates/base-shell/tests/e2e/adaptive-shell.spec.ts

@@ -0,0 +1,4 @@
+import { expect, test } from "@playwright/test";
+import { runAdaptiveShellSmoke } from "@jskit-ai/shell-web/test/adaptiveShellSmoke";
+
+runAdaptiveShellSmoke({ test, expect });

package/templates/base-shell/tests/e2e/base-shell.spec.ts

@@ -48,7 +48,7 @@ test.describe("generated base app responsive smoke", () => {
       await page.setViewportSize({ width: viewport.width, height: viewport.height });
       await page.goto(`${BASE_URL}${SMOKE_PATH}`);
       await expect(page.locator("body")).toBeVisible();
-      await expect(page.getByText("Home base")).toBeVisible();
+      await expect(page.getByText("Ready")).toBeVisible();
       await expectGeneratedScreenContract(page);
       await expectVisibleTapTargets(page);
       await expectNoHorizontalOverflow(page);

package/templates/base-shell/vite.config.mjs

@@ -57,8 +57,22 @@ export default defineConfig({
   test: {
     include: ["tests/client/**/*.vitest.js"]
   },
+  optimizeDeps: {
+    entries: [
+      "index.html",
+      "src/**/*.{js,ts,vue}"
+    ]
+  },
   server: {
     port: devPort,
+    warmup: {
+      clientFiles: [
+        "src/main.{js,ts}",
+        "src/router/**/*.{js,ts}",
+        "src/pages/**/*.{js,ts,vue}",
+        "src/components/**/*.{js,ts,vue}"
+      ]
+    },
     proxy: {
       "/api": {
         target: apiProxyTarget,

package/templates/minimal-shell/.github/workflows/verify.yml

@@ -0,0 +1,29 @@
+name: Verify
+
+on:
+  pull_request:
+  push:
+    branches:
+      - main
+
+permissions:
+  contents: read
+
+jobs:
+  verify:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: npm
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Run verify
+        run: npm run verify

package/templates/minimal-shell/.jskit/lock.json

@@ -0,0 +1,31 @@
+{
+  "lockVersion": 1,
+  "installedPackages": {
+    "@local/main": {
+      "packageId": "@local/main",
+      "version": "0.1.0",
+      "source": {
+        "type": "local-package",
+        "packagePath": "packages/main",
+        "descriptorPath": "packages/main/package.descriptor.mjs"
+      },
+      "managed": {
+        "packageJson": {
+          "dependencies": {
+            "@local/main": {
+              "hadPrevious": false,
+              "previousValue": "",
+              "value": "file:packages/main"
+            }
+          },
+          "devDependencies": {},
+          "scripts": {}
+        },
+        "text": {},
+        "files": []
+      },
+      "options": {},
+      "installedAt": "1970-01-01T00:00:00.000Z"
+    }
+  }
+}

package/templates/minimal-shell/AGENTS.md

@@ -0,0 +1,10 @@
+# App Agent Instructions
+
+Use the JSKIT agent docs and the local app scaffold as the source of truth for app work.
+
+Recommended references:
+
+- `node_modules/@jskit-ai/agent-docs/guide/agent/index.md`
+- `node_modules/@jskit-ai/agent-docs/patterns/INDEX.md`
+
+Keep changes scoped to the user request and verify runtime behavior with tests or explicit checks.

package/templates/minimal-shell/Procfile

@@ -0,0 +1,2 @@
+release: npm run db:migrate
+web: npm run start

package/templates/minimal-shell/app.json

@@ -0,0 +1,14 @@
+{
+  "name": "__APP_NAME__",
+  "healthchecks": {
+    "web": [
+      {
+        "type": "startup",
+        "name": "web-ready",
+        "description": "Application responds to /api/health",
+        "path": "/api/health",
+        "attempts": 6
+      }
+    ]
+  }
+}

package/templates/minimal-shell/bin/server.js

@@ -0,0 +1,8 @@
+import { startServer } from "../server.js";
+
+try {
+  await startServer();
+} catch (error) {
+  console.error("Failed to start __APP_NAME__ server:", error);
+  process.exitCode = 1;
+}

package/templates/minimal-shell/config/public.js

@@ -0,0 +1,41 @@
+import { surfaceAccessPolicies } from "./surfaceAccessPolicies.js";
+
+export const config = {};
+__TENANCY_MODE_LINE__
+
+config.surfaceModeAll = "all";
+config.surfaceDefaultId = "home";
+config.webRootAllowed = "no";
+config.surfaceAccessPolicies = surfaceAccessPolicies;
+config.mobile = {
+  enabled: false,
+  strategy: "",
+  appId: "",
+  appName: "",
+  assetMode: "bundled",
+  devServerUrl: "",
+  apiBaseUrl: "",
+  auth: {
+    callbackPath: "/auth/login",
+    customScheme: "",
+    appLinkDomains: []
+  },
+  android: {
+    packageName: "",
+    minSdk: 26,
+    targetSdk: 35,
+    versionCode: 1,
+    versionName: "1.0.0"
+  }
+};
+config.surfaceDefinitions = {};
+config.surfaceDefinitions.home = {
+  id: "home",
+  label: "Home",
+  pagesRoot: "home",
+  enabled: true,
+  requiresAuth: false,
+  requiresWorkspace: false,
+  accessPolicyId: "public",
+  origin: ""
+};

package/templates/minimal-shell/config/server.js

@@ -0,0 +1 @@
+export const config = {};

package/templates/minimal-shell/config/surfaceAccessPolicies.js

@@ -0,0 +1,3 @@
+export const surfaceAccessPolicies = {};
+
+surfaceAccessPolicies.public = {};

package/templates/minimal-shell/eslint.config.mjs

@@ -0,0 +1,19 @@
+import { baseConfig, nodeConfig, vueConfig, webConfig } from "@jskit-ai/config-eslint/server";
+
+export default [
+  {
+    ignores: ["dist/**", "node_modules/**", "coverage/**", "test-results/**", ".jskit/**"]
+  },
+  {
+    files: ["src/pages/**/*.vue"],
+    languageOptions: {
+      globals: {
+        definePage: "readonly"
+      }
+    }
+  },
+  ...baseConfig,
+  ...vueConfig,
+  ...webConfig,
+  ...nodeConfig
+];

package/templates/minimal-shell/favicon.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
+  <rect width="64" height="64" rx="12" fill="#111827" />
+  <path
+    d="M20 16h24v8H28v20c0 6-4 10-10 10h-2v-8h2c2 0 2-1 2-3V16z"
+    fill="#22d3ee"
+  />
+</svg>

package/templates/minimal-shell/gitignore

@@ -0,0 +1,8 @@
+node_modules/
+dist/
+coverage/
+test-results/
+.jskit/verification/
+.env
+.env.*
+!.env.example

package/templates/minimal-shell/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <title>__APP_TITLE__</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>

package/templates/minimal-shell/jsconfig.json

@@ -0,0 +1,8 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"]
+    }
+  }
+}

package/templates/minimal-shell/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "__APP_NAME__",
+  "version": "0.1.0",
+  "private": true,
+  "type": "module",
+  "description": "Minimal JSKIT base app (Fastify + Vue)",
+  "engines": {
+    "node": ">=20 <23"
+  },
+  "scripts": {
+    "server": "node ./bin/server.js",
+    "server:all": "node ./bin/server.js",
+    "server:home": "SERVER_SURFACE=home node ./bin/server.js",
+    "start": "node ./bin/server.js",
+    "devlinks": "jskit app link-local-packages",
+    "dev": "vite",
+    "dev:all": "vite",
+    "dev:home": "VITE_SURFACE=home vite",
+    "build": "vite build",
+    "build:all": "vite build",
+    "build:home": "VITE_SURFACE=home vite build",
+    "preview": "vite preview",
+    "lint": "eslint .",
+    "test": "node --test",
+    "test:client": "vitest run tests/client",
+    "test:e2e": "playwright test tests/e2e",
+    "verify": "jskit app verify && npm run --if-present verify:app",
+    "release": "jskit app release",
+    "jskit:update": "jskit app update-packages"
+  },
+  "dependencies": {
+    "@local/main": "file:packages/main",
+    "@fastify/static": "^9.1.1",
+    "@jskit-ai/kernel": "0.x",
+    "@tanstack/vue-query": "^5.90.5",
+    "fastify": "^5.7.4",
+    "json-rest-schema": "^1.0.13",
+    "pinia": "^3.0.4",
+    "vue": "^3.5.13",
+    "vue-router": "^5.0.4",
+    "vuetify": "^4.0.0",
+    "@jskit-ai/http-runtime": "0.x"
+  },
+  "devDependencies": {
+    "@jskit-ai/agent-docs": "0.x",
+    "@jskit-ai/config-eslint": "0.x",
+    "@jskit-ai/jskit-cli": "0.x",
+    "@playwright/test": "^1.57.0",
+    "@vitejs/plugin-vue": "^5.2.1",
+    "eslint": "^9.39.1",
+    "vite": "^6.1.0",
+    "vite-plugin-vuetify": "^2.1.3",
+    "vitest": "^4.0.18"
+  }
+}