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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mframework/ui",
-  "version": "0.1.0-beta.2",
+  "version": "0.1.0-beta.3",
   "type": "module",
   "description": "Opiniated UI module for the M Framework.",
   "keywords": [
@@ -14,8 +14,7 @@
   "main": "dist/module.js",
   "module": "dist/module.mjs",
   "files": [
-    "dist",
-    "src"
+    "dist"
   ],
   "scripts": {
     "build": "tsc -p tsconfig.json",

package/src/module.ts

@@ -1,105 +0,0 @@
-import {
-  defineNuxtModule,
-  addPlugin,
-  createResolver,
-  addComponentsDir,
-  addImportsDir
-} from 'nuxt/kit'
-
-export interface MFrameworkUiOptions {
-  theme ? : 'light' | 'dark'
-  builder ? : boolean | {
-    enabled ? : boolean
-  }
-}
-
-export default defineNuxtModule < MFrameworkUiOptions > ({
-  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
-    }
-
-    // Safe assignment without TS errors
-    ;(nuxt.options as any).tailwindcss = (nuxt.options as any).tailwindcss || {}
-    ;(nuxt.options as any).tailwindcss.configPath = resolver.resolve(
-      './runtime/assets/config/tailwind.config.js'
-    )
-  }
-})

package/src/runtime/assets/config/tailwind.conifg.js

@@ -1,42 +0,0 @@
-/** @type {import('tailwindcss').Config} */
-export default {
-  content: [], // Nuxt will inject its own paths
-
-  theme: {
-    extend: {
-      colors: {
-        primary: 'var(--m-primary)',
-        secondary: 'var(--m-secondary)',
-        accent: 'var(--m-accent)',
-        muted: 'var(--m-muted)',
-        surface: 'var(--m-surface)',
-        border: 'var(--m-border)'
-      },
-
-      fontFamily: {
-        sans: ['Inter', 'system-ui', 'sans-serif'],
-        heading: ['Inter', 'system-ui', 'sans-serif']
-      },
-
-      borderRadius: {
-        sm: '4px',
-        DEFAULT: '8px',
-        lg: '12px',
-        xl: '16px'
-      },
-
-      spacing: {
-        '1/2': '50%',
-        'full': '100%'
-      },
-
-      boxShadow: {
-        soft: '0 2px 8px rgba(0,0,0,0.06)',
-        medium: '0 4px 16px rgba(0,0,0,0.08)',
-        strong: '0 8px 24px rgba(0,0,0,0.12)'
-      }
-    }
-  },
-
-  plugins: []
-}

package/src/runtime/components/Gallery.vue

