@tower_74/cms-app 0.2.0 → 0.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tower_74/cms-app",
-  "version": "0.2.0",
+  "version": "0.4.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",

package/src/index.ts

@@ -4,9 +4,9 @@ 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';
+export { cmsPages };
 
 type PageGlob = Record<string, () => Promise<unknown>>;
 

package/src/layouts/AdminLayout.vue

@@ -29,6 +29,7 @@ import {
     ListOrdered,
     Menu,
     Paintbrush,
+    Puzzle,
     Settings,
     ShoppingBag,
     Tag,
@@ -60,6 +61,7 @@ const nav: NavItem[] = [
     { label: 'Theme', href: '/admin/appearance/theme', icon: Paintbrush, permission: 'theme' },
     { label: 'Widgets', href: '/admin/appearance/widgets', icon: LayoutGrid, permission: 'widgets' },
     { label: 'Settings', href: '/admin/settings', icon: Settings, permission: 'settings' },
+    { label: 'Plugins', href: '/admin/plugins', icon: Puzzle, permission: 'plugins' },
 ];
 
 const page = usePage();
@@ -79,8 +81,7 @@ const can = computed(() => (page.props.auth as { can?: Record<string, boolean> }
 // `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) ?? [];
+    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,

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/Admin/Plugins/Index.vue

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import AdminLayout from '@/layouts/AdminLayout.vue';
+import { router } from '@inertiajs/vue3';
+
+defineProps<{
+    plugins: Array<{ key: string; name: string; version: string; enabled: boolean }>;
+}>();
+
+// Enabling/disabling persists via the PluginRegistry; the redirect back reflects the new
+// state (a plugin's capabilities are gated on enable at boot — ADR-0026).
+const toggle = (plugin: { key: string; enabled: boolean }) => {
+    router.post(`/admin/plugins/${plugin.key}/${plugin.enabled ? 'disable' : 'enable'}`, {}, { preserveScroll: true });
+};
+</script>
+
+<template>
+    <AdminLayout>
+        <div class="p-6">
+            <h1 class="text-2xl font-semibold">Plugins</h1>
+            <p class="mt-1 text-sm text-muted">
+                Enable or disable installed plugins. New plugins become available by installing their package; manage them here.
+            </p>
+
+            <div v-if="plugins.length" class="mt-6 divide-y divide-border overflow-hidden rounded-lg border border-border">
+                <div v-for="plugin in plugins" :key="plugin.key" class="flex items-center justify-between gap-4 p-4">
+                    <div>
+                        <div class="font-medium">{{ plugin.name }}</div>
+                        <div class="text-xs text-muted">{{ plugin.key }} · v{{ plugin.version }}</div>
+                    </div>
+                    <button
+                        type="button"
+                        class="rounded-md px-3 py-1.5 text-sm font-medium transition"
+                        :class="
+                            plugin.enabled
+                                ? 'bg-accent text-accent-foreground hover:bg-accent/80'
+                                : 'bg-primary text-primary-foreground hover:opacity-90'
+                        "
+                        @click="toggle(plugin)"
+                    >
+                        {{ plugin.enabled ? 'Disable' : 'Enable' }}
+                    </button>
+                </div>
+            </div>
+
+            <p v-else class="mt-6 text-sm text-muted">No plugins installed. Install a plugin package to manage it here.</p>
+        </div>
+    </AdminLayout>
+</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>