@mframework/ui 0.1.0-beta.3 → 0.1.0-beta.5

package/dist/runtime/plugins/formkit.js

@@ -1,8 +1,8 @@
-import { defineNuxtPlugin } from 'nuxt/app';
-import { plugin as formKitPlugin, defaultConfig } from '@formkit/vue';
-import '@formkit/themes/genesis';
+import { defineNuxtPlugin } from "nuxt/app";
+import { plugin as formKitPlugin, defaultConfig } from "@formkit/vue";
+import "@formkit/themes/genesis";
 export default defineNuxtPlugin((nuxtApp) => {
-    nuxtApp.vueApp.use(formKitPlugin, defaultConfig({
+  nuxtApp.vueApp.use(formKitPlugin, defaultConfig({
     // You can inject your own inputs, locales, etc. here
-    }));
+  }));
 });

package/dist/runtime/plugins/lightgallery.d.ts

@@ -1,6 +0,0 @@
-import 'lightgallery/css/lightgallery.css';
-import 'lightgallery/css/lg-zoom.css';
-import 'lightgallery/css/lg-thumbnail.css';
-import 'lightgallery/css/lg-video.css';
-declare const _default: import("nuxt/app").Plugin<Record<string, unknown>> & import("nuxt/app").ObjectPlugin<Record<string, unknown>>;
-export default _default;

package/dist/runtime/plugins/lightgallery.js

@@ -1,15 +1,21 @@
-import { defineNuxtPlugin } from 'nuxt/app';
-import lightGallery from 'lightgallery';
-import lgZoom from 'lg-zoom';
-import lgVideo from 'lg-video';
-import lgThumbnail from 'lg-thumbnail';
-import 'lightgallery/css/lightgallery.css';
-import 'lightgallery/css/lg-zoom.css';
-import 'lightgallery/css/lg-thumbnail.css';
-import 'lightgallery/css/lg-video.css';
+import { defineNuxtPlugin } from 'nuxt/app'
+import lightGallery from 'lightgallery'
+import lgZoom from 'lg-zoom'
+import lgVideo from 'lg-video'
+import lgThumbnail from 'lg-thumbnail'
+import 'lightgallery/css/lightgallery.css'
+import 'lightgallery/css/lg-zoom.css'
+import 'lightgallery/css/lg-thumbnail.css'
+import 'lightgallery/css/lg-video.css'
+
 export default defineNuxtPlugin(() => {
-    // You can expose a composable or directive later if you want.
-    // For now, this ensures CSS + plugins are bundled.
-    // Example directive could be added here if needed.
-    lightGallery([lgZoom, lgVideo, lgThumbnail]);
-});
+  // You can expose a composable or directive later if you want.
+  // For now, this ensures CSS + plugins are bundled.
+  // Example directive could be added here if needed.
+  document.querySelectorAll('.lightgallery').forEach((element) => {
+    lightGallery(element as HTMLElement, {
+      plugins: [lgZoom, lgVideo, lgThumbnail],
+      speed: 500,
+    })
+  })
+})

package/dist/runtime/plugins/motion.d.ts

@@ -1,2 +0,0 @@
-declare const _default: import("nuxt/app").Plugin<Record<string, unknown>> & import("nuxt/app").ObjectPlugin<Record<string, unknown>>;
-export default _default;

package/dist/runtime/plugins/motion.js

@@ -1,5 +1,5 @@
-import { defineNuxtPlugin } from 'nuxt/app';
-import { MotionPlugin } from '@vueuse/motion';
+import { defineNuxtPlugin } from "nuxt/app";
+import { MotionPlugin } from "@vueuse/motion";
 export default defineNuxtPlugin((nuxtApp) => {
-    nuxtApp.vueApp.use(MotionPlugin);
+  nuxtApp.vueApp.use(MotionPlugin);
 });

package/dist/runtime/plugins/theme-switcher.d.ts

@@ -1,2 +0,0 @@
-declare const _default: import("nuxt/app").Plugin<Record<string, unknown>> & import("nuxt/app").ObjectPlugin<Record<string, unknown>>;
-export default _default;

package/dist/runtime/plugins/theme-switcher.js

