@shipfox/client-shell 0.2.0

package/dist/vite/evaluate-features.d.ts

@@ -0,0 +1,8 @@
+import type { ClientFeature } from '#contract.js';
+export interface EvaluatedFeatures {
+    features: readonly ClientFeature[];
+    loadedFiles: readonly string[];
+}
+export declare function invalidateFeatures(loadedFiles: Iterable<string>): void;
+export declare function evaluateFeatures(featuresModule: string): Promise<EvaluatedFeatures>;
+//# sourceMappingURL=evaluate-features.d.ts.map

package/dist/vite/evaluate-features.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"evaluate-features.d.ts","sourceRoot":"","sources":["../../src/vite/evaluate-features.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAC,aAAa,EAAC,MAAM,cAAc,CAAC;AAOhD,MAAM,WAAW,iBAAiB;IAChC,QAAQ,EAAE,SAAS,aAAa,EAAE,CAAC;IACnC,WAAW,EAAE,SAAS,MAAM,EAAE,CAAC;CAChC;AAED,wBAAgB,kBAAkB,CAAC,WAAW,EAAE,QAAQ,CAAC,MAAM,CAAC,GAAG,IAAI,CAEtE;AA4CD,wBAAsB,gBAAgB,CAAC,cAAc,EAAE,MAAM,GAAG,OAAO,CAAC,iBAAiB,CAAC,CA6BzF"}

package/dist/vite/evaluate-features.js

