@tower_74/cms-app 0.1.0 → 0.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tower_74/cms-app",
-  "version": "0.1.0",
+  "version": "0.3.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",
@@ -26,7 +26,7 @@
   },
   "peerDependencies": {
     "@inertiajs/vue3": "^2.0.0-beta.3",
-    "@tower_74/cms-ui": "^0.12.0",
+    "@tower_74/cms-ui": "^0.13.0",
     "@vueuse/core": "^12.0.0",
     "laravel-vite-plugin": "^1.0",
     "lucide-vue-next": "^0.468.0",
@@ -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 { pluginBlocks, pluginIcons, registerCmsPlugins } from './plugins';
+export type { CmsPlugin } from './plugins';
 export { cmsPages };
 
 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,21 @@ 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/layouts/PublicLayout.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import AuthBar from '@/components/AuthBar.vue';
+import { pluginBlocks } from '@/plugins';
 import { type Block, BlockRenderer } from '@tower_74/cms-ui';
 import { computed } from 'vue';
 
@@ -46,7 +47,7 @@ const showName = computed(() => !props.site.logo || props.site.showName);
         </main>
 
         <footer class="border-t border-border bg-surface">
-            <BlockRenderer v-if="footerWidgets.length" :blocks="footerWidgets" />
+            <BlockRenderer v-if="footerWidgets.length" :blocks="footerWidgets" :components="pluginBlocks()" />
             <div class="mx-auto max-w-6xl px-4 py-6 text-sm text-muted sm:px-6">© {{ year }} {{ site.name }}</div>
         </footer>
     </div>

package/src/pages/Admin/Content/Preview.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { pluginBlocks } from '@/plugins';
 import { Link } from '@inertiajs/vue3';
 import { type Block, Button, LandingPageTemplate } from '@tower_74/cms-ui';
 
@@ -19,7 +20,7 @@ defineProps<{
             </Link>
         </div>
 
-        <LandingPageTemplate v-if="blocks.length" :blocks="blocks" />
+        <LandingPageTemplate v-if="blocks.length" :blocks="blocks" :components="pluginBlocks()" />
         <p v-else class="px-4 py-20 text-center text-muted">This page has no blocks yet. Add some in the editor.</p>
     </div>
 </template>

package/src/pages/Public/Shop/Show.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import Seo from '@/components/Seo.vue';
 import PublicLayout from '@/layouts/PublicLayout.vue';
+import { pluginBlocks } from '@/plugins';
 import { router } from '@inertiajs/vue3';
 import { type Block, BlockRenderer, ProductOverview } from '@tower_74/cms-ui';
 
@@ -41,6 +42,6 @@ const addToCart = (payload: { variantId: number | string; quantity: number }) =>
             @add-to-cart="addToCart"
         />
 
-        <BlockRenderer v-if="product.blocks.length" :blocks="product.blocks" />
+        <BlockRenderer v-if="product.blocks.length" :blocks="product.blocks" :components="pluginBlocks()" />
     </PublicLayout>
 </template>

package/src/pages/Public/Show.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import Seo from '@/components/Seo.vue';
 import PublicLayout from '@/layouts/PublicLayout.vue';
+import { pluginBlocks } from '@/plugins';
 import { type Block, DetailPageTemplate, LandingPageTemplate } from '@tower_74/cms-ui';
 
 defineProps<{
@@ -29,13 +30,13 @@ defineProps<{
             <div v-if="page.showTitle" class="mx-auto max-w-6xl px-4 pb-2 pt-10 sm:px-6">
                 <h1 class="text-3xl font-bold tracking-tight text-text">{{ page.title }}</h1>
             </div>
-            <LandingPageTemplate :blocks="page.blocks" />
+            <LandingPageTemplate :blocks="page.blocks" :components="pluginBlocks()" />
         </template>
         <template v-else>
             <div v-if="page.featuredImage" class="mx-auto max-w-3xl px-4 pt-8 sm:px-6">
                 <img :src="page.featuredImage.src" :alt="page.featuredImage.alt ?? ''" class="w-full rounded-lg object-cover" />
             </div>
-            <DetailPageTemplate :header="page.header" :blocks="page.blocks" />
+            <DetailPageTemplate :header="page.header" :blocks="page.blocks" :components="pluginBlocks()" />
         </template>
     </PublicLayout>
 </template>

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 ?? {}));
+}