@@ -1,27 +1,24 @@
-import { defineNuxtPlugin } from 'nuxt/app';
-import { useTheme } from 'vuetify';
+import { defineNuxtPlugin } from "nuxt/app";
+import { useTheme } from "vuetify";
 export default defineNuxtPlugin((nuxtApp) => {
-    if (process.server)
-        return;
-    const theme = useTheme();
-    const setTheme = (mode) => {
-        theme.global.name.value = mode;
-        document.documentElement.classList.toggle('dark', mode === 'dark');
-        localStorage.setItem('mframework-theme', mode);
-    };
-    const toggleTheme = () => {
-        const current = theme.global.name.value === 'light' ? 'dark' : 'light';
-        setTheme(current);
-    };
-    // Load saved theme
-    const saved = localStorage.getItem('mframework-theme');
-    if (saved === 'light' || saved === 'dark') {
-        setTheme(saved);
-    }
-    // Expose composable
-    nuxtApp.provide('mTheme', {
-        setTheme,
-        toggleTheme,
-        current: () => theme.global.name.value
-    });
+  if (process.server) return;
+  const theme = useTheme();
+  const setTheme = (mode) => {
+    theme.global.name.value = mode;
+    document.documentElement.classList.toggle("dark", mode === "dark");
+    localStorage.setItem("mframework-theme", mode);
+  };
+  const toggleTheme = () => {
+    const current = theme.global.name.value === "light" ? "dark" : "light";
+    setTheme(current);
+  };
+  const saved = localStorage.getItem("mframework-theme");
+  if (saved === "light" || saved === "dark") {
+    setTheme(saved);
+  }
+  nuxtApp.provide("mTheme", {
+    setTheme,
+    toggleTheme,
+    current: () => theme.global.name.value
+  });
 });

package/dist/runtime/plugins/theme.d.ts

@@ -1,2 +0,0 @@
-declare const _default: import("nuxt/app").Plugin<Record<string, unknown>> & import("nuxt/app").ObjectPlugin<Record<string, unknown>>;
-export default _default;

package/dist/runtime/plugins/theme.js

@@ -1,34 +1,48 @@
-import { defineNuxtPlugin, useRuntimeConfig } from 'nuxt/app';
-import { useTheme } from 'vuetify';
+import {
+  defineNuxtPlugin,
+  useRuntimeConfig
+} from "nuxt/app";
+import {
+  useTheme
+} from "vuetify";
 export default defineNuxtPlugin(() => {
-    if (process.server)
-        return;
-    const theme = useTheme();
-    const config = useRuntimeConfig();
-    const defaultTheme = config.public.mframeworkUi?.theme || 'light';
-    theme.global.name.value = defaultTheme;
-    theme.themes.value = {
-        light: {
-            dark: false,
-            colors: {
-                primary: 'var(--m-primary)',
-                secondary: 'var(--m-secondary)',
-                accent: 'var(--m-accent)',
-                surface: 'var(--m-surface)',
-                background: 'var(--m-muted)',
-                border: 'var(--m-border)'
-            }
-        },
-        dark: {
-            dark: true,
-            colors: {
-                primary: 'var(--m-primary)',
-                secondary: 'var(--m-secondary)',
-                accent: 'var(--m-accent)',
-                surface: 'var(--m-surface)',
-                background: 'var(--m-muted)',
-                border: 'var(--m-border)'
-            }
-        }
-    };
+  if (process.server) return;
+  const theme = useTheme();
+  const config = useRuntimeConfig();
+  const baseColors = {
+    primary: "var(--m-primary)",
+    secondary: "var(--m-secondary)",
+    accent: "var(--m-accent)",
+    surface: "var(--m-surface)",
+    background: "var(--m-muted)",
+    border: "var(--m-border)",
+    // Required Vuetify system colors
+    success: "#22c55e",
+    warning: "#f59e0b",
+    error: "#ef4444",
+    info: "#3b82f6",
+    // Vuetify internal required fields
+    "on-primary": "#ffffff",
+    "on-secondary": "#ffffff",
+    "on-surface": "#ffffff",
+    "on-background": "#ffffff",
+    "on-success": "#ffffff",
+    "on-warning": "#ffffff",
+    "on-error": "#ffffff",
+    "on-info": "#ffffff"
+  };
+  const defaultTheme = config.public.mframeworkUi?.theme || "light";
+  theme.global.name.value = defaultTheme;
+  theme.themes.value = {
+    light: {
+      dark: false,
+      colors: baseColors,
+      variables: {}
+    },
+    dark: {
+      dark: true,
+      colors: baseColors,
+      variables: {}
+    }
+  };
 });

package/dist/runtime/plugins/vuetify.d.ts

