@jskit-ai/ui-generator 0.1.40 → 0.1.41

package/package.descriptor.mjs

@@ -1,7 +1,7 @@
 export default Object.freeze({
   packageVersion: 1,
   packageId: "@jskit-ai/ui-generator",
-  version: "0.1.40",
+  version: "0.1.41",
   kind: "generator",
   description: "Create non-CRUD pages, reusable UI elements, and subpage hosts.",
   options: {
@@ -278,7 +278,7 @@ export default Object.freeze({
   mutations: {
     dependencies: {
       runtime: {
-        "@jskit-ai/users-web": "0.1.72"
+        "@jskit-ai/users-web": "0.1.73"
       },
       dev: {}
     },

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@jskit-ai/ui-generator",
-  "version": "0.1.40",
+  "version": "0.1.41",
   "type": "module",
   "scripts": {
     "test": "node --test"
   },
   "dependencies": {
-    "@jskit-ai/kernel": "0.1.57",
-    "@jskit-ai/shell-web": "0.1.56"
+    "@jskit-ai/kernel": "0.1.58",
+    "@jskit-ai/shell-web": "0.1.57"
   },
   "exports": {
     "./server/buildTemplateContext": "./src/server/buildTemplateContext.js"

package/src/server/buildTemplateContext.js

@@ -3,6 +3,8 @@ import {
   resolvePageTargetDetails
 } from "@jskit-ai/kernel/server/support";
 
+const DEFAULT_GENERATED_LINK_ICON = "mdi-view-list-outline";
+
 function resolveLinkToPropLine(linkTo = "") {
   if (!linkTo) {
     return "";
@@ -34,6 +36,7 @@ async function buildUiPageTemplateContext({
     __JSKIT_UI_LINK_PLACEMENT_ID__: pageTarget.placementId,
     __JSKIT_UI_LINK_PLACEMENT_TARGET__: String(linkTarget.placementTarget?.id || ""),
     __JSKIT_UI_LINK_COMPONENT_TOKEN__: String(linkTarget.componentToken || ""),
+    __JSKIT_UI_LINK_ICON__: DEFAULT_GENERATED_LINK_ICON,
     __JSKIT_UI_LINK_WORKSPACE_SUFFIX__: pageTarget.routeUrlSuffix,
     __JSKIT_UI_LINK_NON_WORKSPACE_SUFFIX__: pageTarget.routeUrlSuffix,
     __JSKIT_UI_LINK_WHEN_LINE__: String(linkTarget.whenLine || ""),

package/src/server/subcommands/page.js

@@ -31,6 +31,7 @@ function renderPageLinkPlacementBlock({
     `    componentToken: "${context.__JSKIT_UI_LINK_COMPONENT_TOKEN__}",\n` +
     "    props: {\n" +
     `      label: "${label}",\n` +
+    `      icon: "${context.__JSKIT_UI_LINK_ICON__}",\n` +
     `      surface: "${surface}",\n` +
     `      scopedSuffix: "${context.__JSKIT_UI_LINK_WORKSPACE_SUFFIX__}",\n` +
     `      unscopedSuffix: "${context.__JSKIT_UI_LINK_NON_WORKSPACE_SUFFIX__}",\n` +

package/src/server/subcommands/pageSupport.js

@@ -25,15 +25,15 @@ import {
 
 const DEFAULT_SUBPAGES_POSITION = "sub-pages";
 const SECTION_CONTAINER_SHELL_COMPONENT = "SectionContainerShell";
-const TAB_LINK_COMPONENT_TOKEN = "local.main.ui.tab-link-item";
+const SUBPAGES_LINK_COMPONENT_TOKEN = "local.main.ui.surface-aware-menu-link-item";
 const DEFAULT_MENU_COMPONENT_DIRECTORY = path.join(DEFAULT_COMPONENT_DIRECTORY, "menus");
-const TAB_LINK_COMPONENT_DEFINITION = findLocalLinkItemDefinition(TAB_LINK_COMPONENT_TOKEN);
+const SUBPAGES_LINK_COMPONENT_DEFINITION = findLocalLinkItemDefinition(SUBPAGES_LINK_COMPONENT_TOKEN);
 
-if (!TAB_LINK_COMPONENT_DEFINITION) {
-  throw new Error(`ui-generator add-subpages could not resolve ${TAB_LINK_COMPONENT_TOKEN} scaffold definition.`);
+if (!SUBPAGES_LINK_COMPONENT_DEFINITION) {
+  throw new Error(`ui-generator add-subpages could not resolve ${SUBPAGES_LINK_COMPONENT_TOKEN} scaffold definition.`);
 }
 
-const TAB_LINK_COMPONENT = TAB_LINK_COMPONENT_DEFINITION.componentName;
+const SUBPAGES_LINK_COMPONENT = SUBPAGES_LINK_COMPONENT_DEFINITION.componentName;
 
 const ROUTE_TAG_PATTERN = /<route\b[^>]*>[\s\S]*?<\/route>\s*/gi;
 const TEMPLATE_TOKEN_PATTERN = /<\/?template\b[^>]*>/gi;
@@ -145,7 +145,7 @@ async function ensureSubpagesSupportScaffold({
   );
   const tabLinkPath = resolvePathWithinApp(
     resolvedAppRoot,
-    path.join(normalizedTabLinkComponentDirectory, `${TAB_LINK_COMPONENT}.vue`),
+    path.join(normalizedTabLinkComponentDirectory, `${SUBPAGES_LINK_COMPONENT}.vue`),
     { context: "ui-generator add-subpages" }
   );
 
@@ -156,7 +156,7 @@ async function ensureSubpagesSupportScaffold({
     );
   }
 
-  const providerRegisterLine = `registerMainClientComponent("${TAB_LINK_COMPONENT_TOKEN}", () => ${TAB_LINK_COMPONENT});`;
+  const providerRegisterLine = `registerMainClientComponent("${SUBPAGES_LINK_COMPONENT_TOKEN}", () => ${SUBPAGES_LINK_COMPONENT});`;
   const providerHasTabLinkRegistration = providerSource.includes(providerRegisterLine);
   const touchedFiles = new Set();
   const supportFiles = [
@@ -168,7 +168,7 @@ async function ensureSubpagesSupportScaffold({
   if (!providerHasTabLinkRegistration) {
     supportFiles.push({
       path: tabLinkPath,
-      desiredSource: await readLocalLinkItemComponentSource(TAB_LINK_COMPONENT_DEFINITION)
+      desiredSource: await readLocalLinkItemComponentSource(SUBPAGES_LINK_COMPONENT_DEFINITION)
     });
   }
 
@@ -191,7 +191,7 @@ async function ensureSubpagesSupportScaffold({
     touchedFiles.add(supportFile.path.relativePath);
   }
 
-  const providerImportLine = `import ${TAB_LINK_COMPONENT} from "/${toPosixPath(path.join(normalizedTabLinkComponentDirectory, `${TAB_LINK_COMPONENT}.vue`))}";`;
+  const providerImportLine = `import ${SUBPAGES_LINK_COMPONENT} from "/${toPosixPath(path.join(normalizedTabLinkComponentDirectory, `${SUBPAGES_LINK_COMPONENT}.vue`))}";`;
   if (providerHasTabLinkRegistration) {
     return Object.freeze({
       touchedFiles: [...touchedFiles].sort((left, right) => left.localeCompare(right)),
@@ -313,7 +313,7 @@ function renderSubpagesTemplate({
     "<template>",
     renderSectionContainerOpenTag({ title, subtitle }),
     "    <template #tabs>",
-    `      <ShellOutlet target="${normalizedTarget}" default-link-component-token="${TAB_LINK_COMPONENT_TOKEN}" />`,
+    `      <ShellOutlet target="${normalizedTarget}" default-link-component-token="${SUBPAGES_LINK_COMPONENT_TOKEN}" />`,
     "    </template>"
   ];
 
@@ -483,8 +483,8 @@ export {
   DEFAULT_SUBPAGES_POSITION,
   DEFAULT_COMPONENT_DIRECTORY,
   SECTION_CONTAINER_SHELL_COMPONENT,
-  TAB_LINK_COMPONENT,
-  TAB_LINK_COMPONENT_TOKEN,
+  SUBPAGES_LINK_COMPONENT,
+  SUBPAGES_LINK_COMPONENT_TOKEN,
   resolvePageTargetDetails,
   resolveNearestParentSubpagesHost,
   deriveDefaultSubpagesHost,

package/test/addSubpagesSubcommand.test.js

@@ -97,7 +97,7 @@ test("ui-generator add-subpages derives the default target from an index-route p
 
     assert.deepEqual(result.touchedFiles, [
       "packages/main/src/client/providers/MainClientProvider.js",
-      "src/components/menus/TabLinkItem.vue",
+      "src/components/menus/SurfaceAwareMenuLinkItem.vue",
       "src/components/SectionContainerShell.vue",
       `src/pages/${targetFile}`
     ]);
@@ -105,12 +105,12 @@ test("ui-generator add-subpages derives the default target from an index-route p
     const pageSource = await readPageFile(appRoot, targetFile);
     assert.match(
       pageSource,
-      /<ShellOutlet target="practice:sub-pages" default-link-component-token="local\.main\.ui\.tab-link-item" \/>/
+      /<ShellOutlet target="practice:sub-pages" default-link-component-token="local\.main\.ui\.surface-aware-menu-link-item" \/>/
     );
     assert.match(pageSource, /<RouterView \/>/);
     assert.equal(
-      await readFile(path.join(appRoot, "src", "components", "menus", "TabLinkItem.vue"), "utf8"),
-      await readLocalLinkItemComponentSource("local.main.ui.tab-link-item")
+      await readFile(path.join(appRoot, "src", "components", "menus", "SurfaceAwareMenuLinkItem.vue"), "utf8"),
+      await readLocalLinkItemComponentSource("local.main.ui.surface-aware-menu-link-item")
     );
   });
 });
@@ -132,7 +132,7 @@ test("ui-generator add-subpages derives the default target from a dynamic file-r
     const pageSource = await readPageFile(appRoot, targetFile);
     assert.match(
       pageSource,
-      /<ShellOutlet target="contacts-contact-id:sub-pages" default-link-component-token="local\.main\.ui\.tab-link-item" \/>/
+      /<ShellOutlet target="contacts-contact-id:sub-pages" default-link-component-token="local\.main\.ui\.surface-aware-menu-link-item" \/>/
     );
   });
 });
@@ -154,7 +154,7 @@ test("ui-generator add-subpages derives the default target from a nested route p
     const pageSource = await readPageFile(appRoot, targetFile);
     assert.match(
       pageSource,
-      /<ShellOutlet target="catalog-products:sub-pages" default-link-component-token="local\.main\.ui\.tab-link-item" \/>/
+      /<ShellOutlet target="catalog-products:sub-pages" default-link-component-token="local\.main\.ui\.surface-aware-menu-link-item" \/>/
     );
   });
 });
@@ -199,7 +199,7 @@ test("ui-generator add-subpages supports explicit target host:position", async (
     const pageSource = await readPageFile(appRoot, targetFile);
     assert.match(
       pageSource,
-      /<ShellOutlet target="practice-hub:secondary-tabs" default-link-component-token="local\.main\.ui\.tab-link-item" \/>/
+      /<ShellOutlet target="practice-hub:secondary-tabs" default-link-component-token="local\.main\.ui\.surface-aware-menu-link-item" \/>/
     );
   });
 });
@@ -211,7 +211,7 @@ test("ui-generator add-subpages does not rewrite existing scaffold support compo
     const targetFile = "w/[workspaceSlug]/admin/practice/index.vue";
     await writePageFile(appRoot, targetFile);
     const customSectionShellSource = `<template><section class="custom-shell"><slot /></section></template>\n`;
-    const customTabLinkSource = `<template><button class="custom-tab-link"><slot /></button></template>\n`;
+    const customSurfaceAwareLinkSource = `<template><button class="custom-surface-aware-link"><slot /></button></template>\n`;
     await writeFile(
       path.join(appRoot, "src", "components", "SectionContainerShell.vue"),
       customSectionShellSource,
@@ -219,8 +219,8 @@ test("ui-generator add-subpages does not rewrite existing scaffold support compo
     );
     await mkdir(path.join(appRoot, "src", "components", "menus"), { recursive: true });
     await writeFile(
-      path.join(appRoot, "src", "components", "menus", "TabLinkItem.vue"),
-      customTabLinkSource,
+      path.join(appRoot, "src", "components", "menus", "SurfaceAwareMenuLinkItem.vue"),
+      customSurfaceAwareLinkSource,
       "utf8"
     );
 
@@ -242,8 +242,8 @@ test("ui-generator add-subpages does not rewrite existing scaffold support compo
       customSectionShellSource
     );
     assert.equal(
-      await readFile(path.join(appRoot, "src", "components", "menus", "TabLinkItem.vue"), "utf8"),
-      customTabLinkSource
+      await readFile(path.join(appRoot, "src", "components", "menus", "SurfaceAwareMenuLinkItem.vue"), "utf8"),
+      customSurfaceAwareLinkSource
     );
   });
 });
@@ -332,7 +332,7 @@ test("ui-generator add-subpages accepts target files with a src/pages prefix", a
     const pageSource = await readFile(path.join(appRoot, targetFile), "utf8");
     assert.match(
       pageSource,
-      /<ShellOutlet target="practice:sub-pages" default-link-component-token="local\.main\.ui\.tab-link-item" \/>/
+      /<ShellOutlet target="practice:sub-pages" default-link-component-token="local\.main\.ui\.surface-aware-menu-link-item" \/>/
     );
     assert.match(pageSource, /<RouterView \/>/);
   });

package/test/buildTemplateContext.test.js

@@ -250,6 +250,7 @@ test("buildUiPageTemplateContext supports explicit link component token and link
       }
     });
     assert.equal(context.__JSKIT_UI_LINK_COMPONENT_TOKEN__, "local.main.ui.tab-link-item");
+    assert.equal(context.__JSKIT_UI_LINK_ICON__, "mdi-view-list-outline");
     assert.equal(context.__JSKIT_UI_LINK_WORKSPACE_SUFFIX__, "/contacts/[contactId]/notes");
     assert.equal(context.__JSKIT_UI_LINK_NON_WORKSPACE_SUFFIX__, "/contacts/[contactId]/notes");
     assert.equal(context.__JSKIT_UI_LINK_TO_PROP_LINE__, "      to: \"./notes\",\n");
@@ -314,7 +315,8 @@ test("buildUiPageTemplateContext infers subpage link placement, tab token, and l
     });
 
     assert.equal(context.__JSKIT_UI_LINK_PLACEMENT_TARGET__, "contact-view:sub-pages");
-    assert.equal(context.__JSKIT_UI_LINK_COMPONENT_TOKEN__, "local.main.ui.tab-link-item");
+    assert.equal(context.__JSKIT_UI_LINK_COMPONENT_TOKEN__, "local.main.ui.surface-aware-menu-link-item");
+    assert.equal(context.__JSKIT_UI_LINK_ICON__, "mdi-view-list-outline");
     assert.equal(context.__JSKIT_UI_LINK_TO_PROP_LINE__, "      to: \"./notes\",\n");
   });
 });
@@ -352,7 +354,7 @@ test("buildUiPageTemplateContext inherits a file-route parent host for deeper de
     });
 
     assert.equal(context.__JSKIT_UI_LINK_PLACEMENT_TARGET__, "contact-view:sub-pages");
-    assert.equal(context.__JSKIT_UI_LINK_COMPONENT_TOKEN__, "local.main.ui.tab-link-item");
+    assert.equal(context.__JSKIT_UI_LINK_COMPONENT_TOKEN__, "local.main.ui.surface-aware-menu-link-item");
     assert.equal(context.__JSKIT_UI_LINK_TO_PROP_LINE__, "      to: \"./notes/history\",\n");
   });
 });