@@ -1,66 +0,0 @@
-<template>
-    <lightgallery :settings="{ speed: 500, plugins: plugins }" :onInit="onInit" :onBeforeSlide="onBeforeSlide">
-        <a data-lg-size="1406-1390" class="gallery-item"
-            data-src="https://images.unsplash.com/photo-1581894158358-5ecd2c518883?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1406&q=80"
-            data-sub-html="<h4>Photo by - <a href='https://unsplash.com/@entrycube' >Diego Guzmán </a></h4> <p> Location - <a href='https://unsplash.com/s/photos/fushimi-inari-taisha-shrine-senbontorii%2C-68%E7%95%AA%E5%9C%B0-fukakusa-yabunouchicho%2C-fushimi-ward%2C-kyoto%2C-japan'>Fushimi Ward, Kyoto, Japan</a></p>">
-            <img class="img-responsive"
-                src="https://images.unsplash.com/photo-1581894158358-5ecd2c518883?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=240&q=80" />
-        </a>
-        <a data-lg-size="1400-1400" class="gallery-item"
-            data-src="https://images.unsplash.com/photo-1544550285-f813152fb2fd?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1400&q=80"
-            data-sub-html="<h4>Photo by - <a href='https://unsplash.com/@asoshiation' >Shah </a></h4><p> Location - <a href='https://unsplash.com/s/photos/shinimamiya%2C-osaka%2C-japan'>Shinimamiya, Osaka, Japan</a></p>">
-            <img class="img-responsive"
-                src="https://images.unsplash.com/photo-1544550285-f813152fb2fd?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=240&q=80" />
-        </a>
-        <a data-lg-size="1400-1400" class="gallery-item"
-            data-src="https://images.unsplash.com/photo-1584592740039-cddf0671f3d4?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1400&q=80"
-            data-sub-html="<h4>Photo by - <a href='https://unsplash.com/@katherine_xx11' >Katherine Gu </a></h4><p> For all those years we were alone and helpless.</p>">
-            <img style="width: 200px" class="img-responsive"
-                src="https://images.unsplash.com/photo-1584592740039-cddf0671f3d4?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=240&q=80" />
-        </a>
-        <a class="gallery-item"
-            data-video='{"source": [{"src":"https://www.lightgalleryjs.com/videos/video1.mp4", "type":"video/mp4"}], "attributes": {"preload": false, "controls": true}}'
-            data-poster=""
-            data-sub-html="<h4>Photo by - <a href='https://unsplash.com/@katherine_xx11' >Katherine Gu </a></h4><p> For all those years we were alone and helpless.</p>">
-            <img width="200" class="img-responsive"
-                src="https://www.lightgalleryjs.com/images/demo/html5-video-poster.jpg" />
-        </a>
-    </lightgallery>
-</template>
-
-<script>
-    import Lightgallery from 'lightgallery/vue';
-    import lgZoom from 'lightgallery/plugins/zoom';
-    import lgVideo from 'lightgallery/plugins/video';
-
-    export default {
-        name: 'App',
-        components: {
-            Lightgallery,
-        },
-        data: () => ({
-            plugins: [lgZoom, lgVideo],
-        }),
-        methods: {
-            onInit: () => {
-                console.log('lightGallery has been initialized');
-            },
-            onBeforeSlide: () => {
-                console.log('calling before slide');
-            },
-        },
-    };
-</script>
-<style lang="css">
-    @import url('https://cdn.jsdelivr.net/npm/lightgallery@2.0.0-beta.4/css/lightgallery.css');
-    @import url('https://cdn.jsdelivr.net/npm/lightgallery@2.0.0-beta.4/css/lg-zoom.css');
-    @import url('https://cdn.jsdelivr.net/npm/lightgallery@2.0.0-beta.4/css/lg-video.css');
-
-    body {
-        margin: 0;
-    }
-
-    .gallery-item {
-        margin: 5px;
-    }
-</style>

package/src/runtime/components/MButton.vue

@@ -1,17 +0,0 @@
-<template>
-    <v-btn :color="color" class="m-btn" v-bind="$attrs">
-        <slot />
-    </v-btn>
-</template>
-
-<script setup lang="ts">
-    defineProps < {
-        color ? : string
-    } > ()
-</script>
-
-<style scoped>
-    .m-btn {
-        @apply px-4 py-2 rounded-md;
-    }
-</style>

package/src/runtime/composables/useMToast.ts

@@ -1,14 +0,0 @@
-import iziToast from 'izitoast'
-import 'izitoast/dist/css/iziToast.min.css'
-
-export const useMToast = () => {
-  const success = (message: string, title = 'Success') => {
-    iziToast.success({ title, message })
-  }
-
-  const error = (message: string, title = 'Error') => {
-    iziToast.error({ title, message })
-  }
-
-  return { success, error }
-}

package/src/runtime/design/tokens.ts

@@ -1,22 +0,0 @@
-export const tokens = {
-  colors: {
-    primary: '#4f46e5',
-    secondary: '#64748b',
-    success: '#22c55e',
-    warning: '#f59e0b',
-    error: '#ef4444',
-    surface: '#ffffff',
-    background: '#f8fafc'
-  },
-  radius: {
-    sm: '4px',
-    md: '8px',
-    lg: '12px'
-  },
-  spacing: {
-    xs: '4px',
-    sm: '8px',
-    md: '16px',
-    lg: '24px'
-  }
-}

package/src/runtime/plugins/builder.ts