@@ -1,3 +0,0 @@
-import 'vuetify/styles';
-declare const _default: import("nuxt/app").Plugin<Record<string, unknown>> & import("nuxt/app").ObjectPlugin<Record<string, unknown>>;
-export default _default;

package/dist/runtime/plugins/vuetify.js

@@ -1,33 +1,33 @@
-import { defineNuxtPlugin, useRuntimeConfig } from 'nuxt/app';
-import { createVuetify } from 'vuetify';
-import * as components from 'vuetify/components';
-import * as directives from 'vuetify/directives';
-import 'vuetify/styles';
+import { defineNuxtPlugin, useRuntimeConfig } from "nuxt/app";
+import { createVuetify } from "vuetify";
+import * as components from "vuetify/components";
+import * as directives from "vuetify/directives";
+import "vuetify/styles";
 export default defineNuxtPlugin((nuxtApp) => {
-    const config = useRuntimeConfig();
-    const theme = config.public.mframeworkUi?.theme || 'light';
-    const vuetify = createVuetify({
-        components,
-        directives,
-        theme: {
-            defaultTheme: theme,
-            themes: {
-                light: {
-                    dark: false,
-                    colors: {
-                        primary: '#3b82f6',
-                        secondary: '#64748b'
-                    }
-                },
-                dark: {
-                    dark: true,
-                    colors: {
-                        primary: '#3b82f6',
-                        secondary: '#64748b'
-                    }
-                }
-            }
+  const config = useRuntimeConfig();
+  const theme = config.public.mframeworkUi?.theme || "light";
+  const vuetify = createVuetify({
+    components,
+    directives,
+    theme: {
+      defaultTheme: theme,
+      themes: {
+        light: {
+          dark: false,
+          colors: {
+            primary: "#3b82f6",
+            secondary: "#64748b"
+          }
+        },
+        dark: {
+          dark: true,
+          colors: {
+            primary: "#3b82f6",
+            secondary: "#64748b"
+          }
         }
-    });
-    nuxtApp.vueApp.use(vuetify);
+      }
+    }
+  });
+  nuxtApp.vueApp.use(vuetify);
 });

package/dist/runtime/search/client.d.ts

@@ -1,2 +0,0 @@
-import type { SearchClient } from 'instantsearch.js';
-export declare function getSearchClient(): SearchClient | null;

package/dist/runtime/search/client.js

@@ -1,21 +1,14 @@
 export function getSearchClient() {
-    let mod;
-    try {
-        mod = require('@searchkit/instantsearch-client');
-    }
-    catch {
-        console.warn('[mframework-ui] Searchkit client missing');
-        return null;
-    }
-    const candidate = mod?.default?.default ||
-        mod?.default?.createClient ||
-        mod?.default ||
-        mod?.createClient ||
-        mod;
-    if (typeof candidate !== 'function')
-        return null;
-    const host = process.env.NUXT_PUBLIC_SEARCHKIT_HOST;
-    if (!host)
-        return null;
-    return candidate({ host });
+  let mod;
+  try {
+    mod = require("@searchkit/instantsearch-client");
+  } catch {
+    console.warn("[mframework-ui] Searchkit client missing");
+    return null;
+  }
+  const candidate = mod?.default?.default || mod?.default?.createClient || mod?.default || mod?.createClient || mod;
+  if (typeof candidate !== "function") return null;
+  const host = process.env.NUXT_PUBLIC_SEARCHKIT_HOST;
+  if (!host) return null;
+  return candidate({ host });
 }

package/dist/runtime/search/plugin.d.ts

@@ -1,2 +0,0 @@
-declare const _default: (nuxtApp: any) => void;
-export default _default;

package/dist/runtime/search/plugin.js

@@ -1,7 +1,7 @@
-import { getSearchClient } from './client';
+import { getSearchClient } from "./client.js";
 export default (nuxtApp) => {
-    const client = getSearchClient();
-    const indexName = process.env.NUXT_PUBLIC_SEARCH_INDEX || 'default';
-    nuxtApp.provide('mSearchClient', client);
-    nuxtApp.provide('mSearchIndex', indexName);
+  const client = getSearchClient();
+  const indexName = process.env.NUXT_PUBLIC_SEARCH_INDEX || "default";
+  nuxtApp.provide("mSearchClient", client);
+  nuxtApp.provide("mSearchIndex", indexName);
 };

package/dist/runtime/styles/index.css

@@ -2,4 +2,97 @@
 :root {
   --m-primary: #3b82f6;
   --m-secondary: #64748b;
+  --m-accent: #10b981;
+  --m-muted: #f3f4f6;
+  --m-surface: #ffffff;
+  --m-border: #e5e7eb;
+}
+
+.dark {
+  --m-primary: #60a5fa;
+  --m-secondary: #94a3b8;
+  --m-accent: #34d399;
+  --m-muted: #1f2937;
+  --m-surface: #111827;
+  --m-border: #374151;
+}
+
+/* Let's highlight canvas boundaries */
+#gjs {
+  border: 3px solid #444;
+}
+
+/* Theming */
+/* Primary color for the background */
+.gjs-one-bg {
+  background-color: #78366a;
+}
+
+/* Secondary color for the text color */
+.gjs-two-color {
+  color: rgba(255, 255, 255, 0.7);
+}
+
+/* Tertiary color for the background */
+.gjs-three-bg {
+  background-color: #ec5896;
+  color: white;
+}
+
+/* Quaternary color for the text color */
+.gjs-four-color,
+.gjs-four-color-h:hover {
+  color: #ec5896;
+}
+
+/* Reset some default styling */
+.gjs-cv-canvas {
+  top: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.gjs-block {
+  width: auto;
+  height: auto;
+  min-height: auto;
+}
+
+.panel__top {
+  padding: 0;
+  width: 100%;
+  display: flex;
+  position: initial;
+  justify-content: center;
+  justify-content: space-between;
+}
+
+.panel__basic-actions {
+  position: initial;
+}
+
+.editor-row {
+  display: flex;
+  justify-content: flex-start;
+  align-items: stretch;
+  flex-wrap: nowrap;
+  height: 300px;
+}
+
+.editor-canvas {
+  flex-grow: 1;
+}
+
+.panel__right {
+  flex-basis: 230px;
+  position: relative;
+  overflow-y: auto;
+}
+
+.panel__switcher {
+  position: initial;
+}
+
+.panel__devices {
+  position: initial;
 }

package/dist/runtime/styles/tailwind.css

@@ -1 +1 @@
-@tailwind base;@tailwind components;@tailwind utilities;
+@import "tailwindcss/preflight";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mframework/ui",
-  "version": "0.1.0-beta.3",
+  "version": "0.1.0-beta.5",
   "type": "module",
   "description": "Opiniated UI module for the M Framework.",
   "keywords": [
@@ -13,11 +13,16 @@
   ],
   "main": "dist/module.js",
   "module": "dist/module.mjs",
+  "exports": {
+    ".": {
+      "import": "./dist/module.mjs"
+    }
+  },
   "files": [
     "dist"
   ],
   "scripts": {
-    "build": "tsc -p tsconfig.json",
+    "build": "nuxt-module-build",
     "dev": "nuxt-module-dev"
   },
   "peerDependencies": {
@@ -50,4 +55,4 @@
     "sass-embedded": "^1.93.3",
     "typescript": "^5.7.0"
   }
-}
+}