@@ -0,0 +1,80 @@
+import { readFile, realpath } from 'node:fs/promises';
+import { createRequire } from 'node:module';
+import { resolve } from 'node:path';
+import { fileURLToPath, pathToFileURL } from 'node:url';
+import { createJiti } from 'jiti';
+const require = createRequire(import.meta.url);
+const importPattern = /(?:\b(?:import|export)\s+(?:[^'"]*?\s+from\s+)?|\bimport\s*\(\s*)['"]([^'"]+)['"]/g;
+const nodeModulesPathPattern = /[\\/]node_modules[\\/]/;
+export function invalidateFeatures(loadedFiles) {
+    for (const file of loadedFiles)delete require.cache[file];
+}
+function loadedModuleGraph(entry) {
+    const files = new Set();
+    function visit(file) {
+        if (files.has(file)) return;
+        files.add(file);
+        for (const child of require.cache[file]?.children ?? [])visit(child.filename);
+    }
+    visit(entry);
+    return [
+        ...files
+    ];
+}
+async function staticallyImportedModules(entry, jiti) {
+    const files = new Set();
+    async function visit(file) {
+        const path = file.startsWith('file:') ? fileURLToPath(file) : file;
+        if (path.startsWith('node:') || nodeModulesPathPattern.test(path) || files.has(path)) return;
+        const resolvedPath = await realpath(path).catch(()=>path);
+        files.add(resolvedPath);
+        const source = await readFile(resolvedPath, 'utf8').catch(()=>undefined);
+        if (!source) return;
+        for (const match of source.matchAll(importPattern)){
+            const specifier = match[1];
+            if (!specifier) continue;
+            const dependency = jiti.esmResolve(specifier, {
+                parentURL: pathToFileURL(resolvedPath),
+                try: true
+            });
+            if (dependency) await visit(dependency);
+        }
+    }
+    await visit(entry);
+    return [
+        ...files
+    ];
+}
+export async function evaluateFeatures(featuresModule) {
+    const resolvedFeaturesModule = await realpath(resolve(featuresModule));
+    const jiti = createJiti(resolvedFeaturesModule, {
+        interopDefault: false,
+        tsconfigPaths: true
+    });
+    let module;
+    let loadedFiles;
+    try {
+        module = jiti(resolvedFeaturesModule);
+        loadedFiles = [
+            ...new Set([
+                ...loadedModuleGraph(resolvedFeaturesModule),
+                ...await staticallyImportedModules(resolvedFeaturesModule, jiti)
+            ])
+        ];
+    } catch (error) {
+        const message = error instanceof Error ? error.message : String(error);
+        throw new Error(`Failed to evaluate features module "${resolvedFeaturesModule}". Features modules must be Node-safe: ${message}`, {
+            cause: error
+        });
+    }
+    const features = module.features ?? module.default;
+    if (!Array.isArray(features)) {
+        throw new TypeError(`Features module "${resolvedFeaturesModule}" must export a features array.`);
+    }
+    return {
+        features: features,
+        loadedFiles
+    };
+}
+
+//# sourceMappingURL=evaluate-features.js.map

package/dist/vite/evaluate-features.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/vite/evaluate-features.ts"],"sourcesContent":["import {readFile, realpath} from 'node:fs/promises';\nimport {createRequire} from 'node:module';\nimport {resolve} from 'node:path';\nimport {fileURLToPath, pathToFileURL} from 'node:url';\nimport {createJiti} from 'jiti';\nimport type {ClientFeature} from '#contract.js';\n\nconst require = createRequire(import.meta.url);\nconst importPattern =\n  /(?:\\b(?:import|export)\\s+(?:[^'\"]*?\\s+from\\s+)?|\\bimport\\s*\\(\\s*)['\"]([^'\"]+)['\"]/g;\nconst nodeModulesPathPattern = /[\\\\/]node_modules[\\\\/]/;\n\nexport interface EvaluatedFeatures {\n  features: readonly ClientFeature[];\n  loadedFiles: readonly string[];\n}\n\nexport function invalidateFeatures(loadedFiles: Iterable<string>): void {\n  for (const file of loadedFiles) delete require.cache[file];\n}\n\nfunction loadedModuleGraph(entry: string): string[] {\n  const files = new Set<string>();\n\n  function visit(file: string): void {\n    if (files.has(file)) return;\n    files.add(file);\n    for (const child of require.cache[file]?.children ?? []) visit(child.filename);\n  }\n\n  visit(entry);\n  return [...files];\n}\n\nasync function staticallyImportedModules(\n  entry: string,\n  jiti: ReturnType<typeof createJiti>,\n): Promise<string[]> {\n  const files = new Set<string>();\n\n  async function visit(file: string): Promise<void> {\n    const path = file.startsWith('file:') ? fileURLToPath(file) : file;\n    if (path.startsWith('node:') || nodeModulesPathPattern.test(path) || files.has(path)) return;\n    const resolvedPath = await realpath(path).catch(() => path);\n    files.add(resolvedPath);\n    const source = await readFile(resolvedPath, 'utf8').catch(() => undefined);\n    if (!source) return;\n\n    for (const match of source.matchAll(importPattern)) {\n      const specifier = match[1];\n      if (!specifier) continue;\n      const dependency = jiti.esmResolve(specifier, {\n        parentURL: pathToFileURL(resolvedPath),\n        try: true,\n      });\n      if (dependency) await visit(dependency);\n    }\n  }\n\n  await visit(entry);\n  return [...files];\n}\n\nexport async function evaluateFeatures(featuresModule: string): Promise<EvaluatedFeatures> {\n  const resolvedFeaturesModule = await realpath(resolve(featuresModule));\n  const jiti = createJiti(resolvedFeaturesModule, {interopDefault: false, tsconfigPaths: true});\n  let module: {default?: unknown; features?: unknown};\n  let loadedFiles: string[];\n  try {\n    module = jiti(resolvedFeaturesModule) as {default?: unknown; features?: unknown};\n    loadedFiles = [\n      ...new Set([\n        ...loadedModuleGraph(resolvedFeaturesModule),\n        ...(await staticallyImportedModules(resolvedFeaturesModule, jiti)),\n      ]),\n    ];\n  } catch (error) {\n    const message = error instanceof Error ? error.message : String(error);\n    throw new Error(\n      `Failed to evaluate features module \"${resolvedFeaturesModule}\". Features modules must be Node-safe: ${message}`,\n      {cause: error},\n    );\n  }\n\n  const features = module.features ?? module.default;\n  if (!Array.isArray(features)) {\n    throw new TypeError(\n      `Features module \"${resolvedFeaturesModule}\" must export a features array.`,\n    );\n  }\n\n  return {features: features as readonly ClientFeature[], loadedFiles};\n}\n"],"names":["readFile","realpath","createRequire","resolve","fileURLToPath","pathToFileURL","createJiti","require","url","importPattern","nodeModulesPathPattern","invalidateFeatures","loadedFiles","file","cache","loadedModuleGraph","entry","files","Set","visit","has","add","child","children","filename","staticallyImportedModules","jiti","path","startsWith","test","resolvedPath","catch","source","undefined","match","matchAll","specifier","dependency","esmResolve","parentURL","try","evaluateFeatures","featuresModule","resolvedFeaturesModule","interopDefault","tsconfigPaths","module","error","message","Error","String","cause","features","default","Array","isArray","TypeError"],"mappings":"AAAA,SAAQA,QAAQ,EAAEC,QAAQ,QAAO,mBAAmB;AACpD,SAAQC,aAAa,QAAO,cAAc;AAC1C,SAAQC,OAAO,QAAO,YAAY;AAClC,SAAQC,aAAa,EAAEC,aAAa,QAAO,WAAW;AACtD,SAAQC,UAAU,QAAO,OAAO;AAGhC,MAAMC,UAAUL,cAAc,YAAYM,GAAG;AAC7C,MAAMC,gBACJ;AACF,MAAMC,yBAAyB;AAO/B,OAAO,SAASC,mBAAmBC,WAA6B;IAC9D,KAAK,MAAMC,QAAQD,YAAa,OAAOL,QAAQO,KAAK,CAACD,KAAK;AAC5D;AAEA,SAASE,kBAAkBC,KAAa;IACtC,MAAMC,QAAQ,IAAIC;IAElB,SAASC,MAAMN,IAAY;QACzB,IAAII,MAAMG,GAAG,CAACP,OAAO;QACrBI,MAAMI,GAAG,CAACR;QACV,KAAK,MAAMS,SAASf,QAAQO,KAAK,CAACD,KAAK,EAAEU,YAAY,EAAE,CAAEJ,MAAMG,MAAME,QAAQ;IAC/E;IAEAL,MAAMH;IACN,OAAO;WAAIC;KAAM;AACnB;AAEA,eAAeQ,0BACbT,KAAa,EACbU,IAAmC;IAEnC,MAAMT,QAAQ,IAAIC;IAElB,eAAeC,MAAMN,IAAY;QAC/B,MAAMc,OAAOd,KAAKe,UAAU,CAAC,WAAWxB,cAAcS,QAAQA;QAC9D,IAAIc,KAAKC,UAAU,CAAC,YAAYlB,uBAAuBmB,IAAI,CAACF,SAASV,MAAMG,GAAG,CAACO,OAAO;QACtF,MAAMG,eAAe,MAAM7B,SAAS0B,MAAMI,KAAK,CAAC,IAAMJ;QACtDV,MAAMI,GAAG,CAACS;QACV,MAAME,SAAS,MAAMhC,SAAS8B,cAAc,QAAQC,KAAK,CAAC,IAAME;QAChE,IAAI,CAACD,QAAQ;QAEb,KAAK,MAAME,SAASF,OAAOG,QAAQ,CAAC1B,eAAgB;YAClD,MAAM2B,YAAYF,KAAK,CAAC,EAAE;YAC1B,IAAI,CAACE,WAAW;YAChB,MAAMC,aAAaX,KAAKY,UAAU,CAACF,WAAW;gBAC5CG,WAAWlC,cAAcyB;gBACzBU,KAAK;YACP;YACA,IAAIH,YAAY,MAAMlB,MAAMkB;QAC9B;IACF;IAEA,MAAMlB,MAAMH;IACZ,OAAO;WAAIC;KAAM;AACnB;AAEA,OAAO,eAAewB,iBAAiBC,cAAsB;IAC3D,MAAMC,yBAAyB,MAAM1C,SAASE,QAAQuC;IACtD,MAAMhB,OAAOpB,WAAWqC,wBAAwB;QAACC,gBAAgB;QAAOC,eAAe;IAAI;IAC3F,IAAIC;IACJ,IAAIlC;IACJ,IAAI;QACFkC,SAASpB,KAAKiB;QACd/B,cAAc;eACT,IAAIM,IAAI;mBACNH,kBAAkB4B;mBACjB,MAAMlB,0BAA0BkB,wBAAwBjB;aAC7D;SACF;IACH,EAAE,OAAOqB,OAAO;QACd,MAAMC,UAAUD,iBAAiBE,QAAQF,MAAMC,OAAO,GAAGE,OAAOH;QAChE,MAAM,IAAIE,MACR,CAAC,oCAAoC,EAAEN,uBAAuB,uCAAuC,EAAEK,SAAS,EAChH;YAACG,OAAOJ;QAAK;IAEjB;IAEA,MAAMK,WAAWN,OAAOM,QAAQ,IAAIN,OAAOO,OAAO;IAClD,IAAI,CAACC,MAAMC,OAAO,CAACH,WAAW;QAC5B,MAAM,IAAII,UACR,CAAC,iBAAiB,EAAEb,uBAAuB,+BAA+B,CAAC;IAE/E;IAEA,OAAO;QAACS,UAAUA;QAAsCxC;IAAW;AACrE"}

package/dist/vite/generate.d.ts

@@ -0,0 +1,9 @@
+import type { ComposedRoute } from '#compose/compose-routes.js';
+import type { NavTabEntry, SettingsSectionEntry } from '#contract.js';
+export interface GenerateAppModuleOptions {
+    routes: readonly ComposedRoute[];
+    navigation: readonly NavTabEntry[];
+    settingsSections: readonly SettingsSectionEntry[];
+}
+export declare function generateAppModule({ routes, navigation, settingsSections, }: GenerateAppModuleOptions): string;
+//# sourceMappingURL=generate.d.ts.map

package/dist/vite/generate.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"generate.d.ts","sourceRoot":"","sources":["../../src/vite/generate.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,aAAa,EAAC,MAAM,4BAA4B,CAAC;AAC9D,OAAO,KAAK,EAAC,WAAW,EAAE,oBAAoB,EAAC,MAAM,cAAc,CAAC;AAGpE,MAAM,WAAW,wBAAwB;IACvC,MAAM,EAAE,SAAS,aAAa,EAAE,CAAC;IACjC,UAAU,EAAE,SAAS,WAAW,EAAE,CAAC;IACnC,gBAAgB,EAAE,SAAS,oBAAoB,EAAE,CAAC;CACnD;AAkBD,wBAAgB,iBAAiB,CAAC,EAChC,MAAM,EACN,UAAU,EACV,gBAAgB,GACjB,EAAE,wBAAwB,GAAG,MAAM,CAoEnC"}

package/dist/vite/generate.js

@@ -0,0 +1,80 @@
+import { routePathForAnchor } from '#runtime/anchor-paths.js';
+function literal(value) {
+    return JSON.stringify(value, undefined, 2);
+}
+function indentedLiteral(value, indentation) {
+    return literal(value).replaceAll('\n', `\n${' '.repeat(indentation)}`);
+}
+function routeNames(routes, parent) {
+    return routes.map((route, index)=>({
+            route,
+            index
+        })).filter(({ route })=>route.parent === parent).map(({ index })=>`route${index}`).join(', ');
+}
+export function generateAppModule({ routes, navigation, settingsSections }) {
+    const generatedRoutes = routes.map((route)=>({
+            ...route,
+            routePath: routePathForAnchor(route.parent, route.path)
+        }));
+    const imports = routes.map((route, index)=>`import route${index}Impl from ${literal(route.impl)};`).join('\n');
+    const routeDeclarations = generatedRoutes.map((route, index)=>`const route${index} = createRoute({
+  getParentRoute: () => ${route.parent === 'root' ? 'skeleton.rootRoute' : `skeleton.${route.parent}`},
+  path: ${literal(route.routePath)},
+  ...routeOptions(route${index}Impl, ${literal(route.impl)}, ${literal(route.path)}),
+});`).join('\n\n');
+    const rootRoutes = routeNames(generatedRoutes, 'root');
+    const workspaceLayoutRoutes = routeNames(generatedRoutes, 'workspaceLayout');
+    const projectLayoutRoutes = routeNames(generatedRoutes, 'projectLayout');
+    const workspaceSettingsRoutes = routeNames(generatedRoutes, 'workspaceSettings');
+    const rootChildren = [
+        rootRoutes,
+        'workspaceLayout'
+    ].filter(Boolean).join(',\n  ');
+    return `// GENERATED by @shipfox/client-shell/vite. Do not edit.
+// biome-ignore-all format: generated code has stable, reviewable output.
+// biome-ignore-all assist/source/organizeImports: generated imports follow route order.
+import {createRoute, createRouter} from '@tanstack/react-router';
+import {buildAnchorSkeleton, isRouteImpl, type RouteImpl, type RouterContext} from '@shipfox/client-shell/runtime';
+${imports}
+
+function routeOptions<T extends RouteImpl>(routeImpl: T, impl: string, path: string): T['options'] {
+  if (!isRouteImpl(routeImpl)) {
+    throw new TypeError(\`Route implementation "\${impl}" for "\${path}" must export default defineRoute(...).\`);
+  }
+  return routeImpl.options;
+}
+
+const skeleton = buildAnchorSkeleton({
+  navigation: ${indentedLiteral(navigation, 2)},
+  settingsSections: ${indentedLiteral(settingsSections, 2)},
+});
+
+${routeDeclarations}
+
+const projectLayout = skeleton.projectLayout.addChildren([${projectLayoutRoutes}]);
+const workspaceSettings = skeleton.workspaceSettings.addChildren([${workspaceSettingsRoutes}]);
+const workspaceLayout = skeleton.workspaceLayout.addChildren([
+  ${workspaceLayoutRoutes}${workspaceLayoutRoutes ? ',' : ''}
+  projectLayout,
+  workspaceSettings,
+]);
+
+export const routeTree = skeleton.rootRoute.addChildren([
+  ${rootChildren},
+]);
+
+export const router = createRouter({
+  routeTree,
+  context: {auth: undefined, queryClient: undefined} satisfies RouterContext,
+  scrollRestoration: true,
+});
+
+declare module '@tanstack/react-router' {
+  interface Register {
+    router: typeof router;
+  }
+}
+`;
+}
+
+//# sourceMappingURL=generate.js.map

package/dist/vite/generate.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/vite/generate.ts"],"sourcesContent":["import type {ComposedRoute} from '#compose/compose-routes.js';\nimport type {NavTabEntry, SettingsSectionEntry} from '#contract.js';\nimport {routePathForAnchor} from '#runtime/anchor-paths.js';\n\nexport interface GenerateAppModuleOptions {\n  routes: readonly ComposedRoute[];\n  navigation: readonly NavTabEntry[];\n  settingsSections: readonly SettingsSectionEntry[];\n}\n\nfunction literal(value: unknown): string {\n  return JSON.stringify(value, undefined, 2);\n}\n\nfunction indentedLiteral(value: unknown, indentation: number): string {\n  return literal(value).replaceAll('\\n', `\\n${' '.repeat(indentation)}`);\n}\n\nfunction routeNames(routes: readonly ComposedRoute[], parent: ComposedRoute['parent']): string {\n  return routes\n    .map((route, index) => ({route, index}))\n    .filter(({route}) => route.parent === parent)\n    .map(({index}) => `route${index}`)\n    .join(', ');\n}\n\nexport function generateAppModule({\n  routes,\n  navigation,\n  settingsSections,\n}: GenerateAppModuleOptions): string {\n  const generatedRoutes = routes.map((route) => ({\n    ...route,\n    routePath: routePathForAnchor(route.parent, route.path),\n  }));\n  const imports = routes\n    .map((route, index) => `import route${index}Impl from ${literal(route.impl)};`)\n    .join('\\n');\n  const routeDeclarations = generatedRoutes\n    .map(\n      (route, index) => `const route${index} = createRoute({\n  getParentRoute: () => ${route.parent === 'root' ? 'skeleton.rootRoute' : `skeleton.${route.parent}`},\n  path: ${literal(route.routePath)},\n  ...routeOptions(route${index}Impl, ${literal(route.impl)}, ${literal(route.path)}),\n});`,\n    )\n    .join('\\n\\n');\n  const rootRoutes = routeNames(generatedRoutes, 'root');\n  const workspaceLayoutRoutes = routeNames(generatedRoutes, 'workspaceLayout');\n  const projectLayoutRoutes = routeNames(generatedRoutes, 'projectLayout');\n  const workspaceSettingsRoutes = routeNames(generatedRoutes, 'workspaceSettings');\n  const rootChildren = [rootRoutes, 'workspaceLayout'].filter(Boolean).join(',\\n  ');\n\n  return `// GENERATED by @shipfox/client-shell/vite. Do not edit.\n// biome-ignore-all format: generated code has stable, reviewable output.\n// biome-ignore-all assist/source/organizeImports: generated imports follow route order.\nimport {createRoute, createRouter} from '@tanstack/react-router';\nimport {buildAnchorSkeleton, isRouteImpl, type RouteImpl, type RouterContext} from '@shipfox/client-shell/runtime';\n${imports}\n\nfunction routeOptions<T extends RouteImpl>(routeImpl: T, impl: string, path: string): T['options'] {\n  if (!isRouteImpl(routeImpl)) {\n    throw new TypeError(\\`Route implementation \"\\${impl}\" for \"\\${path}\" must export default defineRoute(...).\\`);\n  }\n  return routeImpl.options;\n}\n\nconst skeleton = buildAnchorSkeleton({\n  navigation: ${indentedLiteral(navigation, 2)},\n  settingsSections: ${indentedLiteral(settingsSections, 2)},\n});\n\n${routeDeclarations}\n\nconst projectLayout = skeleton.projectLayout.addChildren([${projectLayoutRoutes}]);\nconst workspaceSettings = skeleton.workspaceSettings.addChildren([${workspaceSettingsRoutes}]);\nconst workspaceLayout = skeleton.workspaceLayout.addChildren([\n  ${workspaceLayoutRoutes}${workspaceLayoutRoutes ? ',' : ''}\n  projectLayout,\n  workspaceSettings,\n]);\n\nexport const routeTree = skeleton.rootRoute.addChildren([\n  ${rootChildren},\n]);\n\nexport const router = createRouter({\n  routeTree,\n  context: {auth: undefined, queryClient: undefined} satisfies RouterContext,\n  scrollRestoration: true,\n});\n\ndeclare module '@tanstack/react-router' {\n  interface Register {\n    router: typeof router;\n  }\n}\n`;\n}\n"],"names":["routePathForAnchor","literal","value","JSON","stringify","undefined","indentedLiteral","indentation","replaceAll","repeat","routeNames","routes","parent","map","route","index","filter","join","generateAppModule","navigation","settingsSections","generatedRoutes","routePath","path","imports","impl","routeDeclarations","rootRoutes","workspaceLayoutRoutes","projectLayoutRoutes","workspaceSettingsRoutes","rootChildren","Boolean"],"mappings":"AAEA,SAAQA,kBAAkB,QAAO,2BAA2B;AAQ5D,SAASC,QAAQC,KAAc;IAC7B,OAAOC,KAAKC,SAAS,CAACF,OAAOG,WAAW;AAC1C;AAEA,SAASC,gBAAgBJ,KAAc,EAAEK,WAAmB;IAC1D,OAAON,QAAQC,OAAOM,UAAU,CAAC,MAAM,CAAC,EAAE,EAAE,IAAIC,MAAM,CAACF,cAAc;AACvE;AAEA,SAASG,WAAWC,MAAgC,EAAEC,MAA+B;IACnF,OAAOD,OACJE,GAAG,CAAC,CAACC,OAAOC,QAAW,CAAA;YAACD;YAAOC;QAAK,CAAA,GACpCC,MAAM,CAAC,CAAC,EAACF,KAAK,EAAC,GAAKA,MAAMF,MAAM,KAAKA,QACrCC,GAAG,CAAC,CAAC,EAACE,KAAK,EAAC,GAAK,CAAC,KAAK,EAAEA,OAAO,EAChCE,IAAI,CAAC;AACV;AAEA,OAAO,SAASC,kBAAkB,EAChCP,MAAM,EACNQ,UAAU,EACVC,gBAAgB,EACS;IACzB,MAAMC,kBAAkBV,OAAOE,GAAG,CAAC,CAACC,QAAW,CAAA;YAC7C,GAAGA,KAAK;YACRQ,WAAWtB,mBAAmBc,MAAMF,MAAM,EAAEE,MAAMS,IAAI;QACxD,CAAA;IACA,MAAMC,UAAUb,OACbE,GAAG,CAAC,CAACC,OAAOC,QAAU,CAAC,YAAY,EAAEA,MAAM,UAAU,EAAEd,QAAQa,MAAMW,IAAI,EAAE,CAAC,CAAC,EAC7ER,IAAI,CAAC;IACR,MAAMS,oBAAoBL,gBACvBR,GAAG,CACF,CAACC,OAAOC,QAAU,CAAC,WAAW,EAAEA,MAAM;wBACpB,EAAED,MAAMF,MAAM,KAAK,SAAS,uBAAuB,CAAC,SAAS,EAAEE,MAAMF,MAAM,EAAE,CAAC;QAC9F,EAAEX,QAAQa,MAAMQ,SAAS,EAAE;uBACZ,EAAEP,MAAM,MAAM,EAAEd,QAAQa,MAAMW,IAAI,EAAE,EAAE,EAAExB,QAAQa,MAAMS,IAAI,EAAE;GAChF,CAAC,EAECN,IAAI,CAAC;IACR,MAAMU,aAAajB,WAAWW,iBAAiB;IAC/C,MAAMO,wBAAwBlB,WAAWW,iBAAiB;IAC1D,MAAMQ,sBAAsBnB,WAAWW,iBAAiB;IACxD,MAAMS,0BAA0BpB,WAAWW,iBAAiB;IAC5D,MAAMU,eAAe;QAACJ;QAAY;KAAkB,CAACX,MAAM,CAACgB,SAASf,IAAI,CAAC;IAE1E,OAAO,CAAC;;;;;AAKV,EAAEO,QAAQ;;;;;;;;;;cAUI,EAAElB,gBAAgBa,YAAY,GAAG;oBAC3B,EAAEb,gBAAgBc,kBAAkB,GAAG;;;AAG3D,EAAEM,kBAAkB;;0DAEsC,EAAEG,oBAAoB;kEACd,EAAEC,wBAAwB;;EAE1F,EAAEF,wBAAwBA,wBAAwB,MAAM,GAAG;;;;;;EAM3D,EAAEG,aAAa;;;;;;;;;;;;;;AAcjB,CAAC;AACD"}

package/dist/vite/index.d.ts

@@ -0,0 +1,2 @@
+export { shipfoxClientComposition } from './plugin.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/vite/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/vite/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,wBAAwB,EAAC,MAAM,aAAa,CAAC"}

package/dist/vite/index.js

@@ -0,0 +1,3 @@
+export { shipfoxClientComposition } from './plugin.js';
+
+//# sourceMappingURL=index.js.map

package/dist/vite/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/vite/index.ts"],"sourcesContent":["export {shipfoxClientComposition} from './plugin.js';\n"],"names":["shipfoxClientComposition"],"mappings":"AAAA,SAAQA,wBAAwB,QAAO,cAAc"}

package/dist/vite/plugin.d.ts

@@ -0,0 +1,7 @@
+import type { Plugin } from 'vite';
+export interface ShipfoxClientCompositionOptions {
+    features: string;
+    out?: string;
+}
+export declare function shipfoxClientComposition({ features, out, }: ShipfoxClientCompositionOptions): Plugin;
+//# sourceMappingURL=plugin.d.ts.map

package/dist/vite/plugin.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"plugin.d.ts","sourceRoot":"","sources":["../../src/vite/plugin.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAC,MAAM,EAAiB,MAAM,MAAM,CAAC;AAWjD,MAAM,WAAW,+BAA+B;IAC9C,QAAQ,EAAE,MAAM,CAAC;IACjB,GAAG,CAAC,EAAE,MAAM,CAAC;CACd;AAQD,wBAAgB,wBAAwB,CAAC,EACvC,QAAQ,EACR,GAAgC,GACjC,EAAE,+BAA+B,GAAG,MAAM,CAsF1C"}

package/dist/vite/plugin.js

@@ -0,0 +1,77 @@
+import { mkdir, readFile, realpath, writeFile } from 'node:fs/promises';
+import { dirname, resolve } from 'node:path';
+import { composeRoutes } from '#compose/compose-routes.js';
+import { mergeConfigShapes } from '#compose/merge-config.js';
+import { validateProviderIds } from '#compose/validate-providers.js';
+import { validateNavigation, validateSettingsSections } from '#compose/validate-registries.js';
+import { navigationEntries, settingsEntries } from '#runtime/registries.js';
+import { evaluateFeatures, invalidateFeatures } from './evaluate-features.js';
+import { generateAppModule } from './generate.js';
+const defaultExportPattern = /\bexport\s+default\b|\bexport\s*\{[\s\S]*?\bas\s+default\b[\s\S]*?\}/;
+function hasDefaultExport(source) {
+    return defaultExportPattern.test(source);
+}
+export function shipfoxClientComposition({ features, out = './src/shipfox-app.gen.ts' }) {
+    let config;
+    let watchedFiles = new Set();
+    const outputPath = ()=>resolve(config?.root ?? process.cwd(), out);
+    const featuresPath = ()=>resolve(config?.root ?? process.cwd(), features);
+    async function assertDefaultRouteExports(resolveRoute, routes) {
+        for (const route of routes){
+            const resolvedRoute = await resolveRoute(route.impl, outputPath());
+            if (!resolvedRoute) {
+                throw new Error(`Could not resolve route implementation "${route.impl}" for "${route.path}".`);
+            }
+            const source = await readFile(resolvedRoute.id, 'utf8');
+            if (!hasDefaultExport(source)) {
+                throw new Error(`Route implementation "${route.impl}" for "${route.path}" must export default defineRoute(...).`);
+            }
+        }
+    }
+    async function generate({ addWatchFile, resolveRoute }) {
+        invalidateFeatures(watchedFiles);
+        const evaluated = await evaluateFeatures(featuresPath());
+        const routes = composeRoutes(evaluated.features);
+        validateProviderIds(evaluated.features);
+        validateNavigation(evaluated.features, routes.map((route)=>route.path));
+        validateSettingsSections(evaluated.features, routes.map((route)=>route.path));
+        mergeConfigShapes(evaluated.features);
+        await assertDefaultRouteExports(resolveRoute, routes);
+        watchedFiles = new Set(evaluated.loadedFiles);
+        for (const file of watchedFiles)addWatchFile(file);
+        const output = generateAppModule({
+            routes,
+            navigation: navigationEntries(evaluated.features),
+            settingsSections: settingsEntries(evaluated.features)
+        });
+        const path = outputPath();
+        const existing = await readFile(path, 'utf8').catch(()=>undefined);
+        if (existing === output) return;
+        await mkdir(dirname(path), {
+            recursive: true
+        });
+        await writeFile(path, output);
+    }
+    return {
+        name: 'shipfox-client-composition',
+        configResolved (resolvedConfig) {
+            config = resolvedConfig;
+        },
+        async buildStart () {
+            await generate({
+                addWatchFile: this.addWatchFile.bind(this),
+                resolveRoute: this.resolve.bind(this)
+            });
+        },
+        async hotUpdate ({ file, server }) {
+            const resolvedFile = await realpath(file).catch(()=>resolve(file));
+            if (!watchedFiles.has(resolvedFile)) return;
+            await generate({
+                addWatchFile: server.watcher.add.bind(server.watcher),
+                resolveRoute: this.environment.pluginContainer.resolveId.bind(this.environment.pluginContainer)
+            });
+        }
+    };
+}
+
+//# sourceMappingURL=plugin.js.map

package/dist/vite/plugin.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/vite/plugin.ts"],"sourcesContent":["import {mkdir, readFile, realpath, writeFile} from 'node:fs/promises';\nimport {dirname, resolve} from 'node:path';\nimport type {Plugin, ResolvedConfig} from 'vite';\nimport {composeRoutes} from '#compose/compose-routes.js';\nimport {mergeConfigShapes} from '#compose/merge-config.js';\nimport {validateProviderIds} from '#compose/validate-providers.js';\nimport {validateNavigation, validateSettingsSections} from '#compose/validate-registries.js';\nimport {navigationEntries, settingsEntries} from '#runtime/registries.js';\nimport {evaluateFeatures, invalidateFeatures} from './evaluate-features.js';\nimport {generateAppModule} from './generate.js';\n\nconst defaultExportPattern = /\\bexport\\s+default\\b|\\bexport\\s*\\{[\\s\\S]*?\\bas\\s+default\\b[\\s\\S]*?\\}/;\n\nexport interface ShipfoxClientCompositionOptions {\n  features: string;\n  out?: string;\n}\n\ntype RouteResolver = (source: string, importer?: string) => Promise<{id: string} | null>;\n\nfunction hasDefaultExport(source: string): boolean {\n  return defaultExportPattern.test(source);\n}\n\nexport function shipfoxClientComposition({\n  features,\n  out = './src/shipfox-app.gen.ts',\n}: ShipfoxClientCompositionOptions): Plugin {\n  let config: ResolvedConfig | undefined;\n  let watchedFiles = new Set<string>();\n\n  const outputPath = () => resolve(config?.root ?? process.cwd(), out);\n  const featuresPath = () => resolve(config?.root ?? process.cwd(), features);\n\n  async function assertDefaultRouteExports(\n    resolveRoute: RouteResolver,\n    routes: ReturnType<typeof composeRoutes>,\n  ): Promise<void> {\n    for (const route of routes) {\n      const resolvedRoute = await resolveRoute(route.impl, outputPath());\n      if (!resolvedRoute) {\n        throw new Error(\n          `Could not resolve route implementation \"${route.impl}\" for \"${route.path}\".`,\n        );\n      }\n      const source = await readFile(resolvedRoute.id, 'utf8');\n      if (!hasDefaultExport(source)) {\n        throw new Error(\n          `Route implementation \"${route.impl}\" for \"${route.path}\" must export default defineRoute(...).`,\n        );\n      }\n    }\n  }\n\n  async function generate({\n    addWatchFile,\n    resolveRoute,\n  }: {\n    addWatchFile(file: string): void;\n    resolveRoute: RouteResolver;\n  }): Promise<void> {\n    invalidateFeatures(watchedFiles);\n    const evaluated = await evaluateFeatures(featuresPath());\n    const routes = composeRoutes(evaluated.features);\n    validateProviderIds(evaluated.features);\n    validateNavigation(\n      evaluated.features,\n      routes.map((route) => route.path),\n    );\n    validateSettingsSections(\n      evaluated.features,\n      routes.map((route) => route.path),\n    );\n    mergeConfigShapes(evaluated.features);\n    await assertDefaultRouteExports(resolveRoute, routes);\n\n    watchedFiles = new Set(evaluated.loadedFiles);\n    for (const file of watchedFiles) addWatchFile(file);\n\n    const output = generateAppModule({\n      routes,\n      navigation: navigationEntries(evaluated.features),\n      settingsSections: settingsEntries(evaluated.features),\n    });\n    const path = outputPath();\n    const existing = await readFile(path, 'utf8').catch(() => undefined);\n    if (existing === output) return;\n    await mkdir(dirname(path), {recursive: true});\n    await writeFile(path, output);\n  }\n\n  return {\n    name: 'shipfox-client-composition',\n    configResolved(resolvedConfig) {\n      config = resolvedConfig;\n    },\n    async buildStart() {\n      await generate({\n        addWatchFile: this.addWatchFile.bind(this),\n        resolveRoute: this.resolve.bind(this),\n      });\n    },\n    async hotUpdate({file, server}) {\n      const resolvedFile = await realpath(file).catch(() => resolve(file));\n      if (!watchedFiles.has(resolvedFile)) return;\n      await generate({\n        addWatchFile: server.watcher.add.bind(server.watcher),\n        resolveRoute: this.environment.pluginContainer.resolveId.bind(\n          this.environment.pluginContainer,\n        ),\n      });\n    },\n  };\n}\n"],"names":["mkdir","readFile","realpath","writeFile","dirname","resolve","composeRoutes","mergeConfigShapes","validateProviderIds","validateNavigation","validateSettingsSections","navigationEntries","settingsEntries","evaluateFeatures","invalidateFeatures","generateAppModule","defaultExportPattern","hasDefaultExport","source","test","shipfoxClientComposition","features","out","config","watchedFiles","Set","outputPath","root","process","cwd","featuresPath","assertDefaultRouteExports","resolveRoute","routes","route","resolvedRoute","impl","Error","path","id","generate","addWatchFile","evaluated","map","loadedFiles","file","output","navigation","settingsSections","existing","catch","undefined","recursive","name","configResolved","resolvedConfig","buildStart","bind","hotUpdate","server","resolvedFile","has","watcher","add","environment","pluginContainer","resolveId"],"mappings":"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"}

package/package.json

@@ -0,0 +1,113 @@
+{
+  "name": "@shipfox/client-shell",
+  "license": "MIT",
+  "version": "0.2.0",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/ShipfoxHQ/shipfox.git",
+    "directory": "libs/client/shell"
+  },
+  "type": "module",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "imports": {
+    "#*": {
+      "workspace-source": "./src/*",
+      "development": "./src/*",
+      "default": "./dist/*"
+    },
+    "#test/*": "./test/*"
+  },
+  "exports": {
+    ".": {
+      "development": {
+        "types": "./src/index.ts",
+        "default": "./src/index.ts"
+      },
+      "default": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      }
+    },
+    "./runtime": {
+      "development": {
+        "types": "./src/runtime/index.ts",
+        "default": "./src/runtime/index.ts"
+      },
+      "default": {
+        "types": "./dist/runtime/index.d.ts",
+        "default": "./dist/runtime/index.js"
+      }
+    },
+    "./testing": {
+      "development": {
+        "types": "./src/testing/index.tsx",
+        "default": "./src/testing/index.tsx"
+      },
+      "default": {
+        "types": "./dist/testing/index.d.ts",
+        "default": "./dist/testing/index.js"
+      }
+    },
+    "./vite": {
+      "development": {
+        "types": "./src/vite/index.ts",
+        "default": "./src/vite/index.ts"
+      },
+      "default": {
+        "types": "./dist/vite/index.d.ts",
+        "default": "./dist/vite/index.js"
+      }
+    }
+  },
+  "dependencies": {
+    "@swc/helpers": "^0.5.17",
+    "@tanstack/router-core": "^1.171.13",
+    "jiti": "^2.7.0",
+    "framer-motion": "^12.23.24",
+    "@shipfox/api-auth-dto": "2.0.0",
+    "@shipfox/client-config": "0.2.0",
+    "@shipfox/client-api": "0.2.0",
+    "@shipfox/api-workspaces-dto": "2.0.0",
+    "@shipfox/react-ui": "0.3.1"
+  },
+  "peerDependencies": {
+    "@tanstack/react-query": "^5.101.0",
+    "@tanstack/react-router": "^1.170.16",
+    "jotai": "^2.19.1",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "vite": "^8.0.3",
+    "zod": "^4.4.3"
+  },
+  "devDependencies": {
+    "@storybook/react": "^10.0.0",
+    "@tanstack/react-query": "^5.101.0",
+    "@tanstack/react-router": "^1.170.16",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.3.2",
+    "@types/react": "^19.1.11",
+    "@types/react-dom": "^19.1.7",
+    "jotai": "^2.19.1",
+    "jsdom": "^29.0.0",
+    "react": "^19.1.1",
+    "react-dom": "^19.1.1",
+    "vite": "^8.0.3",
+    "zod": "^4.4.3",
+    "@shipfox/biome": "1.8.1",
+    "@shipfox/client-test-setup": "0.0.2",
+    "@shipfox/typescript": "1.1.6",
+    "@shipfox/ts-config": "1.3.8",
+    "@shipfox/vitest": "1.2.2",
+    "@shipfox/swc": "1.2.5"
+  },
+  "scripts": {
+    "build": "shipfox-swc",
+    "check": "shipfox-biome-check",
+    "check:fix": "shipfox-biome-check --write",
+    "test": "shipfox-vitest-run",
+    "test:watch": "shipfox-vitest-watch",
+    "type": "shipfox-tsc-check",
+    "type:emit": "shipfox-tsc-emit"
+  }
+}