@@ -1,326 +0,0 @@
-import {
-  defineNuxtPlugin
-} from 'nuxt/app'
-import 'grapesjs/dist/css/grapes.min.css'
-import grapesjs from 'grapesjs'
-
-export default defineNuxtPlugin((nuxtApp) => {
-  if (process.server) return
-
-  const mount = () => {
-    const el = document.querySelector('#gjs')
-    if (!el) return null
-
-    const editor = grapesjs.init({
-      container: `${el}`,
-      fromElement: true,
-      height: '100%',
-      width: 'auto',
-      storageManager: {
-        type: 'local',
-        autosave: true,
-        autoload: true,
-        stepsBeforeSave: 1,
-        options: {
-          local: {
-            key: 'gjsProject'
-          }
-        }
-      },
-
-      // Avoid any default panel
-      layerManager: {
-        appendTo: '.layers-container',
-      },
-
-      mediaCondition: 'min-width', // default is `max-width`
-      deviceManager: {
-        devices: [{
-            name: 'Desktop',
-            width: '', // default size
-            widthMedia: '1024px', // this value will be used in CSS @media
-          },
-          {
-            name: 'Mobile',
-            width: '320px', // this value will be used on canvas width
-            widthMedia: '480px', // this value will be used in CSS @media
-          },
-        ],
-      },
-
-      blockManager: {
-        appendTo: '#blocks',
-        blocks: [{
-            id: 'section', // id is mandatory
-            label: '<b>Section</b>', // You can use HTML/SVG inside labels
-            category: 'Basic',
-            attributes: {
-              class: 'gjs-block-section'
-            },
-            content: {
-              tagName: 'div',
-              draggable: false,
-              attributes: {
-                'some-attribute': 'some-value'
-              },
-              components: [{
-                  tagName: 'span',
-                  content: '<b>Some static content</b>',
-                },
-                {
-                  tagName: 'div',
-                  // use `content` for static strings, `components` string will be parsed
-                  // and transformed in Components
-                  components: '<span>HTML at some point</span>',
-                },
-              ],
-            },
-          },
-          {
-            id: 'text',
-            label: 'Text',
-            content: '<div data-gjs-type="text">Insert your text here</div>',
-          },
-          {
-            id: 'image',
-            label: 'Image',
-            // Select the component once it's dropped
-            select: true,
-            // You can pass components as a JSON instead of a simple HTML string,
-            // in this case we also use a defined component type `image`
-            content: {
-              type: 'image'
-            },
-            // This triggers `active` event on dropped components and the `image`
-            // reacts by opening the AssetManager
-            activate: true,
-          },
-        ],
-      },
-      panels: {
-        defaults: [{
-            id: 'layers',
-            el: '.panel__right',
-            // Make the panel resizable
-            resizable: {
-              maxDim: 350,
-              minDim: 200,
-              tc: false, // Top handler
-              cl: true, // Left handler
-              cr: false, // Right handler
-              bc: false, // Bottom handler
-              // Being a flex child we need to change `flex-basis` property
-              // instead of the `width` (default)
-              keyWidth: 'flex-basis',
-            },
-          },
-          {
-            id: 'panel-switcher',
-            el: '.panel__switcher',
-            buttons: [{
-                id: 'show-layers',
-                active: true,
-                label: 'Layers',
-                command: 'show-layers',
-                // Once activated disable the possibility to turn it off
-                togglable: false,
-              },
-              {
-                id: 'show-style',
-                active: true,
-                label: 'Styles',
-                command: 'show-styles',
-                togglable: false,
-              },
-              {
-                id: 'show-traits',
-                active: true,
-                label: 'Traits',
-                command: 'show-traits',
-                togglable: false,
-              },
-            ],
-          },
-          {
-            id: 'panel-devices',
-            el: '.panel__devices',
-            buttons: [{
-                id: 'device-desktop',
-                label: 'D',
-                command: 'set-device-desktop',
-                active: true,
-                togglable: false,
-              },
-              {
-                id: 'device-mobile',
-                label: 'M',
-                command: 'set-device-mobile',
-                togglable: false,
-              },
-            ],
-          },
-        ],
-      },
-      // The Selector Manager allows to assign classes and
-      // different states (eg. :hover) on components.
-      // Generally, it's used in conjunction with Style Manager
-      // but it's not mandatory
-      selectorManager: {
-        appendTo: '.styles-container',
-      },
-      styleManager: {
-        appendTo: '.styles-container',
-        sectors: [{
-            name: 'Dimension',
-            open: false,
-            // Use built-in properties
-            buildProps: ['width', 'min-height', 'padding'],
-            // Use `properties` to define/override single property
-            properties: [{
-              // Type of the input,
-              // options: integer | radio | select | color | slider | file | composite | stack
-              type: 'integer',
-              name: 'The width', // Label for the property
-              property: 'width', // CSS property (if buildProps contains it will be extended)
-              units: ['px', '%'], // Units, available only for 'integer' types
-              defaults: 'auto', // Default value
-              min: 0, // Min value, available only for 'integer' types
-            }, ],
-          },
-          {
-            name: 'Extra',
-            open: false,
-            buildProps: ['background-color', 'box-shadow', 'custom-prop'],
-            properties: [{
-              id: 'custom-prop',
-              name: 'Custom Label',
-              property: 'font-size',
-              type: 'select',
-              defaults: '32px',
-              // List of options, available only for 'select' and 'radio'  types
-              options: [{
-                  id: 'tiny',
-                  value: '12px',
-                  name: 'Tiny'
-                },
-                {
-                  id: 'medium',
-                  value: '18px',
-                  name: 'Medium'
-                },
-                {
-                  id: 'big',
-                  value: '32px',
-                  name: 'Big'
-                },
-              ],
-            }, ],
-          },
-        ],
-      },
-    });
-
-    // Define commands
-    editor.Commands.add('show-layers', {
-      getRowEl(editor: any) {
-        return editor.getContainer().closest('.editor-row');
-      },
-      getLayersEl(row: any) {
-        return row.querySelector('.layers-container');
-      },
-
-      run(editor: any, sender: any) {
-        const lmEl = this.getLayersEl(this.getRowEl(editor));
-        lmEl.style.display = '';
-      },
-      stop(editor: any, sender: any) {
-        const lmEl = this.getLayersEl(this.getRowEl(editor));
-        lmEl.style.display = 'none';
-      },
-    });
-    editor.Commands.add('show-styles', {
-      getRowEl(editor: any) {
-        return editor.getContainer().closest('.editor-row');
-      },
-      getStyleEl(row: any) {
-        return row.querySelector('.styles-container');
-      },
-
-      run(editor: any, sender: any) {
-        const smEl = this.getStyleEl(this.getRowEl(editor));
-        smEl.style.display = '';
-      },
-      stop(editor: any, sender: any) {
-        const smEl = this.getStyleEl(this.getRowEl(editor));
-        smEl.style.display = 'none';
-      },
-    });
-
-    editor.Commands.add('show-traits', {
-      getTraitsEl(editor: any) {
-        const row = editor.getContainer().closest('.editor-row');
-        return row.querySelector('.traits-container');
-      },
-      run(editor: any, sender: any) {
-        this.getTraitsEl(editor).style.display = '';
-      },
-      stop(editor: any, sender: any) {
-        this.getTraitsEl(editor).style.display = 'none';
-      },
-    });
-
-    editor.Panels.addPanel({
-      id: 'panel-top',
-      el: '.panel__top',
-    });
-    editor.Panels.addPanel({
-      id: 'basic-actions',
-      el: '.panel__basic-actions',
-      buttons: [{
-          id: 'visibility',
-          active: true, // active by default
-          className: 'btn-toggle-borders',
-          label: '<u>B</u>',
-          command: 'sw-visibility', // Built-in command
-        },
-        {
-          id: 'export',
-          className: 'btn-open-export',
-          label: 'Exp',
-          command: 'export-template',
-          context: 'export-template', // For grouping context of buttons from the same panel
-        },
-        {
-          id: 'show-json',
-          className: 'btn-show-json',
-          label: 'JSON',
-          context: 'show-json',
-          command(editor: any) {
-            editor.Modal.setTitle('Components JSON')
-              .setContent(
-                `<textarea style="width:100%; height: 250px;">
-            ${JSON.stringify(editor.getComponents())}
-          </textarea>`,
-              )
-              .open();
-          },
-        },
-      ],
-    });
-    editor.Commands.add('set-device-desktop', {
-      run: (editor) => editor.setDevice('Desktop'),
-    });
-    editor.Commands.add('set-device-mobile', {
-      run: (editor) => editor.setDevice('Mobile'),
-    });
-    editor.on('change:device', () => console.log('Current device: ', editor.getDevice()));
-    // Set initial device as Mobile
-    editor.setDevice('Mobile');
-
-    nuxtApp.provide('grapesStudio', editor)
-    return editor
-  }
-
-  // Auto‑mount when page loads
-  window.addEventListener('DOMContentLoaded', mount)
-})

