@tower_74/cms-app 0.1.0 → 0.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tower_74/cms-app",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Front-end app shell for the Base CMS — Inertia/Vue pages, layouts, components and composables. Ships source; consumed by client sites as a versioned dependency (ADR-0023) and overridable per site.",
   "type": "module",
   "license": "UNLICENSED",
@@ -42,8 +42,10 @@
     "eslint-config-prettier": "^10.0.1",
     "eslint-plugin-vue": "^9.32.0",
     "prettier": "^3.4.2",
+    "prettier-plugin-organize-imports": "^4.3.0",
     "typescript": "^5.2.2",
     "typescript-eslint": "^8.23.0",
-    "vue": "^3.5.13"
+    "vue": "^3.5.13",
+    "vue-tsc": "^3.3.5"
   }
 }

package/src/index.ts

@@ -1,22 +1,25 @@
 import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
 import type { DefineComponent } from 'vue';
 import { cmsPages } from './pages';
+import { pluginPages } from './plugins';
 
 export { initializeTheme } from './composables/useAppearance';
 export { cmsPages };
+export { pluginBlocks, pluginIcons, registerCmsPlugins } from './plugins';
+export type { CmsPlugin } from './plugins';
 
 type PageGlob = Record<string, () => Promise<unknown>>;
 
 /**
- * Resolve an Inertia page by name, preferring a client site's own page of the same
- * name over the one shipped by the CMS app shell (ADR-0023). `localPages` is the host
- * app's `import.meta.glob('./pages/**\/*.vue')` and may be empty. Both globs produce
- * `./pages/Name.vue` keys, so spreading local on top lets a client override any page
- * by dropping a same-named file into its own `resources/js/pages`.
+ * Resolve an Inertia page by name. Sources merge in precedence order (later wins): the
+ * CMS app shell's own pages → installed plugins' pages (ADR-0026) → the host app's
+ * `localPages` (a client overrides any page by dropping a same-named file in its own
+ * `resources/js/pages`). All globs produce `./pages/Name.vue` keys.
  */
 export function resolveCmsPage(name: string, localPages: PageGlob = {}) {
     return resolvePageComponent(`./pages/${name}.vue`, {
         ...cmsPages,
+        ...pluginPages(),
         ...localPages,
     } as Record<string, () => Promise<DefineComponent>>);
 }

package/src/layouts/AdminLayout.vue

@@ -16,8 +16,10 @@ import {
     SidebarMenuItem,
     SidebarTrigger,
 } from '@/components/ui/sidebar';
+import { pluginIcons } from '@/plugins';
 import { Link, usePage } from '@inertiajs/vue3';
 import {
+    Box,
     FileStack,
     FileText,
     Folder,
@@ -73,7 +75,22 @@ const site = computed(
 // Name shows whenever there's no logo, or the logo is configured to sit beside the name.
 const showName = computed(() => !site.value.logo || site.value.showName);
 const can = computed(() => (page.props.auth as { can?: Record<string, boolean> } | undefined)?.can ?? {});
-const visibleNav = computed(() => nav.filter((item) => !item.permission || can.value[item.permission]));
+// Admin-nav items contributed by installed plugins (ADR-0026), shared from the server as
+// `adminNav` with a lucide icon *name* the plugin's front end resolves (fallback: Box).
+const pluginNav = computed<NavItem[]>(() => {
+    const icons = pluginIcons();
+    const items =
+        (page.props.adminNav as Array<{ label: string; href: string; icon: string | null; permission: string | null }> | undefined) ?? [];
+
+    return items.map((item) => ({
+        label: item.label,
+        href: item.href,
+        icon: (item.icon ? icons[item.icon] : undefined) ?? Box,
+        permission: item.permission ?? undefined,
+    }));
+});
+
+const visibleNav = computed(() => [...nav, ...pluginNav.value].filter((item) => !item.permission || can.value[item.permission]));
 
 const isActive = (href: string) => (href === '/dashboard' ? url.value === '/dashboard' : url.value.startsWith(href));
 

package/src/plugins.ts

@@ -0,0 +1,42 @@
+import type { Component } from 'vue';
+
+type PageGlob = Record<string, () => Promise<unknown>>;
+
+/**
+ * A plugin's front-end contribution (ADR-0026). The plugin's npm package exports one of
+ * these; the host registers them all in `resources/js/cms.plugins.ts` via
+ * {@link registerCmsPlugins}. Pages are merged into the Inertia resolver, blocks into the
+ * block renderer, and icons resolve the names a plugin's admin-nav items reference.
+ */
+export interface CmsPlugin {
+    /** Machine key, matching the PHP plugin (e.g. "events"). */
+    key: string;
+    /** The plugin's pages: `import.meta.glob('./pages/**\/*.vue')` from its own package. */
+    pages?: PageGlob;
+    /** Block type → Vue component, for the block renderer. */
+    blocks?: Record<string, Component>;
+    /** lucide icon name → component, for the admin-nav items the plugin registers (PHP side). */
+    icons?: Record<string, Component>;
+}
+
+const registered: CmsPlugin[] = [];
+
+/** Register the front-end of the plugins this site installs. Call once, at app boot. */
+export function registerCmsPlugins(plugins: CmsPlugin[]): void {
+    registered.push(...plugins);
+}
+
+/** Merged page globs across all registered plugins (later plugins win on a key clash). */
+export function pluginPages(): PageGlob {
+    return Object.assign({}, ...registered.map((p) => p.pages ?? {}));
+}
+
+/** Merged block type → component map across all registered plugins. */
+export function pluginBlocks(): Record<string, Component> {
+    return Object.assign({}, ...registered.map((p) => p.blocks ?? {}));
+}
+
+/** Merged icon-name → component map across all registered plugins (for admin nav). */
+export function pluginIcons(): Record<string, Component> {
+    return Object.assign({}, ...registered.map((p) => p.icons ?? {}));
+}