npm - @raclettejs/core - Versions diffs - 0.1.23 → 0.1.25 - Mend

@raclettejs/core 0.1.23 → 0.1.25

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (102) hide show

package/services/frontend/.yarn/install-state.gz CHANGED Viewed

Binary file

package/services/frontend/eslint.config.js CHANGED Viewed

@@ -6,6 +6,15 @@ import globals from "globals"
 export default [
   ...parentConfig,
+  {
+    files: ["**/*.{ts,tsx}"],
+    languageOptions: {
+      parserOptions: {
+        project: "./tsconfig.app.json",
+      },
+    },
+  },
   // Vue config
   ...pluginVue.configs["flat/recommended"],
   {

package/services/frontend/index.html CHANGED Viewed

@@ -1,5 +1,5 @@
 <!doctype html>
-<html class="tw:overscroll-none">
+<html class="tw:h-full tw:overscroll-none tw:overflow-hidden">
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" href="/favicon.png" />
@@ -11,8 +11,8 @@
     </script>
   </head>
-  <body class="tw:overscroll-none">
-    <div id="app"></div>
+  <body class="tw:h-full tw:overscroll-none tw:overflow-hidden">
+    <div id="app" class="tw:h-full"></div>
     <script type="module" src="/src/orchestrator/index.ts"></script>
   </body>
 </html>

package/services/frontend/package.json CHANGED Viewed

@@ -18,44 +18,46 @@
   "dependencies": {
     "@date-io/date-fns": "3.2.1",
     "@mdi/font": "7.4.47",
-    "@sinclair/typebox": "0.34.41",
-    "@tailwindcss/vite": "4.1.13",
-    "@tsconfig/node20": "20.1.6",
-    "@vueuse/core": "14.1.0",
-    "@vueuse/rxjs": "14.1.0",
-    "axios": "1.13.2",
+    "@sinclair/typebox": "0.34.48",
+    "@tailwindcss/vite": "4.2.2",
+    "@tsconfig/node20": "20.1.9",
+    "@vueuse/core": "14.2.1",
+    "@vueuse/rxjs": "14.2.1",
+    "axios": "1.13.6",
     "date-fns": "4.1.0",
-    "esm": "3.x",
+    "esm": "^3.2.25",
     "interactjs": "1.10.27",
     "mini-rx-store": "6.1.2",
-    "nanoid": "5.1.5",
-    "ramda": "0.31.3",
-    "rxjs": "7.x",
-    "sass": "1.92.1",
-    "socket.io-client": "4.x",
-    "tailwindcss": "4.1.13",
+    "nanoid": "5.1.7",
+    "ramda": "0.32.0",
+    "rxjs": "7.8.2",
+    "sass": "1.98.0",
+    "socket.io-client": "^4.8.3",
+    "tailwindcss": "4.2.2",
     "uuid": "13.0.0",
-    "vue": "3.5.25",
-    "vue-i18n": "11.2.2",
+    "vue": "3.5.30",
+    "vue-i18n": "11.3.0",
     "vue-router": "4.6.3",
-    "vuetify": "3.11.2"
+    "vuetify": "4.0.5"
   },
   "devDependencies": {
     "@types/node": "24.5.1",
     "@types/ramda": "0.31.1",
-    "@vitejs/plugin-vue": "6.0.1",
-    "@vue/tsconfig": "0.8.1",
+    "@vitejs/plugin-vue": "6.0.5",
+    "@vue/tsconfig": "0.9.0",
     "eslint": "9.35.0",
-    "eslint-config-prettier": "10.1.8",
+    "@eslint/js": "9.35.0",
+    "eslint-config-prettier": "9.1.2",
     "eslint-plugin-import": "2.32.0",
-    "eslint-plugin-prefer-arrow-functions": "3.8.1",
-    "eslint-plugin-tailwindcss": "4.0.0-beta.0",
-    "eslint-plugin-vue": "10.4.0",
-    "globals": "16.4.0",
-    "prettier": "3.6.2",
-    "typescript": "5.9.2",
+    "eslint-plugin-prefer-arrow-functions": "3.9.1",
+    "eslint-plugin-tailwindcss": "3.18.2",
+    "eslint-plugin-vue": "9.33.0",
+    "globals": "17.4.0",
+    "prettier": "3.8.1",
+    "typescript": "5.9.3",
     "vite": "7.1.5",
-    "vue-eslint-parser": "10.2.0",
-    "vue-tsc": "3.0.7"
+    "vite-plugin-vuetify": "2.1.3",
+    "vue-eslint-parser": "9.4.3",
+    "vue-tsc": "3.2.6"
   }
-}
+}