package/src/runtime/plugins/fontawesome.ts

@@ -1,11 +0,0 @@
-import { defineNuxtPlugin } from 'nuxt/app'
-import { library } from '@fortawesome/fontawesome-svg-core'
-import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
-import { fas } from '@fortawesome/free-solid-svg-icons'
-import '@fortawesome/fontawesome-free/css/all.min.css'
-
-export default defineNuxtPlugin((nuxtApp) => {
-  library.add(fas)
-
-  nuxtApp.vueApp.component('Fa', FontAwesomeIcon)
-})

package/src/runtime/plugins/formkit.ts

@@ -1,9 +0,0 @@
-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({
-    // You can inject your own inputs, locales, etc. here
-  }))
-})

package/src/runtime/plugins/lightgallery.js

@@ -1,21 +0,0 @@
-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.
-  document.querySelectorAll('.lightgallery').forEach((element) => {
-    lightGallery(element as HTMLElement, {
-      plugins: [lgZoom, lgVideo, lgThumbnail],
-      speed: 500,
-    })
-  })
-})

package/src/runtime/plugins/motion.ts

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

package/src/runtime/plugins/theme-switcher.ts

@@ -1,32 +0,0 @@
-import { defineNuxtPlugin } from 'nuxt/app'
-import { useTheme } from 'vuetify'
-
-export default defineNuxtPlugin((nuxtApp) => {
-  if (process.server) return
-
-  const theme = useTheme()
-
-  const setTheme = (mode: 'light' | 'dark') => {
-    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
-  })
-})

