@raclettejs/workbench 0.1.23 → 0.1.24

package/CHANGELOG.md

@@ -7,6 +7,22 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+
+## [0.1.24] - 2026-04-15 <a href="https://gitlab.com/raclettejs/core-dev/-/compare/v0.1.23...v0.1.24" target="_blank" rel="noopener"><b>Overview of all changes</b></a>
+
+### Added
+
+- Composition create flow: pathname is now auto-generated from title using a basic slug strategy (lowercase, spaces to dashes, special characters removed). Sync is create-only and stops once pathname is manually overridden.
+
+### Changed
+
+- Composition widget layout fallbacks improved: missing widget icon/image/color metadata now renders deterministic placeholders (avatar initials and preview fallback card with widget + plugin labels) to support fast widget prototyping without required assets.
+
+### Updated
+
+- Dependency Versions
+
+
 ## [0.1.23] - 2026-03-11 <a href="https://gitlab.com/raclettejs/core-dev/-/compare/v0.1.21...v0.1.23" target="_blank" rel="noopener"><b>Overview of all changes</b></a>
 
 ### Fixed

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@raclettejs/workbench",
-  "version": "0.1.23",
+  "version": "0.1.24",
   "license": "MIT",
   "description": "racletteJS Workbench - used to configure your application, for dev and prod",
   "repository": "https://gitlab.com/raclettejs/workbench",
@@ -31,38 +31,41 @@
     ".": "./index.ts"
   },
   "dependencies": {
-    "@raclettejs/core": "^0.1.23",
+    "@raclettejs/core": "^0.1.24",
     "@vueuse/integrations": "14.2.1",
     "fuse.js": "7.1.0",
-    "three": "0.180.0",
+    "three": "0.183.2",
     "vanta": "0.5.24"
   },
   "devDependencies": {
+    "@emnapi/core": "1.9.2",
+    "@emnapi/runtime": "1.9.2",
     "@eslint/js": "9.35.0",
-    "@raclettejs/types": "^0.1.23",
-    "@sinclair/typebox": "0.34.41",
+    "@raclettejs/types": "^0.1.24",
+    "@sinclair/typebox": "0.34.48",
     "@types/ramda": "0.31.1",
-    "@vueuse/core": "13.9.0",
-    "@vueuse/rxjs": "13.9.0",
-    "axios": "1.12.2",
+    "@vueuse/core": "14.2.1",
+    "@vueuse/rxjs": "14.2.1",
+    "axios": "1.13.6",
     "date-fns": "4.1.0",
     "eslint": "9.35.0",
-    "eslint-config-prettier": "10.1.8",
+    "eslint-config-prettier": "9.1.2",
     "eslint-plugin-import": "2.32.0",
-    "eslint-plugin-prefer-arrow-functions": "3.8.1",
-    "eslint-plugin-prettier": "5.5.4",
-    "eslint-plugin-vue": "10.4.0",
-    "fastify": "5.6.0",
-    "globals": "16.4.0",
-    "prettier": "3.6.2",
-    "ramda": "0.31.3",
-    "typescript": "5.9.2",
-    "typescript-eslint": "8.44.0",
+    "eslint-plugin-prefer-arrow-functions": "3.9.1",
+    "eslint-plugin-prettier": "5.5.5",
+    "eslint-plugin-vue": "9.33.0",
+    "fastify": "5.8.2",
+    "globals": "17.4.0",
+    "prettier": "3.8.1",
+    "ramda": "0.32.0",
+    "rxjs": "7.8.2",
+    "typescript": "5.9.3",
+    "typescript-eslint": "8.57.1",
     "uuid": "13.0.0",
-    "vite": "7.1.5",
-    "vue": "3.5.21",
-    "vue-eslint-parser": "10.2.0",
-    "vue-i18n": "11.1.12",
-    "vuetify": "3.10.2"
+    "vite": "8.0.1",
+    "vue": "3.5.30",
+    "vue-eslint-parser": "9.4.3",
+    "vue-i18n": "11.3.0",
+    "vuetify": "4.0.5"
   }
 }

package/plugins/pacifico__compositions/frontend/components/compositionConfiguration/CompositionConfiguration.vue

@@ -46,13 +46,13 @@ import type { CompositionCreate, CompositionUpdate } from "@raclettejs/core"
 import DynamicForm from "@app/components/dynamicForm/DynamicForm.vue"
 import type { DynamicFormItem } from "@app/components/dynamicForm/DynamicFormTypes"
 import { useI18n } from "vue-i18n"