@@ -390,7 +392,8 @@ test("buildUiPageTemplateContext infers subpage link placement from an index-rou
     });
 
     assert.equal(context.__JSKIT_UI_LINK_PLACEMENT_TARGET__, "catalog:sub-pages");
-    assert.equal(context.__JSKIT_UI_LINK_COMPONENT_TOKEN__, "local.main.ui.tab-link-item");
+    assert.equal(context.__JSKIT_UI_LINK_COMPONENT_TOKEN__, "local.main.ui.surface-aware-menu-link-item");
+    assert.equal(context.__JSKIT_UI_LINK_ICON__, "mdi-view-list-outline");
     assert.equal(context.__JSKIT_UI_LINK_TO_PROP_LINE__, "      to: \"./products\",\n");
   });
 });
@@ -441,7 +444,7 @@ test("buildUiPageTemplateContext finds the nearest index-route parent host", asy
     });
 
     assert.equal(context.__JSKIT_UI_LINK_PLACEMENT_TARGET__, "catalog-products:sub-pages");
-    assert.equal(context.__JSKIT_UI_LINK_COMPONENT_TOKEN__, "local.main.ui.tab-link-item");
+    assert.equal(context.__JSKIT_UI_LINK_COMPONENT_TOKEN__, "local.main.ui.surface-aware-menu-link-item");
     assert.equal(context.__JSKIT_UI_LINK_TO_PROP_LINE__, "      to: \"./variants\",\n");
   });
 });