package/src/runtime/plugins/theme.ts

@@ -1,57 +0,0 @@
-import {
-  defineNuxtPlugin,
-  useRuntimeConfig
-} from 'nuxt/app'
-import {
-  useTheme
-} from 'vuetify'
-
-export default defineNuxtPlugin(() => {
-  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/src/runtime/plugins/vuetify.ts

@@ -1,36 +0,0 @@
-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'
-          }
-        }
-      }
-    }
-  })
-
-  nuxtApp.vueApp.use(vuetify)
-})

package/src/runtime/search/client.ts

@@ -1,25 +0,0 @@
-import type { SearchClient } from 'instantsearch.js'
-
-export function getSearchClient(): SearchClient | null {
-  let mod: any
-  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/src/runtime/search/components/MSearch.vue

@@ -1,19 +0,0 @@
-<template>
-  <ais-instant-search :search-client="client" :index-name="index">
-    <ais-search-box />
-    <ais-hits>
-      <template #item="{ item }">
-        <slot name="hit" :item="item">
-          <div class="p-2 border rounded">
-            <ais-highlight attribute="title" :hit="item" />
-          </div>
-        </slot>
-      </template>
-    </ais-hits>
-  </ais-instant-search>
-</template>
-
-<script setup lang="ts">
-const client = inject('mSearchClient')
-const index = inject('mSearchIndex')
-</script>

package/src/runtime/search/plugin.ts

@@ -1,9 +0,0 @@
-import { getSearchClient } from './client'
-
-export default (nuxtApp: any) => {
-  const client = getSearchClient()
-  const indexName = process.env.NUXT_PUBLIC_SEARCH_INDEX || 'default'
-
-  nuxtApp.provide('mSearchClient', client)
-  nuxtApp.provide('mSearchIndex', indexName)
-}

package/src/runtime/styles/index.scss

@@ -1,101 +0,0 @@
-@import './tailwind.css';
-
-// Your design tokens, utilities, etc.
-: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;
-}
-
-// GrapesJS canvas and editor styling
-/* 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/src/runtime/styles/tailwind.css

@@ -1,9 +0,0 @@
-/* @mframework/ui/runtime/assets/css/tailwind.css */
-
-/* Tailwind base (if using Tailwind 3 style) */
-@import "tailwindcss/preflight";
-
-/* Vuetify + Tailwind coexistence tips:
-   - Avoid global resets that fight Vuetify
-   - Prefer utility classes for layout, spacing, etc.
-*/