-import { computed, useTemplateRef } from "vue"
+import { computed, ref, useTemplateRef, watch } from "vue"
 import CompositionWidgetsLayout from "./CompositionWidgetsLayout.vue"
 import WidgetList from "./widgetsLayout/WidgetList.vue"
 import StepNavigator from "@app/components/stepNavigator/StepNavigator.vue"
 import { Step } from "@app/components/stepNavigator/StepNavigatorTypes"
 
-defineProps<{ disabled?: boolean; isEditing?: boolean }>()
+const props = defineProps<{ disabled?: boolean; isEditing?: boolean }>()
 
 defineEmits<{
   (e: "save"): void
@@ -67,6 +67,61 @@ const stepNavigatorRef = useTemplateRef("stepNavigatorRef")
 const dynamicFormRef = useTemplateRef("dynamicFormRef")
 
 const { t } = useI18n()
+const isUpdatingPathname = ref(false)
+const isPathSyncEnabled = ref(!props.isEditing)
+const lastAutoPathSignature = ref("")
+
+const slugifyPath = (value: string): string =>
+  value
+    .normalize("NFD")
+    .replace(/[\u0300-\u036f]/g, "")
+    .toLowerCase()
+    .trim()
+    .replace(/[^a-z0-9\s-]/g, "")
+    .replace(/[\s_]+/g, "-")
+    .replace(/-+/g, "-")
+    .replace(/^-|-$/g, "")
+
+const getPathSignature = (pathname: unknown): string => JSON.stringify(pathname)
+
+const isPathnameEmpty = (pathname: unknown): boolean => {
+  if (!pathname) {
+    return true
+  }
+
+  if (typeof pathname === "string") {
+    return pathname.trim().length === 0
+  }
+
+  if (typeof pathname === "object") {
+    return Object.values(pathname as Record<string, unknown>).every(
+      (value) => typeof value === "string" && value.trim().length === 0,
+    )
+  }
+
+  return true
+}
+
+const buildPathnameFromSlug = (
+  currentPathname: CompositionCreate["pathname"] | CompositionUpdate["pathname"],
+  slug: string,
+) => {
+  if (typeof currentPathname === "string") {
+    return slug
+  }
+
+  if (currentPathname && typeof currentPathname === "object") {
+    return Object.keys(currentPathname).reduce<Record<string, string>>(
+      (acc, locale) => {
+        acc[locale] = slug
+        return acc
+      },
+      {},
+    )
+  }
+
+  return slug
+}
 
 const inputFields = computed<
   DynamicFormItem<CompositionCreate | CompositionUpdate>[]
@@ -135,6 +190,49 @@ const validateConfigStep = (): boolean => {
 
 const onDynamicFormSubmit = () => stepNavigatorRef.value?.nextStep()
 
+watch(
+  () => composition.value.pathname,
+  (pathname) => {
+    if (props.isEditing || isUpdatingPathname.value || !isPathSyncEnabled.value) {
+      return
+    }
+
+    const currentSignature = getPathSignature(pathname)
+    const isAutoGeneratedValue =
+      lastAutoPathSignature.value.length > 0 &&
+      currentSignature === lastAutoPathSignature.value
+
+    if (!isAutoGeneratedValue && !isPathnameEmpty(pathname)) {
+      isPathSyncEnabled.value = false
+    }
+  },
+  { deep: true },
+)
+
+watch(
+  () => composition.value.title,
+  (title) => {
+    if (props.isEditing || !isPathSyncEnabled.value) {
+      return
+    }
+
+    const slug = slugifyPath(title || "")
+    const nextPath = buildPathnameFromSlug(composition.value.pathname, slug)
+    const nextSignature = getPathSignature(nextPath)
+
+    if (nextSignature === getPathSignature(composition.value.pathname)) {
+      lastAutoPathSignature.value = nextSignature
+      return
+    }
+
+    isUpdatingPathname.value = true
+    composition.value.pathname = nextPath
+    lastAutoPathSignature.value = nextSignature
+    isUpdatingPathname.value = false
+  },
+  { immediate: true },
+)
+
 const steps = computed<Step[]>(() => [
   {
     id: "config",

package/plugins/pacifico__compositions/frontend/components/compositionConfiguration/widgetsLayout/WidgetIcon.vue

@@ -4,24 +4,31 @@
       <span
         class="tw:flex tw:h-8 tw:w-8 tw:items-center tw:justify-center tw:rounded tw:shadow-none"
         :style="{
-          backgroundColor: module.color,
+          backgroundColor: resolvedColor,
         }"
       >
         <span
           v-if="svgContent"
           class="tw:flex tw:h-6 tw:w-6 tw:items-center tw:justify-center"
           :style="{
-            '--highlight-color': module.color,
+            '--highlight-color': resolvedColor,
             '--base-color': baseColor,
           }"
           v-html="svgContent"
         />
+        <span
+          v-else-if="!resolvedIcon"
+          class="tw:text-xs tw:font-semibold tw:uppercase tw:text-white"
+        >
+          {{ initials }}
+        </span>
 
         <img
           v-else
-          :src="module.icon"
+          :src="resolvedIcon"
           :alt="`${module.title} icon`"
           class="tw:size-6"
+          @error="onImageError"
         />
       </span>
     </figure>
@@ -33,6 +40,10 @@ import { WidgetDeclaration } from "@raclettejs/core"
 import { ref, onMounted, watch, computed } from "vue"
 import type { PropType } from "vue"
 import { useTheme } from "vuetify"
+import {
+  generateColorFromName,
+  getWidgetInitials,
+} from "@raclettejs/core/orchestrator"
 
 const props = defineProps({
   module: {
@@ -44,11 +55,41 @@ const props = defineProps({
 const vuetifyTheme = useTheme()
 
 const svgContent = ref("")
+const hasImageError = ref(false)
 
 const baseColor = computed(() =>
   vuetifyTheme.global.name.value === "dark" ? "#000" : "#fff",
 )
 
+const initials = computed(() => {
+  return getWidgetInitials(props.module.title || "Widget")
+})
+
+const resolvedColor = computed(() =>
+  props.module.color?.trim()
+    ? props.module.color
+    : generateColorFromName(props.module.title || "widget"),
+)
+
+const resolvedIcon = computed(() => {
+  if (hasImageError.value) {
+    return ""
+  }
+
+  const icon = props.module.icon
+  if (typeof icon !== "string") {
+    return ""
+  }
+
+  return icon.trim()
+})
+
+const isSvgIcon = computed(
+  () =>
+    resolvedIcon.value.endsWith(".svg") ||
+    resolvedIcon.value.startsWith("data:image/svg+xml"),
+)
+
 const loadSvgContent = async (iconPath: string) => {
   if (iconPath.startsWith("data:image/svg+xml;base64,")) {
     const base64Data = iconPath.split(",")[1]
@@ -72,25 +113,25 @@ const loadSvgContent = async (iconPath: string) => {
 }
 
 onMounted(() => {
-  if (
-    props.module.icon.endsWith(".svg") ||
-    props.module.icon.startsWith("data:image/svg+xml")
-  ) {
-    loadSvgContent(props.module.icon)
+  if (isSvgIcon.value && resolvedIcon.value) {
+    loadSvgContent(resolvedIcon.value)
   }
 })
 
 watch(
-  () => props.module,
-  (newModule) => {
-    if (
-      newModule.icon.endsWith(".svg") ||
-      newModule.icon.startsWith("data:image/svg+xml")
-    ) {
-      loadSvgContent(newModule.icon)
+  () => [props.module.icon, props.module.title],
+  () => {
+    hasImageError.value = false
+    if (isSvgIcon.value && resolvedIcon.value) {
+      loadSvgContent(resolvedIcon.value)
     } else {
       svgContent.value = ""
     }
   },
 )
+
+const onImageError = () => {
+  hasImageError.value = true
+  svgContent.value = ""
+}
 </script>

package/plugins/pacifico__compositions/frontend/components/compositionConfiguration/widgetsLayout/WidgetRenderer.vue

@@ -21,7 +21,27 @@
 
     <div class="tw:pointer-events-none">
       <div v-if="activeWidget">
-        <v-img :src="activeWidget?.images[0] || activeWidget.icon" />
+        <v-img
+          v-if="previewSrc"
+          :src="previewSrc"
+          cover
+          class="tw:min-h-24"
+          @error="onPreviewError"
+        />
+        <div
+          v-else
+          class="tw:flex tw:min-h-24 tw:flex-col tw:items-center tw:justify-center tw:gap-1 tw:px-3 tw:py-6 tw:text-center tw:text-white"
+          :style="{
+            backgroundColor: placeholderColor,
+          }"
+        >
+          <span class="tw:text-base tw:font-semibold">
+            {{ placeholderLabel }}
+          </span>
+          <span class="tw:text-sm tw:font-medium tw:opacity-90">
+            {{ pluginLabel }}
+          </span>
+        </div>
       </div>
       <div v-else class="tw:bg-red-700 tw:text-2xl tw:text-white">
         Module not found: "{{ widgetConfig.widget.name }}"
@@ -31,12 +51,13 @@
 </template>
 
 <script setup lang="ts">
-import { computed, type PropType } from "vue"
+import { computed, ref, watch, type PropType } from "vue"
 import DraggableElement from "@raclettejs/core/orchestrator/components/dragAndDrop/DraggableElement.vue"
 import WidgetContextMenu from "./WidgetContextMenu.vue"
 import useWidgets from "@raclettejs/core/orchestrator/composables/useWidgets"
 import { OnResizeFunction } from "@raclettejs/core/orchestrator/composables/useDragAndDrop"
 import { WidgetSlot } from "@raclettejs/core/frontend/store/types"
+import { generateColorFromName } from "@raclettejs/core/orchestrator"
 
 const props = defineProps({
   widgetConfig: {
@@ -53,13 +74,65 @@ const emit = defineEmits<{
 }>()
 
 const { widgets } = useWidgets()
+const hasPreviewError = ref(false)
 
 const activeWidget = computed(() =>
   findWidgetByName(props.widgetConfig.widget.name),
 )
 
+const placeholderLabel = computed(
+  () => activeWidget.value?.title || props.widgetConfig.widget.name || "Widget",
+)
+
+const pluginLabel = computed(() => {
+  const pluginKey = activeWidget.value?.pluginKey
+  if (!pluginKey) {
+    return "Unknown Plugin"
+  }
+
+  return pluginKey
+    .replace(/__/g, " / ")
+    .replace(/_/g, " ")
+    .replace(/\b\w/g, (char) => char.toUpperCase())
+})
+
+const placeholderColor = computed(() => {
+  const widgetColor = activeWidget.value?.color?.trim()
+  if (widgetColor) {
+    return widgetColor
+  }
+  return generateColorFromName(placeholderLabel.value)
+})
+
+const previewSrc = computed(() => {
+  if (hasPreviewError.value || !activeWidget.value) {
+    return ""
+  }
+
+  const image = activeWidget.value.images?.find(
+    (value: string) => typeof value === "string" && value.trim().length > 0,
+  )
+  if (image) {
+    return image
+  }
+
+  const icon = activeWidget.value.icon?.trim()
+  return icon || ""
+})
+
 const onResize: OnResizeFunction = ({ cols }) => emit("resize", cols)
 
 const findWidgetByName = (widgetName?: string) =>
   widgets.value.find((widget) => widget.name === widgetName)
+
+const onPreviewError = () => {
+  hasPreviewError.value = true
+}
+
+watch(
+  () => activeWidget.value?.name,
+  () => {
+    hasPreviewError.value = false
+  },
+)
 </script>

package/services/frontend/src/app/components/dynamicForm/typedInputs/IconInput.vue

@@ -10,13 +10,13 @@
     :menu-props="{ maxHeight: 400 }"
     :virtual-scroll="true"
   >
-    <template #item="{ props, item }">
-      <v-list-item v-bind="props" :prepend-icon="`mdi-${item.raw}`" />
+    <template #item="{ props, internalItem }">
+      <v-list-item v-bind="props" :prepend-icon="`mdi-${internalItem.raw}`" />
     </template>
 
-    <template #selection="{ item }">
-      <v-icon :icon="`mdi-${item.value}`" class="me-2" />
-      {{ item.value }}
+    <template #selection="{ internalItem }">
+      <v-icon :icon="`mdi-${internalItem.value}`" class="me-2" />
+      {{ internalItem.value }}
     </template>
   </v-autocomplete>
 </template>

package/services/frontend/src/app/components/dynamicForm/typedInputs/TagsInput.vue

@@ -12,22 +12,27 @@
     variant="outlined"
     chips
   >
-    <template #chip="{ item }">
+    <template #chip="{ internalItem }">
       <v-chip
-        :color="item.raw.color"
+        :color="internalItem.raw.color"
         label
         variant="outlined"
         closable
-        @click:close="removeItem(item.value)"
+        @click:close="removeItem(internalItem.value)"
       >
-        {{ item.title }}
+        {{ internalItem.title }}
       </v-chip>
     </template>
 
-    <template #item="{ props, item }">
+    <template #item="{ props, internalItem }">
       <v-list-item v-bind="props" title="">
-        <v-chip :color="item.raw.color" label variant="outlined" size="small">
-          {{ item.title }}
+        <v-chip
+          :color="internalItem.raw.color"
+          label
+          variant="outlined"
+          size="small"
+        >
+          {{ internalItem.title }}
         </v-chip>
       </v-list-item>
     </template>

package/services/frontend/src/app/composables/useWorkbenchPlugins.ts

@@ -7,6 +7,10 @@ import { computed } from "vue"
 
 const PLUGIN_SETTINGS_WIDGET_NAME = "PluginSettings"
 
+type WorkbenchPluginListItem = PluginMetadata & {
+  resolvedFrontendPath: string
+}
+
 const PLUGIN_METADATA_FILES: { [key: string]: { default: PluginMetadata } } =
   import.meta.glob<{ default: PluginMetadata }>(
     "@racletteCore/../../external-app-plugins/**/raclette.plugin.ts",
@@ -15,16 +19,95 @@ const PLUGIN_METADATA_FILES: { [key: string]: { default: PluginMetadata } } =
     },
   )
 
+// Build-time keys; glob `**` matches both sibling `frontend` and `src/frontend` layouts.
+const externalAppPluginFrontendIndexKeys = new Set(
+  Object.keys(
+    import.meta.glob("@racletteCore/../../external-app-plugins/**/frontend/index.ts", {
+      eager: false,
+    }),
+  ),
+)
+
+const externalAppPluginWidgetPaths = new Set(
+  Object.keys(
+    import.meta.glob(
+      "@racletteCore/../../external-app-plugins/**/frontend/widgets/**/*Widget.vue",
+      { eager: false },
+    ),
+  ),
+)
+
+const resolveExternalAppPluginFrontendPath = (pluginPath: string, metadata: PluginMetadata): 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 = externalAppPluginFrontendIndexKeys.has(directIndex)
+  const hasUnderSrc = externalAppPluginFrontendIndexKeys.has(srcIndex)
+
+  if (hasDirect && hasUnderSrc) {
+    return direct
+  }
+  if (hasUnderSrc) {
+    return underSrc
+  }
+  return direct
+};
+
+const findExternalPluginDirByKey = (pluginKey: string): string | null => {
+  for (const configPath of Object.keys(PLUGIN_METADATA_FILES)) {
+    const meta = PLUGIN_METADATA_FILES[configPath]?.default
+    if (!meta) continue
+    if (generatePluginKey(meta.name, meta.author) === pluginKey) {
+      return configPath.replace(/\/raclette\.plugin\.ts$/, "")
+    }
+  }
+  return null
+};
+
+const externalAppPluginHasSettingsWidget = (pluginKey: string): boolean => {
+  const pluginDir = findExternalPluginDirByKey(pluginKey)
+  if (!pluginDir) return false
+
+  const configPath = Object.keys(PLUGIN_METADATA_FILES).find(
+    (p) => p.replace(/\/raclette\.plugin\.ts$/, "") === pluginDir,
+  )
+  const meta = configPath ? PLUGIN_METADATA_FILES[configPath]?.default : undefined
+  if (!meta) return false
+
+  const frontendPath = resolveExternalAppPluginFrontendPath(pluginDir, meta)
+  const widgetsPrefix = `${frontendPath}/widgets/`
+
+  return [...externalAppPluginWidgetPaths].some(
+    (p) =>
+      p.includes(widgetsPrefix) &&
+      p.endsWith(`${PLUGIN_SETTINGS_WIDGET_NAME}Widget.vue`),
+  )
+};
+
 export default () => {
   const pluginMetadataFiles = computed(() => {
-    const pluginFiles: PluginMetadata[] = []
-    forEachObjIndexed(({ default: pluginFile }) => {
-      const fileContent = pluginFile
-      fileContent.pluginKey = generatePluginKey(
-        pluginFile.name,
-        pluginFile.author,
+    const pluginFiles: WorkbenchPluginListItem[] = []
+    forEachObjIndexed(({ default: pluginFile }, configPath) => {
+      const pluginPath = String(configPath).replace(
+        /\/raclette\.plugin\.ts$/,
+        "",
+      )
+      const resolvedFrontendPath = resolveExternalAppPluginFrontendPath(
+        pluginPath,
+        pluginFile,
       )
-      pluginFiles.push(fileContent)
+      pluginFiles.push({
+        ...pluginFile,
+        pluginKey: generatePluginKey(pluginFile.name, pluginFile.author),
+        resolvedFrontendPath,
+      })
     }, PLUGIN_METADATA_FILES)
     return pluginFiles
   })
@@ -38,7 +121,8 @@ export default () => {
   }
 
   const hasPluginSettingsWidget = (pluginKey: string) =>
-    !!registeredPlugins?.[pluginKey]?.widgets?.[PLUGIN_SETTINGS_WIDGET_NAME]
+    !!registeredPlugins?.[pluginKey]?.widgets?.[PLUGIN_SETTINGS_WIDGET_NAME] ||
+    externalAppPluginHasSettingsWidget(pluginKey)
 
   return { pluginMetadataFiles, getWorkbenchPlugin, hasPluginSettingsWidget }
 }