package/src/components/main-layout.tsx

@@ -0,0 +1,45 @@
+import {FullPageLoader} from '@shipfox/react-ui/loader';
+import {Outlet, useMatches, useParams} from '@tanstack/react-router';
+import type {NavTabEntry} from '#contract.js';
+import {useMaybeActiveWorkspace} from '#runtime/active-workspace.js';
+import {NavBar} from './nav-bar.js';
+import {NavTabs} from './nav-tabs.js';
+
+declare module '@tanstack/react-router' {
+  interface StaticDataRouteOption {
+    layout?: 'full-bleed';
+  }
+}
+
+export function MainLayout({
+  navigation,
+  hideProjectNavigation = false,
+}: {
+  navigation: readonly NavTabEntry[];
+  hideProjectNavigation?: boolean;
+}) {
+  const workspace = useMaybeActiveWorkspace();
+  const {pid} = useParams({strict: false}) as {pid?: string};
+  const matches = useMatches();
+  if (!workspace) return <FullPageLoader />;
+  const fullBleed = matches.some((match) => match.staticData.layout === 'full-bleed');
+  return (
+    <div className="h-screen w-full flex flex-col bg-background-subtle-base">
+      <NavBar hideProjectNavigation={hideProjectNavigation} />
+      {hideProjectNavigation ? undefined : (
+        <NavTabs entries={navigation} scope={pid ? 'project' : 'workspace'} />
+      )}
+      {fullBleed ? (
+        <main className="flex-1 min-h-0 flex flex-col overflow-hidden">
+          <Outlet />
+        </main>
+      ) : (
+        <main className="flex-1 overflow-auto">
+          <div className="max-w-[1120px] mx-auto px-24 py-32">
+            <Outlet />
+          </div>
+        </main>
+      )}
+    </div>
+  );
+}