package/src/runtime/styles/vuetify.scss

@@ -1,5 +0,0 @@
-// Override Vuetify variables or add global Vuetify-related styles here.
-
-body {
-  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
-}

package/src/types/runtime-config.d.ts

@@ -1,12 +0,0 @@
-declare module 'nuxt/schema' {
-  interface PublicRuntimeConfig {
-    mframeworkUi?: {
-      theme?: 'light' | 'dark'
-      builder?: {
-        enabled?: boolean
-      }
-    }
-  }
-}
-
-export {}

package/src/utils/color.js

@@ -1,11 +0,0 @@
-function getContrastColor(hexColor) {
-    // Convert hex color to RGB format
-    const red = parseInt(hexColor.slice(1, 3), 16);
-    const green = parseInt(hexColor.slice(3, 5), 16);
-    const blue = parseInt(hexColor.slice(5, 7), 16);
-    // Calculate relative luminance of the color
-    const luminance = (0.2126 * red + 0.7152 * green + 0.0722 * blue) / 255;
-    // Return black or white depending on the luminance value
-    return luminance > 0.5 ? '#000000' : '#ffffff';
-}
-export { getContrastColor };

package/src/utils/color.ts

@@ -1,14 +0,0 @@
-function getContrastColor(hexColor: string) {
-	// Convert hex color to RGB format
-	const red = parseInt(hexColor.slice(1, 3), 16);
-	const green = parseInt(hexColor.slice(3, 5), 16);
-	const blue = parseInt(hexColor.slice(5, 7), 16);
-
-	// Calculate relative luminance of the color
-	const luminance = (0.2126 * red + 0.7152 * green + 0.0722 * blue) / 255;
-
-	// Return black or white depending on the luminance value
-	return luminance > 0.5 ? '#000000' : '#ffffff';
-}
-
-export { getContrastColor };

package/src/utils/fonts.js

@@ -1,18 +0,0 @@
-export const formatFonts = (families, defaultWeights = [400]) => {
-    const formatted = [];
-    for (const font in families) {
-        const formattedFont = font.replace(/ /g, '+'); // Replace spaces with '+'
-        const weights = families[font];
-        if (weights === true) {
-            for (const weight of defaultWeights) {
-                formatted.push(`${formattedFont}:${weight}`);
-            }
-        }
-        else if (Array.isArray(weights)) {
-            for (const weight of weights) {
-                formatted.push(`${formattedFont}:${weight}`);
-            }
-        }
-    }
-    return formatted;
-};

package/src/utils/fonts.ts

@@ -1,24 +0,0 @@
-type FontFamilies = {
-	[font: string]: boolean | number[];
-};
-
-export const formatFonts = (families: FontFamilies, defaultWeights: number[] = [400]): string[] => {
-	const formatted: string[] = [];
-
-	for (const font in families) {
-		const formattedFont = font.replace(/ /g, '+'); // Replace spaces with '+'
-		const weights = families[font];
-
-		if (weights === true) {
-			for (const weight of defaultWeights) {
-				formatted.push(`${formattedFont}:${weight}`);
-			}
-		} else if (Array.isArray(weights)) {
-			for (const weight of weights) {
-				formatted.push(`${formattedFont}:${weight}`);
-			}
-		}
-	}
-
-	return formatted;
-};

package/src/utils/formkit.js