package/dist/adapters/adapter-directus/src/types/ui.d.ts

@@ -1,21 +0,0 @@
-export interface Image {
-    url: string;
-    alt?: string;
-    width?: number;
-    height?: number;
-    [key: string]: any;
-}
-export interface Product {
-    id: string;
-    name?: string;
-    price?: number;
-    images?: Image[];
-    [key: string]: any;
-}
-export interface Category {
-    id: string;
-    name?: string;
-    slug?: string;
-    image?: string;
-    [key: string]: any;
-}

package/dist/adapters/adapter-directus/src/types/ui.js

@@ -1 +0,0 @@
-export {};

package/dist/module.d.ts

@@ -1,6 +0,0 @@
-export interface MFrameworkUiOptions {
-    theme?: 'light' | 'dark';
-    builder?: boolean;
-}
-declare const _default: import("nuxt/schema").NuxtModule<MFrameworkUiOptions, MFrameworkUiOptions, false>;
-export default _default;

package/dist/module.js

@@ -1,68 +0,0 @@
-import { defineNuxtModule, addPlugin, createResolver, addComponentsDir, addImportsDir } from 'nuxt/kit';
-export default defineNuxtModule({
-    meta: {
-        name: '@mframework/ui',
-        configKey: 'mframeworkUi'
-    },
-    defaults: {
-        theme: 'light',
-        builder: true
-    },
-    setup(options, nuxt) {
-        const resolver = createResolver(import.meta.url);
-        //
-        // 1. Ensure Vuetify loads FIRST
-        //
-        addPlugin({
-            src: resolver.resolve('./runtime/plugins/vuetify'),
-            mode: 'all'
-        });
-        //
-        // 2. Global styles (Tailwind, Vuetify overrides, tokens)
-        //
-        nuxt.options.css = nuxt.options.css || [];
-        nuxt.options.css.push(resolver.resolve('./runtime/styles/index.scss'));
-        //
-        // 3. Register core UI plugins
-        //
-        const plugins = [
-            'formkit',
-            'fontawesome',
-            'lightgallery',
-            'motion',
-            'theme'
-        ];
-        plugins.forEach((name) => {
-            addPlugin({
-                src: resolver.resolve(`./runtime/plugins/${name}`),
-                mode: 'all'
-            });
-        });
-        //
-        // 4. Register GrapesJS builder (client‑only)
-        //
-        if (options.builder) {
-            addPlugin({
-                src: resolver.resolve('./runtime/plugins/builder'),
-                mode: 'client'
-            });
-        }
-        //
-        // 5. Auto‑import components & composables
-        //
-        addComponentsDir({
-            path: resolver.resolve('./runtime/components'),
-            prefix: 'M'
-        });
-        addImportsDir(resolver.resolve('./runtime/composables'));
-        //
-        // 6. Expose runtime config
-        //
-        nuxt.options.runtimeConfig.public.mframeworkUi = {
-            ...(nuxt.options.runtimeConfig.public.mframeworkUi || {}),
-            ...options
-        };
-        nuxt.options.tailwindcss = nuxt.options.tailwindcss || {};
-        nuxt.options.tailwindcss.configPath = resolver.resolve('./runtime/assets/config/tailwind.config.js');
-    }
-});