package/src/components/nav-bar.tsx

@@ -0,0 +1,41 @@
+import {Logo} from '@shipfox/react-ui/logo';
+import {Link} from '@tanstack/react-router';
+import {useActiveWorkspace} from '#runtime/active-workspace.js';
+import {useChrome} from '#runtime/chrome-context.js';
+import {UserMenu} from './user-menu.js';
+import {WorkspaceCrumb} from './workspace-crumb.js';
+
+export function NavBar({hideProjectNavigation = false}: {hideProjectNavigation?: boolean}) {
+  const workspace = useActiveWorkspace();
+  const {ProjectBreadcrumb} = useChrome();
+  return (
+    <header className="sticky top-0 z-30 h-56 px-16 flex items-center gap-12 bg-background-subtle-base border-b border-border-neutral-base shrink-0">
+      <Link
+        to="/"
+        aria-label="Shipfox home"
+        className="rounded-6 focus-visible:outline-none focus-visible:shadow-button-neutral-focus"
+      >
+        {hideProjectNavigation ? (
+          <>
+            <Logo variant="mark" alt="" className="sm:hidden" />
+            <Logo variant="wordmark" alt="" className="hidden sm:block" />
+          </>
+        ) : (
+          <Logo variant="wordmark" alt="" />
+        )}
+      </Link>
+      <span className="h-20 w-px bg-border-neutral-base" aria-hidden="true" />
+      <WorkspaceCrumb workspace={workspace} compact={hideProjectNavigation} />
+      {hideProjectNavigation ? undefined : (
+        <>
+          <span className="text-foreground-neutral-muted" aria-hidden="true">
+            /
+          </span>
+          <ProjectBreadcrumb />
+        </>
+      )}
+      <div className="flex-1" />
+      <UserMenu />
+    </header>
+  );
+}