@@ -1,59 +0,0 @@
-import { unref } from 'vue';
-function convertBoolean(value) {
-    if (value === 'true' || value === 'false') {
-        return value === 'true';
-    }
-    else {
-        return value;
-    }
-}
-function mapCondition(condition, target) {
-    switch (condition) {
-        case 'is_empty':
-            return `!$get(${target}).value)`;
-        case 'is_filled':
-            return `$get(${target}).value)`;
-        default:
-            return undefined;
-    }
-}
-export function mapConditions(conditions) {
-    // Both $el and $cmp schema nodes can leverage an if property that roughly equates to a v-if in Vue. If the expression assigned to the if property is truthy, the node is rendered, otherwise it is not:
-}
-export function transformSchema(schema) {
-    // Loop through the form schema from Directus
-    // This is required for FormKit to work
-    const items = unref(schema);
-    return items.map((item) => {
-        const { conditions, field, name, children, ...props } = item;
-        // console.log('conditions', conditions);
-        // console.log('mapCondition', mapCondition(conditions[0].condition, field));
-        const cmpSchema = {
-            $cmp: item.$el ? item.$el : 'FormKit',
-            children: children,
-            // if: conditions ? mapCondition(conditions[0].condition, field) : undefined,
-            props: {
-                id: name,
-                ...props,
-            },
-        };
-        // Switch statement to handle item widths
-        switch (item.width) {
-            case '33':
-                cmpSchema.props.outerClass = 'md:col-span-2';
-                break;
-            case '50':
-                cmpSchema.props.outerClass = 'md:col-span-3';
-                break;
-            case '67':
-                cmpSchema.props.outerClass = 'md:col-span-4';
-                break;
-            case '100':
-                cmpSchema.props.outerClass = 'md:col-span-6';
-                break;
-            default:
-                cmpSchema.props.outerClass = 'md:col-span-6';
-        }
-        return cmpSchema;
-    });
-}

package/src/utils/formkit.ts

@@ -1,75 +0,0 @@
-import { unref } from 'vue';
-
-export interface Condition {
-	field: string;
-	action: 'show' | 'hide';
-	condition: 'is_empty' | 'is_filled' | 'contains' | 'not_contains' | 'equals' | 'not_equal';
-	value: string;
-}
-
-function convertBoolean(value: string) {
-	if (value === 'true' || value === 'false') {
-		return value === 'true';
-	} else {
-		return value;
-	}
-}
-
-function mapCondition(condition: Condition['condition'], target: string) {
-	switch (condition) {
-		case 'is_empty':
-			return `!$get(${target}).value)`;
-		case 'is_filled':
-			return `$get(${target}).value)`;
-		default:
-			return undefined;
-	}
-}
-
-export function mapConditions(conditions: Condition[]) {
-	// Both $el and $cmp schema nodes can leverage an if property that roughly equates to a v-if in Vue. If the expression assigned to the if property is truthy, the node is rendered, otherwise it is not:
-}
-
-export function transformSchema(schema: Array<object>) {
-	// Loop through the form schema from Directus
-	// This is required for FormKit to work
-	const items = unref(schema);
-	return items.map((item: any) => {
-		const { conditions, field, name, children, ...props } = item;
-
-		// console.log('conditions', conditions);
-		// console.log('mapCondition', mapCondition(conditions[0].condition, field));
-
-		const cmpSchema = {
-			$cmp: item.$el ? item.$el : 'FormKit',
-
-			children: children,
-			// if: conditions ? mapCondition(conditions[0].condition, field) : undefined,
-
-			props: {
-				id: name,
-				...props,
-			},
-		};
-
-		// Switch statement to handle item widths
-		switch (item.width) {
-			case '33':
-				cmpSchema.props.outerClass = 'md:col-span-2';
-				break;
-			case '50':
-				cmpSchema.props.outerClass = 'md:col-span-3';
-				break;
-			case '67':
-				cmpSchema.props.outerClass = 'md:col-span-4';
-				break;
-			case '100':
-				cmpSchema.props.outerClass = 'md:col-span-6';
-				break;
-			default:
-				cmpSchema.props.outerClass = 'md:col-span-6';
-		}
-
-		return cmpSchema;
-	});
-}

package/src/utils/icons.js

