@jskit-ai/shell-web 0.1.162 → 0.1.164

package/patterns/page-and-placement/example/src/pages/home/reports/index.vue

@@ -0,0 +1,7 @@
+<script setup>
+import { redirectToChild } from "@jskit-ai/kernel/client/pageRedirects";
+
+definePage({
+  redirect: redirectToChild("overview")
+});
+</script>

package/patterns/page-and-placement/example/src/pages/home/reports/overview.vue

@@ -0,0 +1,8 @@
+<template>
+  <section aria-labelledby="reports-overview-title">
+    <h2 id="reports-overview-title" class="text-h5 mb-2">Overview</h2>
+    <p class="text-body-1 text-medium-emphasis mb-0">
+      Your reading and catalogue summary appears here.
+    </p>
+  </section>
+</template>

package/patterns/page-and-placement/example/src/pages/home/reports.vue

@@ -0,0 +1,33 @@
+<script setup>
+import ShellOutlet from "@jskit-ai/shell-web/client/components/ShellOutlet";
+import { RouterView } from "vue-router";
+</script>
+
+<template>
+  <section class="reports-section d-flex flex-column ga-4">
+    <header>
+      <p class="text-overline text-medium-emphasis mb-1">Insights</p>
+      <h1 class="text-h4 font-weight-medium mb-1">Reports</h1>
+      <p class="text-body-2 text-medium-emphasis mb-0">
+        Review catalogue activity and completion trends.
+      </p>
+    </header>
+
+    <nav aria-label="Report sections">
+      <v-tabs density="comfortable">
+        <ShellOutlet target="reports:section-nav" />
+      </v-tabs>
+    </nav>
+
+    <main class="reports-section__content">
+      <RouterView />
+    </main>
+  </section>
+</template>
+
+<style scoped>
+.reports-section,
+.reports-section__content {
+  min-width: 0;
+}
+</style>

package/patterns/page-and-placement/example/src/placement.js

@@ -0,0 +1,52 @@
+import { createPlacementRegistry } from "@jskit-ai/shell-web/client/placement";
+
+const registry = createPlacementRegistry();
+const { addPlacement } = registry;
+
+addPlacement({
+  id: "catalogue.reports.link",
+  target: "shell.primary-nav",
+  kind: "link",
+  surfaces: ["home"],
+  order: 120,
+  props: {
+    label: "Reports",
+    icon: "mdi-chart-box-outline",
+    surface: "home",
+    scopedSuffix: "/reports",
+    unscopedSuffix: "/reports"
+  }
+});
+
+for (const [id, label, suffix, order] of [
+  ["overview", "Overview", "/reports/overview", 100],
+  ["activity", "Activity", "/reports/activity", 110]
+]) {
+  addPlacement({
+    id: `catalogue.reports.${id}.link`,
+    target: "page.section-nav",
+    owner: "reports",
+    kind: "link",
+    surfaces: ["home"],
+    order,
+    props: {
+      label,
+      surface: "home",
+      scopedSuffix: suffix,
+      unscopedSuffix: suffix
+    }
+  });
+}
+
+addPlacement({
+  id: "catalogue.sync-status",
+  target: "shell.status",
+  kind: "component",
+  surfaces: ["home"],
+  order: 100,
+  componentToken: "local.main.ui.sync-status"
+});
+
+export default function getPlacements() {
+  return registry.build();
+}

package/patterns/page-and-placement/example/src/placementTopology.js

@@ -0,0 +1,29 @@
+const placements = [];
+
+function addPlacementTopology(value = {}) {
+  placements.push(value);
+}
+
+addPlacementTopology({
+  id: "page.section-nav",
+  owner: "reports",
+  description: "Navigation between report pages.",
+  surfaces: ["home"],
+  variants: {
+    compact: {
+      outlet: "reports:section-nav",
+      renderers: { link: "local.main.ui.tab-link-item" }
+    },
+    medium: {
+      outlet: "reports:section-nav",
+      renderers: { link: "local.main.ui.tab-link-item" }
+    },
+    expanded: {
+      outlet: "reports:section-nav",
+      renderers: { link: "local.main.ui.tab-link-item" }
+    }
+  }
+});
+
+export { addPlacementTopology };
+export default { placements };

