@jskit-ai/shell-web 0.1.18 → 0.1.20

package/package.descriptor.mjs

@@ -1,7 +1,7 @@
 export default Object.freeze({
   packageVersion: 1,
   packageId: "@jskit-ai/shell-web",
-  version: "0.1.18",
+  version: "0.1.20",
   kind: "runtime",
   description: "Web shell layout runtime with outlet-based placement contributions.",
   dependsOn: [],
@@ -87,7 +87,7 @@ export default Object.freeze({
     dependencies: {
       runtime: {
         "@tanstack/vue-query": "^5.90.5",
-        "@jskit-ai/kernel": "0.1.19",
+        "@jskit-ai/kernel": "0.1.21",
         "vuetify": "^4.0.0"
       },
       dev: {}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jskit-ai/shell-web",
-  "version": "0.1.18",
+  "version": "0.1.20",
   "type": "module",
   "scripts": {
     "test": "node --test"
@@ -13,11 +13,12 @@
     "./client/components/ShellLayout": "./src/client/components/ShellLayout.vue",
     "./client/components/ShellOutlet": "./src/client/components/ShellOutlet.vue",
     "./client/components/ShellErrorHost": "./src/client/components/ShellErrorHost.vue",
+    "./client/composables/useShellLayoutState": "./src/client/composables/useShellLayoutState.js",
     "./client/providers/ShellWebClientProvider": "./src/client/providers/ShellWebClientProvider.js"
   },
   "dependencies": {
     "@tanstack/vue-query": "^5.90.5",
-    "@jskit-ai/kernel": "0.1.19",
+    "@jskit-ai/kernel": "0.1.21",
     "vuetify": "^4.0.0"
   }
 }

package/src/client/components/ShellLayout.vue

@@ -1,14 +1,5 @@
 <script setup>
-import { computed } from "vue";
-import { useRoute } from "vue-router";
-import { normalizeSurfaceId } from "@jskit-ai/kernel/shared/surface";
-import { useWebPlacementContext } from "../placement/inject.js";
-import {
-  readPlacementSurfaceConfig,
-  resolveSurfaceDefinitionFromPlacementContext,
-  resolveSurfaceIdFromPlacementPathname
-} from "../placement/surfaceContext.js";
-import { useShellLayout } from "./useShellLayout.js";
+import { useShellLayoutState } from "../composables/useShellLayoutState.js";
 import ShellOutlet from "./ShellOutlet.vue";
 
 const props = defineProps({
@@ -27,88 +18,10 @@ const props = defineProps({
   subtitle: {
     type: String,
     default: ""
-  },
-  topLeftActions: {
-    type: Array,
-    default: () => []
-  },
-  topRightActions: {
-    type: Array,
-    default: () => []
-  },
-  menuItems: {
-    type: Array,
-    default: () => []
-  }
-});
-
-let route = null;
-try {
-  route = useRoute();
-} catch {
-  route = null;
-}
-const { context: placementContext } = useWebPlacementContext();
-
-function toSurfaceLabel(surfaceId = "") {
-  const normalizedSurfaceId = String(surfaceId || "").trim().toLowerCase();
-  if (!normalizedSurfaceId) {
-    return "Surface";
-  }
-
-  return normalizedSurfaceId
-    .split(/[^a-z0-9]+/g)
-    .filter(Boolean)
-    .map((segment) => `${segment.slice(0, 1).toUpperCase()}${segment.slice(1)}`)
-    .join(" ");
-}
-
-const resolvedSurface = computed(() => {
-  const explicitSurface = normalizeSurfaceId(props.surface);
-  if (explicitSurface) {
-    return explicitSurface;
   }
-
-  const pathname =
-    String(route?.path || "").trim() ||
-    (typeof window === "object" && window?.location?.pathname ? String(window.location.pathname).trim() : "/");
-  const contextValue = placementContext?.value || null;
-  const resolvedSurfaceFromPath = resolveSurfaceIdFromPlacementPathname(contextValue, pathname);
-  if (resolvedSurfaceFromPath) {
-    return resolvedSurfaceFromPath;
-  }
-
-  const surfaceConfig = readPlacementSurfaceConfig(contextValue);
-  if (surfaceConfig.defaultSurfaceId) {
-    return surfaceConfig.defaultSurfaceId;
-  }
-
-  return "surface";
-});
-
-const resolvedSurfaceLabel = computed(() => {
-  const explicitLabel = String(props.surfaceLabel || "").trim();
-  if (explicitLabel) {
-    return explicitLabel;
-  }
-
-  const surfaceDefinition = resolveSurfaceDefinitionFromPlacementContext(
-    placementContext?.value || null,
-    resolvedSurface.value
-  );
-  const configuredLabel = String(surfaceDefinition?.label || "").trim();
-  if (configuredLabel) {
-    return configuredLabel;
-  }
-
-  return toSurfaceLabel(resolvedSurface.value);
 });
 
-const { drawerOpen, resolvedTopLeftActions, resolvedTopRightActions, resolvedMenuItems, toggleDrawer } = useShellLayout({
-  topLeftActions: computed(() => props.topLeftActions),
-  topRightActions: computed(() => props.topRightActions),
-  menuItems: computed(() => props.menuItems)
-});
+const { drawerOpen, toggleDrawer, resolvedSurface, resolvedSurfaceLabel } = useShellLayoutState(props);
 </script>
 
 <template>
@@ -116,19 +29,8 @@ const { drawerOpen, resolvedTopLeftActions, resolvedTopRightActions, resolvedMen
     <v-app-bar border density="comfortable" elevation="0" class="bg-surface">
       <v-app-bar-nav-icon aria-label="Toggle navigation menu" @click="toggleDrawer" />
 
-      <slot name="top-left" :actions="resolvedTopLeftActions" :surface="resolvedSurface">
+      <slot name="top-left" :surface="resolvedSurface">
         <div class="d-flex align-center ga-2">
-          <v-btn
-            v-for="action in resolvedTopLeftActions"
-            :key="`top-left-${action.label}`"
-            :to="action.to || undefined"
-            :variant="action.variant"
-            :color="action.color"
-            size="small"
-            class="text-none"
-          >
-            {{ action.label }}
-          </v-btn>
           <v-chip color="primary" size="small" label>{{ resolvedSurfaceLabel }}</v-chip>
           <ShellOutlet host="shell-layout" position="top-left" />
         </div>
@@ -136,38 +38,18 @@ const { drawerOpen, resolvedTopLeftActions, resolvedTopRightActions, resolvedMen
 
       <v-spacer />
 
-      <slot name="top-right" :actions="resolvedTopRightActions" :surface="resolvedSurface">
+      <slot name="top-right" :surface="resolvedSurface">
         <div class="d-flex align-center ga-2">
-          <v-btn
-            v-for="action in resolvedTopRightActions"
-            :key="`top-right-${action.label}`"
-            :to="action.to || undefined"
-            :variant="action.variant"
-            :color="action.color"
-            size="small"
-            class="text-none"
-          >
-            {{ action.label }}
-          </v-btn>
           <ShellOutlet host="shell-layout" position="top-right" />
         </div>
       </slot>
     </v-app-bar>
 
     <v-navigation-drawer v-model="drawerOpen" border class="bg-surface" :width="248">
-      <slot name="menu" :items="resolvedMenuItems" :surface="resolvedSurface">
+      <slot name="menu" :surface="resolvedSurface">
         <v-list nav density="comfortable" class="pt-2">
           <v-list-subheader class="text-uppercase text-caption">{{ resolvedSurfaceLabel }}</v-list-subheader>
-          <v-list-item
-            v-for="item in resolvedMenuItems"
-            :key="`menu-${item.label}`"
-            :title="item.label"
-            :to="item.to"
-            :prepend-icon="item.icon"
-            rounded="lg"
-            class="mb-1"
-          />
-          <ShellOutlet host="shell-layout" position="primary-menu" />
+          <ShellOutlet host="shell-layout" position="primary-menu" default />
           <v-divider class="my-2" />
           <ShellOutlet host="shell-layout" position="secondary-menu" />
         </v-list>

package/src/client/components/ShellOutlet.vue

@@ -22,6 +22,10 @@ const props = defineProps({
     type: String,
     default: ""
   },
+  default: {
+    type: Boolean,
+    default: false
+  },
   context: {
     type: Object,
     default: () => ({})

package/src/client/composables/useShellLayoutState.js

@@ -0,0 +1,88 @@
+import { computed, ref } from "vue";
+import { useRoute } from "vue-router";
+import { normalizeSurfaceId } from "@jskit-ai/kernel/shared/surface";
+import { useWebPlacementContext } from "../placement/inject.js";
+import {
+  readPlacementSurfaceConfig,
+  resolveSurfaceDefinitionFromPlacementContext,
+  resolveSurfaceIdFromPlacementPathname
+} from "../placement/surfaceContext.js";
+
+function toSurfaceLabel(surfaceId = "") {
+  const normalizedSurfaceId = String(surfaceId || "").trim().toLowerCase();
+  if (!normalizedSurfaceId) {
+    return "Surface";
+  }
+
+  return normalizedSurfaceId
+    .split(/[^a-z0-9]+/g)
+    .filter(Boolean)
+    .map((segment) => `${segment.slice(0, 1).toUpperCase()}${segment.slice(1)}`)
+    .join(" ");
+}
+
+function useShellLayoutState(props = {}) {
+  let route = null;
+  try {
+    route = useRoute();
+  } catch {
+    route = null;
+  }
+
+  const { context: placementContext } = useWebPlacementContext();
+  const drawerOpen = ref(true);
+
+  function toggleDrawer() {
+    drawerOpen.value = !drawerOpen.value;
+  }
+
+  const resolvedSurface = computed(() => {
+    const explicitSurface = normalizeSurfaceId(props?.surface);
+    if (explicitSurface) {
+      return explicitSurface;
+    }
+
+    const pathname =
+      String(route?.path || "").trim() ||
+      (typeof window === "object" && window?.location?.pathname ? String(window.location.pathname).trim() : "/");
+    const contextValue = placementContext?.value || null;
+    const resolvedSurfaceFromPath = resolveSurfaceIdFromPlacementPathname(contextValue, pathname);
+    if (resolvedSurfaceFromPath) {
+      return resolvedSurfaceFromPath;
+    }
+
+    const surfaceConfig = readPlacementSurfaceConfig(contextValue);
+    if (surfaceConfig.defaultSurfaceId) {
+      return surfaceConfig.defaultSurfaceId;
+    }
+
+    return "surface";
+  });
+
+  const resolvedSurfaceLabel = computed(() => {
+    const explicitLabel = String(props?.surfaceLabel || "").trim();
+    if (explicitLabel) {
+      return explicitLabel;
+    }
+
+    const surfaceDefinition = resolveSurfaceDefinitionFromPlacementContext(
+      placementContext?.value || null,
+      resolvedSurface.value
+    );
+    const configuredLabel = String(surfaceDefinition?.label || "").trim();
+    if (configuredLabel) {
+      return configuredLabel;
+    }
+
+    return toSurfaceLabel(resolvedSurface.value);
+  });
+
+  return Object.freeze({
+    drawerOpen,
+    toggleDrawer,
+    resolvedSurface,
+    resolvedSurfaceLabel
+  });
+}
+
+export { useShellLayoutState };

package/src/client/index.js

@@ -9,6 +9,7 @@ export {
 export { default as ShellLayout } from "./components/ShellLayout.vue";
 export { default as ShellOutlet } from "./components/ShellOutlet.vue";
 export { default as ShellErrorHost } from "./components/ShellErrorHost.vue";
+export { useShellLayoutState } from "./composables/useShellLayoutState.js";
 
 const clientProviders = Object.freeze([ShellWebClientProvider]);
 

package/templates/src/components/ShellLayout.vue

@@ -1,29 +1,7 @@
 <script setup>
-import { computed, ref } from "vue";
-import { useRoute } from "vue-router";
-import { normalizeObject } from "@jskit-ai/kernel/shared/support/normalize";
-import { normalizeSurfaceId } from "@jskit-ai/kernel/shared/surface";
-import {
-  useWebPlacementContext,
-  readPlacementSurfaceConfig,
-  resolveSurfaceDefinitionFromPlacementContext,
-  resolveSurfaceIdFromPlacementPathname
-} from "@jskit-ai/shell-web/client/placement";
+import { useShellLayoutState } from "@jskit-ai/shell-web/client/composables/useShellLayoutState";
 import ShellOutlet from "@jskit-ai/shell-web/client/components/ShellOutlet";
 
-const DEFAULT_ACTION_FALLBACK = Object.freeze({
-  label: "",
-  to: "",
-  variant: "text",
-  color: "secondary"
-});
-
-const DEFAULT_MENU_FALLBACK = Object.freeze({
-  label: "",
-  to: "/",
-  icon: "$menu"
-});
-
 const props = defineProps({
   surface: {
     type: String,
@@ -40,131 +18,10 @@ const props = defineProps({
   subtitle: {
     type: String,
     default: ""
-  },
-  topLeftActions: {
-    type: Array,
-    default: () => []
-  },
-  topRightActions: {
-    type: Array,
-    default: () => []
-  },
-  menuItems: {
-    type: Array,
-    default: () => []
-  }
-});
-
-const route = useRoute();
-const { context: placementContext } = useWebPlacementContext();
-const drawerOpen = ref(true);
-
-function normalizeAction(action, fallback) {
-  const source = normalizeObject(action);
-  const fallbackSource = normalizeObject(fallback);
-  const label = String(source.label || fallbackSource.label || "").trim();
-  if (!label) {
-    return null;
-  }
-
-  return {
-    label,
-    to: String(source.to || fallbackSource.to || "").trim(),
-    variant: String(source.variant || fallbackSource.variant || "text").trim(),
-    color: String(source.color || fallbackSource.color || "secondary").trim()
-  };
-}
-
-function normalizeMenuItem(item, fallback) {
-  const source = normalizeObject(item);
-  const fallbackSource = normalizeObject(fallback);
-  const label = String(source.label || fallbackSource.label || "").trim();
-  if (!label) {
-    return null;
-  }
-
-  return {
-    label,
-    to: String(source.to || fallbackSource.to || "").trim() || "/",
-    icon: String(source.icon || fallbackSource.icon || "$menu").trim() || "$menu"
-  };
-}
-
-function normalizeActionList(actions) {
-  const source = Array.isArray(actions) ? actions : [];
-  return source
-    .map((item) => normalizeAction(item, DEFAULT_ACTION_FALLBACK))
-    .filter(Boolean);
-}
-
-function normalizeMenuList(items) {
-  const source = Array.isArray(items) ? items : [];
-  return source
-    .map((item) => normalizeMenuItem(item, DEFAULT_MENU_FALLBACK))
-    .filter(Boolean);
-}
-
-function toSurfaceLabel(surfaceId = "") {
-  const normalizedSurfaceId = String(surfaceId || "").trim().toLowerCase();
-  if (!normalizedSurfaceId) {
-    return "Surface";
-  }
-
-  return normalizedSurfaceId
-    .split(/[^a-z0-9]+/g)
-    .filter(Boolean)
-    .map((segment) => `${segment.slice(0, 1).toUpperCase()}${segment.slice(1)}`)
-    .join(" ");
-}
-
-function toggleDrawer() {
-  drawerOpen.value = !drawerOpen.value;
-}
-
-const resolvedSurface = computed(() => {
-  const explicitSurface = normalizeSurfaceId(props.surface);
-  if (explicitSurface) {
-    return explicitSurface;
-  }
-
-  const pathname =
-    String(route?.path || "").trim() ||
-    (typeof window === "object" && window?.location?.pathname ? String(window.location.pathname).trim() : "/");
-  const contextValue = placementContext?.value || null;
-  const resolvedSurfaceFromPath = resolveSurfaceIdFromPlacementPathname(contextValue, pathname);
-  if (resolvedSurfaceFromPath) {
-    return resolvedSurfaceFromPath;
-  }
-
-  const surfaceConfig = readPlacementSurfaceConfig(contextValue);
-  if (surfaceConfig.defaultSurfaceId) {
-    return surfaceConfig.defaultSurfaceId;
-  }
-
-  return "surface";
-});
-
-const resolvedSurfaceLabel = computed(() => {
-  const explicitLabel = String(props.surfaceLabel || "").trim();
-  if (explicitLabel) {
-    return explicitLabel;
   }
-
-  const surfaceDefinition = resolveSurfaceDefinitionFromPlacementContext(
-    placementContext?.value || null,
-    resolvedSurface.value
-  );
-  const configuredLabel = String(surfaceDefinition?.label || "").trim();
-  if (configuredLabel) {
-    return configuredLabel;
-  }
-
-  return toSurfaceLabel(resolvedSurface.value);
 });
 
-const resolvedTopLeftActions = computed(() => normalizeActionList(props.topLeftActions));
-const resolvedTopRightActions = computed(() => normalizeActionList(props.topRightActions));
-const resolvedMenuItems = computed(() => normalizeMenuList(props.menuItems));
+const { drawerOpen, toggleDrawer, resolvedSurface, resolvedSurfaceLabel } = useShellLayoutState(props);
 </script>
 
 <template>
@@ -172,19 +29,8 @@ const resolvedMenuItems = computed(() => normalizeMenuList(props.menuItems));
     <v-app-bar border density="comfortable" elevation="0" class="bg-surface">
       <v-app-bar-nav-icon aria-label="Toggle navigation menu" @click="toggleDrawer" />
 
-      <slot name="top-left" :actions="resolvedTopLeftActions" :surface="resolvedSurface">
+      <slot name="top-left" :surface="resolvedSurface">
         <div class="d-flex align-center ga-2">
-          <v-btn
-            v-for="action in resolvedTopLeftActions"
-            :key="`top-left-${action.label}`"
-            :to="action.to || undefined"
-            :variant="action.variant"
-            :color="action.color"
-            size="small"
-            class="text-none"
-          >
-            {{ action.label }}
-          </v-btn>
           <v-chip color="primary" size="small" label>{{ resolvedSurfaceLabel }}</v-chip>
           <ShellOutlet host="shell-layout" position="top-left" />
         </div>
@@ -192,38 +38,18 @@ const resolvedMenuItems = computed(() => normalizeMenuList(props.menuItems));
 
       <v-spacer />
 
-      <slot name="top-right" :actions="resolvedTopRightActions" :surface="resolvedSurface">
+      <slot name="top-right" :surface="resolvedSurface">
         <div class="d-flex align-center ga-2">
-          <v-btn
-            v-for="action in resolvedTopRightActions"
-            :key="`top-right-${action.label}`"
-            :to="action.to || undefined"
-            :variant="action.variant"
-            :color="action.color"
-            size="small"
-            class="text-none"
-          >
-            {{ action.label }}
-          </v-btn>
           <ShellOutlet host="shell-layout" position="top-right" />
         </div>
       </slot>
     </v-app-bar>
 
     <v-navigation-drawer v-model="drawerOpen" border class="bg-surface" :width="248">
-      <slot name="menu" :items="resolvedMenuItems" :surface="resolvedSurface">
+      <slot name="menu" :surface="resolvedSurface">
         <v-list nav density="comfortable" class="pt-2">
           <v-list-subheader class="text-uppercase text-caption">{{ resolvedSurfaceLabel }}</v-list-subheader>
-          <v-list-item
-            v-for="item in resolvedMenuItems"
-            :key="`menu-${item.label}`"
-            :title="item.label"
-            :to="item.to"
-            :prepend-icon="item.icon"
-            rounded="lg"
-            class="mb-1"
-          />
-          <ShellOutlet host="shell-layout" position="primary-menu" />
+          <ShellOutlet host="shell-layout" position="primary-menu" default />
           <v-divider class="my-2" />
           <ShellOutlet host="shell-layout" position="secondary-menu" />
         </v-list>

package/src/client/components/useShellLayout.js

@@ -1,102 +0,0 @@
-import { computed, ref } from "vue";
-import { normalizeObject } from "@jskit-ai/kernel/shared/support/normalize";
-
-const DEFAULT_ACTION_FALLBACK = Object.freeze({
-  label: "",
-  to: "",
-  variant: "text",
-  color: "secondary"
-});
-
-const DEFAULT_MENU_FALLBACK = Object.freeze({
-  label: "",
-  to: "/",
-  icon: "$menu"
-});
-
-function normalizeLabeledItem(item, fallback, buildItem) {
-  const source = normalizeObject(item);
-  const fallbackSource = normalizeObject(fallback);
-  const label = String(source.label || fallbackSource.label || "").trim();
-  if (!label) {
-    return null;
-  }
-
-  if (typeof buildItem !== "function") {
-    return null;
-  }
-
-  return buildItem({
-    source,
-    fallbackSource,
-    label
-  });
-}
-
-function normalizeAction(action, fallback) {
-  return normalizeLabeledItem(action, fallback, ({ source, fallbackSource, label }) => {
-    return {
-      label,
-      to: String(source.to || fallbackSource.to || "").trim(),
-      variant: String(source.variant || fallbackSource.variant || "text").trim(),
-      color: String(source.color || fallbackSource.color || "secondary").trim()
-    };
-  });
-}
-
-function normalizeMenuItem(item, fallback) {
-  return normalizeLabeledItem(item, fallback, ({ source, fallbackSource, label }) => {
-    return {
-      label,
-      to: String(source.to || fallbackSource.to || "").trim() || "/",
-      icon: String(source.icon || fallbackSource.icon || "$menu").trim() || "$menu"
-    };
-  });
-}
-
-function normalizeActionList(actions) {
-  const sourceActions = Array.isArray(actions) ? actions : [];
-  return sourceActions
-    .map((item) => normalizeAction(item, DEFAULT_ACTION_FALLBACK))
-    .filter(Boolean);
-}
-
-function normalizeMenuList(items) {
-  const source = Array.isArray(items) ? items : [];
-  return source
-    .map((item) => normalizeMenuItem(item, DEFAULT_MENU_FALLBACK))
-    .filter(Boolean);
-}
-
-function useShellLayout({ topLeftActions, topRightActions, menuItems } = {}) {
-  const drawerOpen = ref(true);
-
-  const resolvedTopLeftActions = computed(() => {
-    const source = topLeftActions?.value;
-    return normalizeActionList(source);
-  });
-
-  const resolvedTopRightActions = computed(() => {
-    const source = topRightActions?.value;
-    return normalizeActionList(source);
-  });
-
-  const resolvedMenuItems = computed(() => {
-    const source = menuItems?.value;
-    return normalizeMenuList(source);
-  });
-
-  function toggleDrawer() {
-    drawerOpen.value = !drawerOpen.value;
-  }
-
-  return {
-    drawerOpen,
-    resolvedTopLeftActions,
-    resolvedTopRightActions,
-    resolvedMenuItems,
-    toggleDrawer
-  };
-}
-
-export { useShellLayout };