@@ -479,7 +482,7 @@ test("buildUiPageTemplateContext infers subpage link placement from an index rou
     });
 
     assert.equal(context.__JSKIT_UI_LINK_PLACEMENT_TARGET__, "customer-view:sub-pages");
-    assert.equal(context.__JSKIT_UI_LINK_COMPONENT_TOKEN__, "local.main.ui.tab-link-item");
+    assert.equal(context.__JSKIT_UI_LINK_COMPONENT_TOKEN__, "local.main.ui.surface-aware-menu-link-item");
     assert.equal(context.__JSKIT_UI_LINK_TO_PROP_LINE__, "      to: \"./pets\",\n");
     assert.equal(context.__JSKIT_UI_LINK_WORKSPACE_SUFFIX__, "/customers/[customerId]/pets");
   });

package/test/pageSubcommand.test.js

@@ -162,6 +162,7 @@ test("ui-generator page subcommand supports link placement options", async () =>
     const placementSource = await readFile(path.join(appRoot, "src", "placement.js"), "utf8");
     assert.match(placementSource, /target: "shell-layout:top-right"/);
     assert.match(placementSource, /componentToken: "local\.main\.ui\.tab-link-item"/);
+    assert.match(placementSource, /icon: "mdi-view-list-outline"/);
     assert.match(placementSource, /to: "\.\/notes"/);
   });
 });
@@ -196,7 +197,8 @@ test("ui-generator page subcommand infers subpage link placement, tab token, and
 
     const placementSource = await readFile(path.join(appRoot, "src", "placement.js"), "utf8");
     assert.match(placementSource, /target: "contact-view:sub-pages"/);
-    assert.match(placementSource, /componentToken: "local\.main\.ui\.tab-link-item"/);
+    assert.match(placementSource, /componentToken: "local\.main\.ui\.surface-aware-menu-link-item"/);
+    assert.match(placementSource, /icon: "mdi-view-list-outline"/);
     assert.match(placementSource, /to: "\.\/notes"/);
   });
 });
@@ -246,7 +248,7 @@ test("ui-generator page subcommand prefers the nearest index-route parent host",
 
     const placementSource = await readFile(path.join(appRoot, "src", "placement.js"), "utf8");
     assert.match(placementSource, /target: "catalog-products:sub-pages"/);
-    assert.match(placementSource, /componentToken: "local\.main\.ui\.tab-link-item"/);
+    assert.match(placementSource, /componentToken: "local\.main\.ui\.surface-aware-menu-link-item"/);
     assert.match(placementSource, /to: "\.\/variants"/);
   });
 });