@@ -1,36 +0,0 @@
-export const fileIconMap = {
-    folder: 'material-symbols:folder',
-    // Images
-    'image/jpeg': 'material-symbols:image',
-    'image/png': 'material-symbols:image',
-    'image/gif': 'material-symbols:image',
-    'image/svg+xml': 'material-symbols:image',
-    'image/webp': 'material-symbols:image',
-    // Videos
-    'video/mp4': 'material-symbols:smart-display',
-    'video/quicktime': 'material-symbols:smart-display',
-    // Audio
-    'audio/mp3': 'material-symbols:audio-file',
-    'audio/aac': 'material-symbols:audio-file',
-    'audio/wav': 'material-symbols:audio-file',
-    'audio/ogg': 'material-symbols:audio-file',
-    // Text
-    'text/csv': 'material-symbols:csv',
-    'text/plain': 'material-symbols:text-snippet',
-    // Files
-    'application/pdf': 'material-symbols:picture-as-pdf-sharp',
-    'application/vnd.ms-excel': 'material-symbols:sheets',
-    'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet': 'material-symbols:sheets',
-    'application/msword': 'material-symbols:docs',
-    'application/vnd.openxmlformats-officedocument.wordprocessingml.document': 'material-symbols:docs',
-    'application/vnd.ms-powerpoint': 'material-symbols:slides',
-    'application/vnd.openxmlformats-officedocument.presentationml.presentation': 'material-symbols:slides',
-};
-export function getFileIcon(filetype) {
-    if (!filetype)
-        return 'material-symbols:attachment';
-    if (typeof filetype === 'string' && !(filetype in fileIconMap)) {
-        return 'material-symbols:attachment';
-    }
-    return fileIconMap[filetype];
-}

package/src/utils/icons.ts

@@ -1,62 +0,0 @@
-type FileType =
-	| 'folder'
-	| 'image/jpeg'
-	| 'image/png'
-	| 'image/gif'
-	| 'image/svg+xml'
-	| 'image/webp'
-	| 'video/mp4'
-	| 'video/quicktime'
-	| 'audio/mp3'
-	| 'audio/aac'
-	| 'audio/wav'
-	| 'audio/ogg'
-	| 'text/csv'
-	| 'text/plain'
-	| 'application/pdf'
-	| 'application/vnd.ms-excel'
-	| 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
-	| 'application/msword'
-	| 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'
-	| 'application/vnd.ms-powerpoint'
-	| 'application/vnd.openxmlformats-officedocument.presentationml.presentation';
-
-export const fileIconMap: Record<FileType, string> = {
-	folder: 'material-symbols:folder',
-	// Images
-	'image/jpeg': 'material-symbols:image',
-	'image/png': 'material-symbols:image',
-	'image/gif': 'material-symbols:image',
-	'image/svg+xml': 'material-symbols:image',
-	'image/webp': 'material-symbols:image',
-	// Videos
-	'video/mp4': 'material-symbols:smart-display',
-	'video/quicktime': 'material-symbols:smart-display',
-	// Audio
-	'audio/mp3': 'material-symbols:audio-file',
-	'audio/aac': 'material-symbols:audio-file',
-	'audio/wav': 'material-symbols:audio-file',
-	'audio/ogg': 'material-symbols:audio-file',
-	// Text
-	'text/csv': 'material-symbols:csv',
-	'text/plain': 'material-symbols:text-snippet',
-
-	// Files
-	'application/pdf': 'material-symbols:picture-as-pdf-sharp',
-	'application/vnd.ms-excel': 'material-symbols:sheets',
-	'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet': 'material-symbols:sheets',
-	'application/msword': 'material-symbols:docs',
-	'application/vnd.openxmlformats-officedocument.wordprocessingml.document': 'material-symbols:docs',
-	'application/vnd.ms-powerpoint': 'material-symbols:slides',
-	'application/vnd.openxmlformats-officedocument.presentationml.presentation': 'material-symbols:slides',
-};
-
-export function getFileIcon(filetype: FileType | string | null | undefined) {
-	if (!filetype) return 'material-symbols:attachment';
-
-	if (typeof filetype === 'string' && !(filetype in fileIconMap)) {
-		return 'material-symbols:attachment';
-	}
-
-	return fileIconMap[filetype as FileType];
-}