package/dist/modules/ui/src/module.d.ts

@@ -1,8 +0,0 @@
-export interface MFrameworkUiOptions {
-    theme?: 'light' | 'dark';
-    builder?: boolean | {
-        enabled?: boolean;
-    };
-}
-declare const _default: import("nuxt/schema").NuxtModule<MFrameworkUiOptions, MFrameworkUiOptions, false>;
-export default _default;

package/dist/modules/ui/src/module.js

@@ -1,75 +0,0 @@
-import { defineNuxtModule, addPlugin, createResolver, addComponentsDir, addImportsDir } from 'nuxt/kit';
-export default defineNuxtModule({
-    meta: {
-        name: '@mframework/ui',
-        configKey: 'mframeworkUi'
-    },
-    defaults: {
-        theme: 'light',
-        builder: true
-    },
-    setup(options, nuxt) {
-        const resolver = createResolver(import.meta.url);
-        //
-        // 1. Ensure Vuetify loads FIRST
-        //
-        addPlugin({
-            src: resolver.resolve('./runtime/plugins/vuetify'),
-            mode: 'all'
-        });
-        //
-        // 2. Global styles (Tailwind, Vuetify overrides, tokens)
-        //
-        nuxt.options.css = nuxt.options.css || [];
-        nuxt.options.css.push(resolver.resolve('./runtime/styles/index.scss'));
-        //
-        // 3. Register core UI plugins
-        //
-        const plugins = [
-            'formkit',
-            'fontawesome',
-            'lightgallery',
-            'motion',
-            'theme'
-        ];
-        plugins.forEach((name) => {
-            addPlugin({
-                src: resolver.resolve(`./runtime/plugins/${name}`),
-                mode: 'all'
-            });
-        });
-        //
-        // 4. Register GrapesJS builder (client‑only)
-        //
-        if (options.builder) {
-            addPlugin({
-                src: resolver.resolve('./runtime/plugins/builder'),
-                mode: 'client'
-            });
-        }
-        //
-        // 5. Auto‑import components & composables
-        //
-        addComponentsDir({
-            path: resolver.resolve('./runtime/components'),
-            prefix: 'M'
-        });
-        addImportsDir(resolver.resolve('./runtime/composables'));
-        //
-        // 6. Expose runtime config
-        //
-        // Normalize builder option
-        const normalizedBuilder = typeof options.builder === 'boolean' ? {
-            enabled: options.builder
-        } :
-            options.builder || {
-                enabled: true
-            };
-        nuxt.options.runtimeConfig.public.mframeworkUi = {
-            theme: options.theme,
-            builder: normalizedBuilder
-        };
-        nuxt.options.tailwindcss = nuxt.options.tailwindcss || {};
-        nuxt.options.tailwindcss.configPath = resolver.resolve('./runtime/assets/config/tailwind.config.js');
-    }
-});