package/services/frontend/src/core/setup/plugin-system/discovery/app-plugins.ts CHANGED Viewed

@@ -3,6 +3,45 @@ import logger from "@racletteCore/lib/logger"
 import { validatePluginMetadata } from "../utils/operations"
 import type { DiscoveredPlugin, PluginType } from "../types"
+/** Keys are known at build time; covers both `…/frontend/` and `…/src/frontend/`. */
+const appPluginFrontendIndexKeys = new Set(
+  Object.keys(
+    import.meta.glob(
+      [
+        "/src/plugins/**/frontend/index.ts",
+        "/src/workbenchPlugins/**/frontend/index.ts",
+      ],
+      { eager: false },
+    ),
+  ),
+)
+function resolveAppPluginFrontendPath(
+  pluginPath: string,
+  metadata: { frontendDir?: string },
+): string {
+  const explicit = metadata.frontendDir?.replace(/^\.\//, "")
+  if (explicit) {
+    return `${pluginPath}/${explicit}`
+  }
+  const direct = `${pluginPath}/frontend`
+  const underSrc = `${pluginPath}/src/frontend`
+  const directIndex = `${direct}/index.ts`
+  const srcIndex = `${underSrc}/index.ts`
+  const hasDirect = appPluginFrontendIndexKeys.has(directIndex)
+  const hasUnderSrc = appPluginFrontendIndexKeys.has(srcIndex)
+  if (hasDirect && hasUnderSrc) {
+    return direct
+  }
+  if (hasUnderSrc) {
+    return underSrc
+  }
+  return direct
+}
 /**
  * Discover app/user plugins using static glob pattern with exclusions
  */
@@ -22,7 +61,9 @@ export const discoverAppPlugins = async (): Promise<DiscoveredPlugin[]> => {
     for (const configPath of Object.keys(configModules)) {
       try {
-        const configModule = await configModules[configPath]()
+        const loadConfig = configModules[configPath]
+        if (!loadConfig) continue
+        const configModule = await loadConfig()
         const metadata = (configModule as any)?.default || configModule
         if (!validatePluginMetadata(metadata)) {
@@ -31,9 +72,7 @@ export const discoverAppPlugins = async (): Promise<DiscoveredPlugin[]> => {
         }
         const pluginPath = configPath.replace(/\/raclette\.plugin\.ts$/, "")
-        const frontendRelativePath =
-          metadata.frontendDir?.replace(/^\.\//, "") || "frontend"
-        const frontendPath = `${pluginPath}/${frontendRelativePath}`
+        const frontendPath = resolveAppPluginFrontendPath(pluginPath, metadata)
         const pluginKey = generatePluginKey(metadata.name, metadata.author)

package/services/frontend/src/orchestrator/ProductOrchestrator.vue CHANGED Viewed

@@ -62,7 +62,10 @@
     />
     <!-- Main content -->
-    <v-main class="tw:flex tw:flex-col" id="appMainContent">
+    <v-main
+      class="tw:flex tw:flex-col tw:min-h-0 tw:overflow-y-auto tw:h-screen"
+      id="appMainContent"
+    >
       <div class="tw:w-full tw-h-1 tw:top-[49px]">
         <v-progress-linear
           :height="2"
@@ -76,13 +79,11 @@
       <template v-else>
         <WidgetsLayoutLoader
           v-if="widgetsLayout"
-          class="tw:overflow-y-auto! tw:pb-0"
+          class="tw:min-h-0 tw:pb-0"
           :class="{ '!tw:invisible': loading }"
           :widgets-layout="widgetsLayout"
           slot-type="page"
           :slot-layout="slotLayout"
-          @scroll.passive="onScroll($event)"
-          :max-height="availableComponentHeight"
         />
         <v-empty-state
@@ -104,7 +105,7 @@
         ref="appFooter"
         border-thin
         v-if="configService.getPleaseLetUsAdvertiseOurselves()"
-        class="tw:items-center tw:text-center tw:flex tw:flex-col tw:border-t-1 tw:grow-0! tw:mt-auto"
+        class="tw:items-center tw:text-center tw:flex tw:flex-col tw:border-t tw:grow-0! tw:mt-auto"
       >
         <a
           href="https://www.raclettejs.com"
@@ -174,8 +175,10 @@ const appFooterRef = useTemplateRef("appFooter")
 const availableComponentHeight = ref(0)
 const updateAvailableHeight = () => {
-  const appbarHeight = appAppbarRef.value?.offsetHeight || 0
-  const appFooterHeight = appFooterRef.value?.offsetHeight || 0
+  const appbarHeight =
+    (appAppbarRef.value?.$el as HTMLElement | undefined)?.offsetHeight || 0
+  const appFooterHeight =
+    (appFooterRef.value?.$el as HTMLElement | undefined)?.offsetHeight || 0
   const progressBarHeight = 2 // Progress bar height
   const borderAndPadding = 8 // Border and padding buffer
   availableComponentHeight.value =
@@ -239,7 +242,6 @@ const checkImageExists = async (url: string): Promise<boolean> => {
   }
 }
-const showScrollToTopBtn = ref(false)
 const isDevelopment = ref(false)
 const setTheme = (theme: "dark" | "light") => {
@@ -253,9 +255,6 @@ const setTheme = (theme: "dark" | "light") => {
   }
 }
-const onScroll = (e) =>
-  (showScrollToTopBtn.value = e.currentTarget.scrollTop > 0)
 onMounted(async () => {
   setTheme(theme.value)
   vuetifyLocale.current.value = locale.value

package/services/frontend/src/orchestrator/assets/styles/layers.css ADDED Viewed

@@ -0,0 +1,11 @@
+@layer tailwind-theme;
+@layer tailwind-reset;
+@layer vuetify-core;
+@layer vuetify-components;
+@layer vuetify-overrides;
+@layer vuetify-utilities;
+@layer tailwind-utilities;
+@layer vuetify-final;

package/services/frontend/src/orchestrator/assets/styles/tailwindStyles.css CHANGED Viewed

@@ -1,18 +1,12 @@
 @source "../../../../index.html";
 @source "/**/*.{vue,js,ts,jsx,tsx,html}";
-/* vite aliase? */
-/* @source "@racletteOrchestrator" */
-@import "tailwindcss" prefix(tw);
+@import "tailwindcss/theme" layer(tailwind-theme) prefix(tw);
+@import "tailwindcss/preflight" layer(tailwind-reset) prefix(tw);
+@import "tailwindcss/utilities" layer(tailwind-utilities) prefix(tw);
-/* The commented code below allows to granually import tailwind */
-/* @layer theme, base, components, utilities; */
-/* @import "tailwindcss/theme.css" layer(theme) prefix(tw); */
-/* @import "tailwindcss/preflight.css" layer(base) prefix(tw); */
-/* @import "tailwindcss/utilities.css" layer(utilities) prefix(tw);  */
-/* enable dark mode via class */
-@custom-variant dark (&:where(.dark, .dark *));
+@custom-variant light (&:where(.v-theme--light, .v-theme--light *));
+@custom-variant dark (&:where(.v-theme--dark, .v-theme--dark *));
 /* safelist for the resizing in the composition editor */
 @source inline('tw:col-span-{1..12}');

package/services/frontend/src/orchestrator/assets/styles/vuetifyStyles.scss CHANGED Viewed

@@ -1,7 +1,3 @@
-@use "vuetify" with (
-  $utilities: false,
-  $reset: false
-);
 @use "@mdi/font/css/materialdesignicons.css";
 // The styles below are picked from vuetify's reset css (which is disabled)

package/services/frontend/src/orchestrator/components/composition/WidgetsLayoutLoader.vue CHANGED Viewed

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="tw:h-full tw:max-w-full tw:bg-gray-50 tw:dark:bg-[#252525]"
+    class="tw:max-w-full tw:bg-gray-50 tw:dark:bg-[#252525] tw:min-h-fit"
     :class="{
       'tw:p-4':
         slotLayout !== 'default' &&
@@ -30,7 +30,7 @@
         >
           <v-row
             :no-gutters="slotLayout === 'default' || slotLayout === 'full'"
-            :class="{ 'tw:h-full': slotLayout === 'full', ...rowClasses }"
+            :class="[{ 'tw:h-full': slotLayout === 'full' }, rowClasses]"
           >
             <TransitionGroup
               name="grid-item"
@@ -44,17 +44,12 @@
                 :cols="getSlotCols(slot)"
                 :style="{
                   'transition-delay': `${slotIndex * 50}ms`,
-                  'max-height': `${maxWidgetHeight}px`,
                   ...(slotLayout === 'default' || slotLayout === 'full'
                     ? { padding: '0px' }
                     : {}),
                 }"
               >
-                <div
-                  :class="widgetContainerClasses"
-                  class="tw:h-full"
-                  :style="{ 'max-height': `${maxWidgetHeight}px` }"
-                >
+                <div :class="widgetContainerClasses" class="tw:h-full">
                   <component
                     v-if="slot.widget"
                     :is="getSlotWidget(slot.widget)"
@@ -108,11 +103,8 @@ const props = withDefaults(
     widgetsLayout: Composition["widgetsLayout"]
     slotType: string
     slotLayout: string
-    maxHeight?: number
   }>(),
-  {
-    maxHeight: 0,
-  },
+  {},
 )
 const { compositionSlots } = useRouteState()
@@ -122,7 +114,7 @@ const currentRouteConfig = computed(() =>
 )
 const widgetContainerClasses = computed(() => {
-  const baseClasses = "tw:h-auto tw:overflow-auto"
+  const baseClasses = "tw:h-auto tw:overflow-visible"
   switch (props.slotLayout) {
     case "spaced":
@@ -165,11 +157,6 @@ const routeParams = computed(() => {
 // Create a reactive key that changes when widgetsLayout changes
 const gridKey = ref(0)
-// Calculate max height per widget based on grid layout
-const maxWidgetHeight = computed(() => {
-  return Math.min(props.maxHeight, 2400)
-})
 // Calculate total number of widgets
 const totalWidgets = computed(() => {
   return props.widgetsLayout.reduce((sum, column) => sum + column.length, 0)

package/services/frontend/src/orchestrator/composables/useWidgets/helperFunctions.ts CHANGED Viewed

@@ -5,7 +5,9 @@
 import { forEachObjIndexed } from "ramda"
 import type { ConfigurableParameters, WidgetConf } from "@racletteOrchestrator"
 import { generatePluginKey } from "@shared/helper/pluginHelper"
-import type { PluginMetadata, RegisteredWidgetDeclaration } from "@core"
+import type { PluginMetadata } from "@core"
+import type { RegisteredWidgetDeclaration, WidgetDeclaration } from "@racletteOrchestrator"
+import { normalizeWidgetVisuals } from "@racletteOrchestrator/helpers"
 // Plugin metadata files (unchanged)
 const RACLETTE_PLUGIN_FILES = import.meta.glob<{
@@ -14,6 +16,43 @@ const RACLETTE_PLUGIN_FILES = import.meta.glob<{
   eager: true,
 })
+const EXTERNAL_PLUGIN_FRONTEND_INDEX_KEYS = new Set(
+  Object.keys(
+    import.meta.glob(
+      "@racletteCore/../../external-app-plugins/**/frontend/index.ts",
+      {
+        eager: false,
+      },
+    ),
+  ),
+)
+function resolveExternalPluginFrontendPath(
+  pluginDir: string,
+  metadata: PluginMetadata,
+): string {
+  const explicit = metadata.frontendDir?.replace(/^\.\//, "")
+  if (explicit) {
+    return `${pluginDir}/${explicit}`
+  }
+  const direct = `${pluginDir}/frontend`
+  const underSrc = `${pluginDir}/src/frontend`
+  const directIndex = `${direct}/index.ts`
+  const srcIndex = `${underSrc}/index.ts`
+  const hasDirect = EXTERNAL_PLUGIN_FRONTEND_INDEX_KEYS.has(directIndex)
+  const hasUnderSrc = EXTERNAL_PLUGIN_FRONTEND_INDEX_KEYS.has(srcIndex)
+  if (hasDirect && hasUnderSrc) {
+    return direct
+  }
+  if (hasUnderSrc) {
+    return underSrc
+  }
+  return direct
+}
 // Discover widget Vue files to get widget names
 const WIDGET_COMPONENT_FILES = import.meta.glob(
   [
@@ -63,7 +102,11 @@ export const getWidgetDeclacations = () => {
     // Find all widget component files for this plugin
     const pluginDir = pluginPath.replace("/raclette.plugin.ts", "")
-    const widgetPattern = `${pluginDir}/frontend/widgets/`
+    const frontendPath = resolveExternalPluginFrontendPath(
+      pluginDir,
+      pluginMetadata,
+    )
+    const widgetPattern = `${frontendPath}/widgets/`
     // Look through all discovered widget Vue files to find ones belonging to this plugin
     Object.keys(WIDGET_COMPONENT_FILES).forEach((componentPath) => {
@@ -91,7 +134,9 @@ export const getWidgetDeclacations = () => {
         }
         // Extract details and config (handle both default export and named exports)
-        const details = setupModule.details || setupModule.default?.details
+        const details = (setupModule.details || setupModule.default?.details) as
+          | WidgetDeclaration
+          | undefined
         const config = setupModule.config || setupModule.default?.config
         if (!details) {
@@ -101,8 +146,10 @@ export const getWidgetDeclacations = () => {
           return
         }
+        const normalizedVisuals = normalizeWidgetVisuals(details, widgetName)
         const registeredWidget: RegisteredWidgetDeclaration = {
           ...details,
+          ...normalizedVisuals,
           pluginKey,
           author: pluginMetadata.author,
           name: widgetName,
@@ -169,11 +216,13 @@ const findSetupPathForWidget = (
     return null
   }
-  const [pluginPath] = pluginEntry
+  const [pluginPath, pluginModule] = pluginEntry
   const pluginDir = pluginPath.replace("/raclette.plugin.ts", "")
+  const metadata = pluginModule.default
+  const frontendPath = resolveExternalPluginFrontendPath(pluginDir, metadata)
   // Look for a Vue file with this widget name to find the directory structure
-  const widgetPattern = `${pluginDir}/frontend/widgets/`
+  const widgetPattern = `${frontendPath}/widgets/`
   const widgetVueFile = Object.keys(WIDGET_COMPONENT_FILES).find(
     (path) =>
       path.includes(widgetPattern) && path.endsWith(`${widgetName}Widget.vue`),

package/services/frontend/src/orchestrator/helpers/index.ts CHANGED Viewed

@@ -1,2 +1,3 @@
 export * from "./loginUserNotifications"
 export * from "./widgetLoader"
+export * from "./widgetVisuals"

package/services/frontend/src/orchestrator/helpers/widgetVisuals.ts ADDED Viewed

@@ -0,0 +1,71 @@
+export type WidgetVisualInput = {
+  title?: string
+  color?: string
+  icon?: string
+  images?: string[]
+}
+export type WidgetVisuals = {
+  color: string
+  icon: string
+  images: string[]
+}
+const getHashValue = (value: string) =>
+  value.split("").reduce((acc, char) => acc * 31 + char.charCodeAt(0), 7)
+export const generateColorFromName = (name: string): string => {
+  // Same input name -> same output color (stable across reloads/environments).
+  const normalizedName = name.trim().toLowerCase() || "widget"
+  const hash = Math.abs(getHashValue(normalizedName))
+  // Spread widgets over the full color wheel.
+  const hue = hash % 360
+  // Keep saturation/lightness in a readable mid-range to avoid too grey or too neon colors.
+  const saturation = 55 + (hash % 18) // 55..72
+  const lightness = 42 + (hash % 16) // 42..57
+  return `hsl(${hue} ${saturation}% ${lightness}%)`
+}
+export const getWidgetInitials = (name: string): string => {
+  const parts = name
+    .trim()
+    .split(/\s+/)
+    .filter(Boolean)
+  if (parts.length === 0) {
+    return "W"
+  }
+  if (parts.length === 1) {
+    return parts[0].slice(0, 2).toUpperCase()
+  }
+  return `${parts[0][0]}${parts[1][0]}`.toUpperCase()
+}
+export const normalizeWidgetVisuals = (
+  details: WidgetVisualInput,
+  widgetName: string,
+): WidgetVisuals => {
+  // Prefer plugin-provided values; only fallback when field is missing/empty.
+  const normalizedColor =
+    typeof details.color === "string" && details.color.trim().length > 0
+      ? details.color
+      : generateColorFromName(details.title || widgetName)
+  const normalizedIcon =
+    typeof details.icon === "string" && details.icon.trim().length > 0
+      ? details.icon
+      : ""
+  const normalizedImages = Array.isArray(details.images)
+    // Ignore invalid/empty entries to keep consumers simple.
+    ? details.images.filter((image) => typeof image === "string" && image.trim())
+    : []
+  return {
+    color: normalizedColor,
+    icon: normalizedIcon,
+    images: normalizedImages,
+  }
+}

package/services/frontend/src/orchestrator/setup/vuetify.ts CHANGED Viewed

@@ -1,6 +1,8 @@
 /**
  * Set up vuetify instance
  */
+import "../assets/styles/layers.css"
+import "vuetify/styles"
 import { createVuetify } from "vuetify"
 import * as components from "vuetify/components"
 import * as directives from "vuetify/directives"

package/services/frontend/src/orchestrator/types/Widgets.ts CHANGED Viewed

@@ -53,4 +53,8 @@ export type RegisteredWidgetDeclaration = {
 export type WidgetDeclaration = Omit<
   RegisteredWidgetDeclaration,
   "pluginKey" | "author" | "name" // name will be extracted via filename, cannot be overwritten
->
+> & {
+  color?: string
+  icon?: string
+  images?: string[]
+}

package/services/frontend/vite.config.ts CHANGED Viewed

@@ -3,6 +3,7 @@ import vue from "@vitejs/plugin-vue"
 import path from "path"
 import { componentPathPlugin } from "./vite-plugin-component-path"
 import tailwindcss from "@tailwindcss/vite"
+import Vuetify, { transformAssetUrls } from "vite-plugin-vuetify"
 export default defineConfig({
   server: {
@@ -17,27 +18,40 @@ export default defineConfig({
     target: "es2023",
     rollupOptions: {
       output: {
-        manualChunks: {
-          "vue-vendor": ["vue", "vue-router"],
-          vuetify: ["vuetify"],
-          // login: [
-          //   "@racletteOrchestrator/LoginApp.vue",
-          //   "@racletteOrchestrator/setup/loginApp.ts",
-          // ],
+        manualChunks: (id) => {
+          if (id.includes("node_modules/vuetify")) {
+            return "vuetify"
+          }
+          if (
+            id.includes("node_modules/vue") ||
+            id.includes("node_modules/vue-router")
+          ) {
+            return "vue-vendor"
+          }
+          return undefined
         },
       },
-      maxParallelFileOps: 1,
     },
   },
   optimizeDeps: {
-    include: ["vue", "vue-router", "vuetify"],
+    include: ["vue", "vue-router"],
     exclude: [
+      "vuetify",
       "virtual:plugin-key",
       "virtual:plugin-setup",
       "@racletteOrchestrator/composables/usePluginApi",
     ],
   },
-  plugins: [vue(), componentPathPlugin(), tailwindcss()],
+  plugins: [
+    vue({
+      template: { transformAssetUrls },
+    }),
+    componentPathPlugin(),
+    tailwindcss(),
+    Vuetify({
+      autoImport: true,
+    }),
+  ],
   resolve: {
     extensions: [".js", ".ts", ".vue"],
     alias: {