@jskit-ai/shell-web 0.1.32 → 0.1.34

package/test/placementRuntime.test.js

@@ -45,24 +45,21 @@ test("web placement runtime filters by surface/host/position, resolves component
   runtime.replacePlacements([
     definePlacement({
       id: "test.menu",
-      host: "shell-layout",
-      position: "primary-menu",
+      target: "shell-layout:primary-menu",
       surfaces: ["app"],
       order: 30,
       componentToken: "component.menu"
     }),
     definePlacement({
       id: "test.profile",
-      host: "shell-layout",
-      position: "top-right",
+      target: "shell-layout:top-right",
       surfaces: ["*"],
       order: 20,
       componentToken: "component.profile"
     }),
     definePlacement({
       id: "test.alerts",
-      host: "shell-layout",
-      position: "top-right",
+      target: "shell-layout:top-right",
       surfaces: ["app"],
       order: 10,
       componentToken: "component.alerts"
@@ -70,17 +67,48 @@ test("web placement runtime filters by surface/host/position, resolves component
   ]);
   runtime.setContext(createPlacementContext());
 
-  const topRight = runtime.getPlacements({ surface: "app", host: "shell-layout", position: "top-right" });
+  const topRight = runtime.getPlacements({ surface: "app", target: "shell-layout:top-right" });
   assert.deepEqual(topRight.map((entry) => entry.id), ["test.alerts", "test.profile"]);
   assert.equal(typeof topRight[0].component, "function");
 
-  const primaryMenu = runtime.getPlacements({ surface: "app", host: "shell-layout", position: "primary-menu" });
+  const primaryMenu = runtime.getPlacements({ surface: "app", target: "shell-layout:primary-menu" });
   assert.deepEqual(primaryMenu.map((entry) => entry.id), ["test.menu"]);
 
-  const adminTopRight = runtime.getPlacements({ surface: "admin", host: "shell-layout", position: "top-right" });
+  const adminTopRight = runtime.getPlacements({ surface: "admin", target: "shell-layout:top-right" });
   assert.deepEqual(adminTopRight.map((entry) => entry.id), ["test.profile"]);
 });
 
+test("web placement runtime preserves source order when placements share the same order", () => {
+  const app = createAppStub({
+    tokens: {
+      "component.beta": () => null,
+      "component.alpha": () => null
+    }
+  });
+
+  const runtime = createWebPlacementRuntime({ app });
+  runtime.replacePlacements([
+    definePlacement({
+      id: "test.beta",
+      target: "home-settings:primary-menu",
+      surfaces: ["app"],
+      order: 155,
+      componentToken: "component.beta"
+    }),
+    definePlacement({
+      id: "test.alpha",
+      target: "home-settings:primary-menu",
+      surfaces: ["app"],
+      order: 155,
+      componentToken: "component.alpha"
+    })
+  ]);
+  runtime.setContext(createPlacementContext());
+
+  const menu = runtime.getPlacements({ surface: "app", target: "home-settings:primary-menu" });
+  assert.deepEqual(menu.map((entry) => entry.id), ["test.beta", "test.alpha"]);
+});
+
 test("web placement runtime applies context contributors and placement when() predicates", () => {
   const app = createAppStub({
     tokens: {
@@ -98,23 +126,21 @@ test("web placement runtime applies context contributors and placement when() pr
   runtime.replacePlacements([
     definePlacement({
       id: "guest.item",
-      host: "auth-profile-menu",
-      position: "primary-menu",
+      target: "auth-profile-menu:primary-menu",
       surfaces: ["*"],
       componentToken: "component.guest",
       when: ({ auth }) => !Boolean(auth?.authenticated)
     }),
     definePlacement({
       id: "auth.item",
-      host: "auth-profile-menu",
-      position: "primary-menu",
+      target: "auth-profile-menu:primary-menu",
       surfaces: ["*"],
       componentToken: "component.authenticated",
       when: ({ auth }) => Boolean(auth?.authenticated)
     })
   ]);
 
-  const menu = runtime.getPlacements({ surface: "app", host: "auth-profile-menu", position: "primary-menu" });
+  const menu = runtime.getPlacements({ surface: "app", target: "auth-profile-menu:primary-menu" });
   assert.deepEqual(menu.map((entry) => entry.id), ["auth.item"]);
 });
 
@@ -136,8 +162,7 @@ test("web placement runtime uses runtime context and local context overrides con
   runtime.replacePlacements([
     definePlacement({
       id: "allowed",
-      host: "auth-profile-menu",
-      position: "primary-menu",
+      target: "auth-profile-menu:primary-menu",
       surfaces: ["*"],
       componentToken: "component.allowed",
       when: ({ auth }) => Boolean(auth?.authenticated)
@@ -149,13 +174,12 @@ test("web placement runtime uses runtime context and local context overrides con
       authenticated: true
     }
   });
-  const fromRuntime = runtime.getPlacements({ surface: "app", host: "auth-profile-menu", position: "primary-menu" });
+  const fromRuntime = runtime.getPlacements({ surface: "app", target: "auth-profile-menu:primary-menu" });
   assert.deepEqual(fromRuntime.map((entry) => entry.id), ["allowed"]);
 
   const fromLocalOverride = runtime.getPlacements({
     surface: "app",
-    host: "auth-profile-menu",
-    position: "primary-menu",
+    target: "auth-profile-menu:primary-menu",
     context: {
       auth: {
         authenticated: false
@@ -198,15 +222,13 @@ test("web placement runtime rejects duplicate placement ids", () => {
     runtime.replacePlacements([
       definePlacement({
         id: "dup.entry",
-        host: "shell-layout",
-        position: "top-right",
+        target: "shell-layout:top-right",
         surfaces: ["*"],
         componentToken: "component.a"
       }),
       definePlacement({
         id: "dup.entry",
-        host: "shell-layout",
-        position: "primary-menu",
+        target: "shell-layout:primary-menu",
         surfaces: ["*"],
         componentToken: "component.b"
       })
@@ -247,25 +269,23 @@ test("web placement runtime skips throwing component tokens and logs resolution
   runtime.replacePlacements([
     definePlacement({
       id: "bad",
-      host: "shell-layout",
-      position: "top-right",
+      target: "shell-layout:top-right",
       surfaces: ["*"],
       componentToken: "component.bad"
     }),
     definePlacement({
       id: "good",
-      host: "shell-layout",
-      position: "top-right",
+      target: "shell-layout:top-right",
       surfaces: ["*"],
       componentToken: "component.good"
     })
   ]);
 
-  const first = runtime.getPlacements({ surface: "app", host: "shell-layout", position: "top-right" });
+  const first = runtime.getPlacements({ surface: "app", target: "shell-layout:top-right" });
   assert.deepEqual(first.map((entry) => entry.id), ["good"]);
   assert.equal(errors.length, 1);
 
-  const second = runtime.getPlacements({ surface: "app", host: "shell-layout", position: "top-right" });
+  const second = runtime.getPlacements({ surface: "app", target: "shell-layout:top-right" });
   assert.deepEqual(second.map((entry) => entry.id), ["good"]);
   assert.equal(errors.length, 1);
 });
@@ -301,31 +321,29 @@ test("web placement runtime clears failed token cache when placements are replac
   runtime.replacePlacements([
     definePlacement({
       id: "toggle",
-      host: "shell-layout",
-      position: "top-right",
+      target: "shell-layout:top-right",
       surfaces: ["*"],
       componentToken: "component.toggle"
     })
   ]);
 
-  const initial = runtime.getPlacements({ surface: "app", host: "shell-layout", position: "top-right" });
+  const initial = runtime.getPlacements({ surface: "app", target: "shell-layout:top-right" });
   assert.equal(initial.length, 0);
 
   shouldThrow = false;
-  const stillSkipped = runtime.getPlacements({ surface: "app", host: "shell-layout", position: "top-right" });
+  const stillSkipped = runtime.getPlacements({ surface: "app", target: "shell-layout:top-right" });
   assert.equal(stillSkipped.length, 0);
 
   runtime.replacePlacements([
     definePlacement({
       id: "toggle",
-      host: "shell-layout",
-      position: "top-right",
+      target: "shell-layout:top-right",
       surfaces: ["*"],
       componentToken: "component.toggle"
     })
   ]);
 
-  const recovered = runtime.getPlacements({ surface: "app", host: "shell-layout", position: "top-right" });
+  const recovered = runtime.getPlacements({ surface: "app", target: "shell-layout:top-right" });
   assert.equal(recovered.length, 1);
 });
 
@@ -341,24 +359,21 @@ test("web placement runtime follows explicit surface targeting without role indi
   runtime.replacePlacements([
     definePlacement({
       id: "global.banner",
-      host: "shell-layout",
-      position: "top-right",
+      target: "shell-layout:top-right",
       surfaces: ["*"],
       order: 10,
       componentToken: "component.global"
     }),
     definePlacement({
       id: "app.link",
-      host: "shell-layout",
-      position: "top-right",
+      target: "shell-layout:top-right",
       surfaces: ["app"],
       order: 20,
       componentToken: "component.app"
     }),
     definePlacement({
       id: "admin.link",
-      host: "shell-layout",
-      position: "top-right",
+      target: "shell-layout:top-right",
       surfaces: ["admin"],
       order: 30,
       componentToken: "component.admin"
@@ -366,9 +381,9 @@ test("web placement runtime follows explicit surface targeting without role indi
   ]);
   runtime.setContext(createPlacementContext());
 
-  const appEntries = runtime.getPlacements({ surface: "app", host: "shell-layout", position: "top-right" });
+  const appEntries = runtime.getPlacements({ surface: "app", target: "shell-layout:top-right" });
   assert.deepEqual(appEntries.map((placement) => placement.id), ["global.banner", "app.link"]);
 
-  const adminEntries = runtime.getPlacements({ surface: "admin", host: "shell-layout", position: "top-right" });
+  const adminEntries = runtime.getPlacements({ surface: "admin", target: "shell-layout:top-right" });
   assert.deepEqual(adminEntries.map((placement) => placement.id), ["global.banner", "admin.link"]);
 });

package/test/settingsPlacementContract.test.js

@@ -11,7 +11,7 @@ const PACKAGE_DIR = path.resolve(TEST_DIRECTORY, "..");
 function readSettingsOutlets() {
   const outlets = descriptor?.metadata?.ui?.placements?.outlets;
   return Array.isArray(outlets)
-    ? outlets.filter((entry) => String(entry?.host || "").trim() === "home-settings")
+    ? outlets.filter((entry) => String(entry?.target || "").trim() === "home-settings:primary-menu")
     : [];
 }
 
@@ -25,7 +25,16 @@ function findFileMutation(id) {
 test("shell-web home settings template exposes surface-derived settings outlets", async () => {
   const source = await readFile(path.join(PACKAGE_DIR, "templates", "src", "pages", "home", "settings.vue"), "utf8");
 
-  assert.match(source, /<ShellOutlet host="home-settings" position="primary-menu" \/>/);
+  assert.match(source, /target="home-settings:primary-menu"/);
+  assert.match(source, /default-link-component-token="local\.main\.ui\.surface-aware-menu-link-item"/);
+  assert.match(source, /<RouterView \/>/);
+});
+
+test("shell-web home settings index template is a simple developer-owned stub", async () => {
+  const source = await readFile(path.join(PACKAGE_DIR, "templates", "src", "pages", "home", "settings", "index.vue"), "utf8");
+
+  assert.match(source, /definePage/);
+  assert.match(source, /your_child_segment/);
 });
 
 test("shell-web descriptor metadata advertises home settings outlets and installs the scaffold page", () => {
@@ -33,8 +42,8 @@ test("shell-web descriptor metadata advertises home settings outlets and install
     readSettingsOutlets(),
     [
       {
-        host: "home-settings",
-        position: "primary-menu",
+        target: "home-settings:primary-menu",
+        defaultLinkComponentToken: "local.main.ui.surface-aware-menu-link-item",
         surfaces: ["home"],
         source: "templates/src/pages/home/settings.vue"
       }
@@ -45,6 +54,7 @@ test("shell-web descriptor metadata advertises home settings outlets and install
     from: "templates/src/pages/home/settings.vue",
     toSurface: "home",
     toSurfacePath: "settings.vue",
+    ownership: "app",
     reason: "Install shell-driven home settings shell route with section navigation.",
     category: "shell-web",
     id: "shell-web-page-home-settings-shell"
@@ -54,7 +64,8 @@ test("shell-web descriptor metadata advertises home settings outlets and install
     from: "templates/src/pages/home/settings/index.vue",
     toSurface: "home",
     toSurfacePath: "settings/index.vue",
-    reason: "Install shell-driven home settings landing page scaffold.",
+    ownership: "app",
+    reason: "Install shell-driven home settings index stub scaffold for app-owned landing or redirect behavior.",
     category: "shell-web",
     id: "shell-web-page-home-settings"
   });

package/templates/src/pages/console/index.vue

@@ -1,24 +0,0 @@
-<template>
-  <v-card rounded="lg" elevation="1" border>
-    <v-card-item>
-      <template #prepend>
-        <v-chip color="primary" size="small" label>Console</v-chip>
-      </template>
-      <v-card-title class="text-h5">Operations Console</v-card-title>
-      <v-card-subtitle>Operator tools, scripts, and diagnostics.</v-card-subtitle>
-    </v-card-item>
-    <v-divider />
-    <v-card-text class="d-flex flex-column ga-4">
-      <div class="d-flex flex-wrap ga-3">
-        <v-chip color="secondary" variant="tonal" label>Route: /console</v-chip>
-        <v-chip color="info" variant="tonal" label>Surface status: enabled</v-chip>
-      </div>
-      <p class="text-medium-emphasis mb-0">
-        Ideal for operator actions, scripts, and technical insights not meant for end users.
-      </p>
-      <div>
-        <v-btn color="primary" variant="flat" to="/home">Back to home</v-btn>
-      </div>
-    </v-card-text>
-  </v-card>
-</template>

package/templates/src/pages/console.vue

@@ -1,20 +0,0 @@
-<route lang="json">
-{
-  "meta": {
-    "jskit": {
-      "surface": "console"
-    }
-  }
-}
-</route>
-
-<script setup>
-import ShellLayout from "@/components/ShellLayout.vue";
-import { RouterView } from "vue-router";
-</script>
-
-<template>
-  <ShellLayout title="" subtitle="">
-    <RouterView />
-  </ShellLayout>
-</template>