package/src/components/nav-tabs.test.tsx

@@ -0,0 +1,60 @@
+import {
+  createMemoryHistory,
+  createRootRoute,
+  createRoute,
+  createRouter,
+  Outlet,
+  RouterProvider,
+} from '@tanstack/react-router';
+import {render, screen} from '@testing-library/react';
+import type {NavTabEntry} from '#contract.js';
+import {NavTabs} from './nav-tabs.js';
+
+const entries: readonly NavTabEntry[] = [
+  {
+    id: 'projects',
+    scope: 'workspace',
+    label: 'Projects',
+    to: '/workspaces/$wid/projects',
+    exact: true,
+  },
+  {
+    id: 'settings',
+    scope: 'workspace',
+    label: 'Settings',
+    to: '/workspaces/$wid/settings',
+  },
+];
+
+function WorkspaceTabs() {
+  return <NavTabs entries={entries} scope="workspace" />;
+}
+
+describe('NavTabs', () => {
+  test('distinguishes active and inactive workspace tabs', async () => {
+    const rootRoute = createRootRoute({component: Outlet});
+    const projectsRoute = createRoute({
+      getParentRoute: () => rootRoute,
+      path: '/workspaces/$wid/projects',
+      component: WorkspaceTabs,
+    });
+    const settingsRoute = createRoute({
+      getParentRoute: () => rootRoute,
+      path: '/workspaces/$wid/settings',
+      component: WorkspaceTabs,
+    });
+    const router = createRouter({
+      history: createMemoryHistory({initialEntries: ['/workspaces/workspace/settings']}),
+      routeTree: rootRoute.addChildren([projectsRoute, settingsRoute]),
+    });
+
+    render(<RouterProvider router={router} />);
+
+    const projectsTab = await screen.findByRole('tab', {name: 'Projects'});
+    const settingsTab = screen.getByRole('tab', {name: 'Settings'});
+    expect(projectsTab).toHaveClass('text-foreground-neutral-muted');
+    expect(projectsTab).toHaveAttribute('aria-selected', 'false');
+    expect(settingsTab).toHaveClass('text-foreground-neutral-base');
+    expect(settingsTab).toHaveAttribute('aria-selected', 'true');
+  });
+});