package/src/client/bootstrap/bootstrapPayloadHandlerRegistry.js

@@ -1,17 +1,3 @@
-const BOOTSTRAP_PAYLOAD_HANDLER_TAG = "runtime.web-bootstrap.handlers.client";
-
-function assertTaggableApp(app, context = "bootstrap payload handler registry") {
-  if (!app || typeof app.singleton !== "function" || typeof app.tag !== "function") {
-    throw new Error(`${context} requires application singleton()/tag().`);
-  }
-}
-
-function registerBootstrapPayloadHandler(app, token, factory) {
-  assertTaggableApp(app, "registerBootstrapPayloadHandler");
-  app.singleton(token, factory);
-  app.tag(token, BOOTSTRAP_PAYLOAD_HANDLER_TAG);
-}
-
 function normalizeBootstrapPayloadHandler(entry) {
   if (typeof entry === "function") {
     return Object.freeze({
@@ -22,47 +8,49 @@ function normalizeBootstrapPayloadHandler(entry) {
   }
 
   if (!entry || typeof entry !== "object" || typeof entry.applyBootstrapPayload !== "function") {
-    return null;
+    throw new TypeError("Bootstrap payload handlers require applyBootstrapPayload().");
+  }
+
+  const handlerId = String(entry.handlerId || "").trim();
+  if (!handlerId) {
+    throw new TypeError("Bootstrap payload handlers require handlerId.");
   }
 
   return Object.freeze({
     ...entry,
-    handlerId: String(entry.handlerId || "anonymous"),
+    handlerId,
     order: Number.isFinite(entry.order) ? Number(entry.order) : 0
   });
 }
 
-function resolveBootstrapPayloadHandlers(scope) {
-  if (!scope || typeof scope.resolveTag !== "function") {
-    return [];
-  }
-
-  const rawEntries = scope.resolveTag(BOOTSTRAP_PAYLOAD_HANDLER_TAG);
-  const queue = Array.isArray(rawEntries) ? [...rawEntries] : [rawEntries];
-  const entries = [];
+function createBootstrapPayloadHandlerRegistry() {
+  const handlers = new Map();
 
-  while (queue.length > 0) {
-    const entry = queue.shift();
-    if (Array.isArray(entry)) {
-      queue.push(...entry);
-      continue;
-    }
-    const normalized = normalizeBootstrapPayloadHandler(entry);
-    if (normalized) {
-      entries.push(normalized);
+  function register(entry) {
+    const handler = normalizeBootstrapPayloadHandler(entry);
+    if (handlers.has(handler.handlerId)) {
+      throw new Error(`Bootstrap payload handler "${handler.handlerId}" is duplicated.`);
     }
+    handlers.set(handler.handlerId, handler);
+    return api;
   }
 
-  return entries.sort((left, right) => {
-    if (left.order !== right.order) {
-      return left.order - right.order;
-    }
-    return left.handlerId.localeCompare(right.handlerId);
-  });
+  function list() {
+    return Object.freeze(
+      [...handlers.values()].sort((left, right) => {
+        if (left.order !== right.order) {
+          return left.order - right.order;
+        }
+        return left.handlerId.localeCompare(right.handlerId);
+      })
+    );
+  }
+
+  const api = Object.freeze({ register, list });
+  return api;
 }
 
 export {
-  BOOTSTRAP_PAYLOAD_HANDLER_TAG,
-  registerBootstrapPayloadHandler,
-  resolveBootstrapPayloadHandlers
+  createBootstrapPayloadHandlerRegistry,
+  normalizeBootstrapPayloadHandler
 };

package/src/client/bootstrap/index.js

@@ -1,6 +1,5 @@
 export {
-  BOOTSTRAP_PAYLOAD_HANDLER_TAG,
-  registerBootstrapPayloadHandler,
-  resolveBootstrapPayloadHandlers
+  createBootstrapPayloadHandlerRegistry,
+  normalizeBootstrapPayloadHandler
 } from "./bootstrapPayloadHandlerRegistry.js";
 export { resolveBootstrapErrorStatusCode } from "./bootstrapErrorStatus.js";

package/src/client/index.js

@@ -1,7 +1,3 @@
-import {
-  ShellWebClientProvider
-} from "./providers/ShellWebClientProvider.js";
-
 export {
   ShellWebClientProvider
 } from "./providers/ShellWebClientProvider.js";
@@ -28,11 +24,6 @@ export {
   useShellRequestRecoveryRuntime
 } from "./requestRecovery/index.js";
 export {
-  BOOTSTRAP_PAYLOAD_HANDLER_TAG,
-  registerBootstrapPayloadHandler,
-  resolveBootstrapPayloadHandlers
+  createBootstrapPayloadHandlerRegistry,
+  normalizeBootstrapPayloadHandler
 } from "./bootstrap/index.js";
-
-const clientProviders = Object.freeze([ShellWebClientProvider]);
-
-export { clientProviders };

package/src/client/placement/runtime.js

@@ -207,8 +207,7 @@ function resolveRenderablePlacement({
   });
 }
 
-function resolveContextContributors(app, baseContext = {}, logger) {
-  const contributors = app.resolveTag("web-placement.context.client");
+function resolveContextContributors(contributors, baseContext = {}, logger) {
   let merged = {};
 
   for (const contributor of ensureArray(contributors)) {
@@ -235,7 +234,7 @@ function resolveContextContributors(app, baseContext = {}, logger) {
 }
 
 function resolvePlacementComponent(
-  app,
+  components,
   placement,
   logger,
   missingTokens,
@@ -251,7 +250,7 @@ function resolvePlacementComponent(
     return null;
   }
 
-  if (!app.has(componentToken)) {
+  if (!components.has(componentToken)) {
     if (!missingTokens.has(componentToken)) {
       missingTokens.add(componentToken);
       logger.warn(
@@ -267,7 +266,7 @@ function resolvePlacementComponent(
 
   let component = null;
   try {
-    component = app.make(componentToken);
+    component = components.get(componentToken);
   } catch (error) {
     if (!failedTokens.has(componentToken)) {
       failedTokens.add(componentToken);
@@ -319,9 +318,9 @@ function shouldIncludePlacement(placement, placementContext, logger) {
   }
 }
 
-function createWebPlacementRuntime({ app, logger = null } = {}) {
-  if (!app || typeof app.resolveTag !== "function" || typeof app.make !== "function" || typeof app.has !== "function") {
-    throw new Error("createWebPlacementRuntime requires app.resolveTag(), app.has(), and app.make().");
+function createWebPlacementRuntime({ components, contextContributors = [], logger = null } = {}) {
+  if (!components || typeof components.has !== "function" || typeof components.get !== "function") {
+    throw new Error("createWebPlacementRuntime requires a client component registry.");
   }
 
   const runtimeLogger = createRuntimeLogger(logger);
@@ -438,9 +437,8 @@ function createWebPlacementRuntime({ app, logger = null } = {}) {
     const baseContext = isRecord(context) ? { ...context } : {};
     const contextFromRuntime = isRecord(sharedContext) ? sharedContext : {};
     const contextFromContributors = resolveContextContributors(
-      app,
+      contextContributors,
       {
-        app,
         surface: normalizedSurface,
         target: normalizedTarget,
         layoutClass: normalizedLayoutClass,
@@ -455,7 +453,6 @@ function createWebPlacementRuntime({ app, logger = null } = {}) {
       ...contextFromContributors,
       ...contextFromRuntime,
       ...baseContext,
-      app,
       surface: normalizedSurface,
       target: normalizedTarget,
       layoutClass: normalizedLayoutClass
@@ -503,7 +500,7 @@ function createWebPlacementRuntime({ app, logger = null } = {}) {
       }
 
       const component = resolvePlacementComponent(
-        app,
+        components,
         renderablePlacement,
         runtimeLogger,
         missingTokens,