@raclettejs/workbench 0.1.34 → 0.1.36-canary.0

package/CHANGELOG.md

@@ -7,14 +7,30 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
-## [0.1.34] - 2026-05-13 <a href="https://gitlab.com/raclettejs/core-dev/-/compare/v0.1.32...v0.1.34" target="_blank" rel="noopener"><b>Overview of all changes</b></a>
+### Fixed
 
+- WidgetLayout: removed icon as fallback option after image -> only render image or fallback block, never icon in WidgetRenderer
+
+### Added
+
+- Compositions Create: Now has creation of InteractionLinks included as third step. Order of layout and meta data had been switched for better UX.
+- Plugins List: Edit-symbol indicator for clickable rows; non-clickable rows have default cursor
+- Cache List: a workbench interface to monitor the valkey entries. Edit and delete possibilities will follow soon
+
+## [0.1.35] - 2026-05-14 <a href="https://gitlab.com/raclettejs/core-dev/-/compare/v0.1.34...v0.1.35" target="_blank" rel="noopener"><b>Overview of all changes</b></a>
 
 ### Patch Changes
 
+- fix: add missing new dark theme color
 - Updated dependencies
-  - @raclettejs/core@0.1.34
+  - @raclettejs/core@0.1.35
 
+## [0.1.34] - 2026-05-13 <a href="https://gitlab.com/raclettejs/core-dev/-/compare/v0.1.32...v0.1.34" target="_blank" rel="noopener"><b>Overview of all changes</b></a>
+
+### Patch Changes
+
+- Updated dependencies
+  - @raclettejs/core@0.1.34
 
 - set eslint version to latest
 

package/config/compositions.js

@@ -283,4 +283,22 @@ export default [
       ],
     ],
   },
+  {
+    _id: "cacheList",
+    pathname: {
+      default: "cache-list",
+    },
+    widgetsLayout: [
+      [
+        {
+          column: 12,
+          widget: {
+            uuid: "cacheList",
+            name: "CacheList",
+            pluginKey: "raclette__cache",
+          },
+        },
+      ],
+    ],
+  },
 ] //satisfies Composition[]

package/config/interactionLinks.js

@@ -181,4 +181,23 @@ export default [
       },
     ],
   },
+  {
+    _id: "cacheListInteractionLink",
+    composition: compositions[15]._id,
+    slotType: "page",
+    triggers: [
+      {
+        type: "page-navigation",
+        settings: {
+          icon: "mdi-database",
+          title: {
+            default: "Cache",
+            de: "Cache",
+          },
+          sortOrder: 5,
+          navigationBarType: "navItem",
+        },
+      },
+    ],
+  },
 ] // satisfies Partial<InteractionLink>[]

package/i18n/de-DE.json

@@ -65,8 +65,22 @@
         "widgetLayout": {
           "title": "Widget Layout",
           "subtitle": "Seiteninhalte konfigurieren"
+        },
+        "integration": {
+          "title": "Interaktionslink",
+          "subtitle": "Navigationseintrag hinzufügen (optional)"
         }
       },
+      "actions": {
+        "saveAndContinue": "Speichern und fortfahren",
+        "finishWithoutIL": "Ohne Link abschließen",
+        "saveIL": "Link speichern"
+      },
+      "integration": {
+        "intro": "Ihre Komposition wurde gespeichert. Sie funktioniert eigenständig, aber Nutzer benötigen einen Interaktionslink, um sie aus der Seitenleiste, dem Menü oder als Modal zu öffnen. Sie können jetzt einen anlegen oder überspringen und später erstellen. Wir haben eine Basis-Konfiguration vorausgefüllt, die Sie frei anpassen oder direkt speichern können.",
+        "formTitle": "Interaktionslink zuweisen",
+        "linkedCompositionDescription": "Dieser Link öffnet die soeben erstellte Komposition. Die Zuordnung kann hier nicht geändert werden."
+      },
       "divider": {
         "general": "Allgemein",
         "navigation": "Navigation",
@@ -296,4 +310,4 @@
       }
     }
   }
-}
+}

package/i18n/en-EU.json

@@ -65,8 +65,22 @@
         "widgetLayout": {
           "title": "Widget Layout",
           "subtitle": "Configure page content"
+        },
+        "integration": {
+          "title": "Interaction Link",
+          "subtitle": "Add navigation entry (optional)"
         }
       },
+      "actions": {
+        "saveAndContinue": "Save and Continue",
+        "finishWithoutIL": "Finish without Link",
+        "saveIL": "Save Link"
+      },
+      "integration": {
+        "intro": "Your composition is saved. It works on its own, but users need an Interaction Link to open it from the sidebar, menu, or as a modal. You can add one now or skip and create it later. We prefilled a base configuration you can freely edit or directly save.",
+        "formTitle": "Assign an Interaction Link",
+        "linkedCompositionDescription": "This link will open the composition you just created. It cannot be changed here."
+      },
       "divider": {
         "general": "General",
         "navigation": "Navigation",
@@ -218,6 +232,43 @@
     "tagEdit": {
       "title": "Edit Tag"
     },
+    "cacheList": {
+      "dataName": "Cache entry",
+      "dbLabel": "DB",
+      "batchSizeLabel": "Fetch batch",
+      "dbActive": "DB {db}",
+      "patternLabel": "Key pattern",
+      "patternPlaceholder": "empty = all keys, grouped",
+      "refresh": "Refresh",
+      "loadMore": "Load more",
+      "truncated": "Truncated",
+      "truncatedDetailHint": "Value was truncated for display. Export may not include the full stored value.",
+      "detailTtl": "TTL",
+      "showingCount": "{shown} of {total}",
+      "keyPickerLabel": "Key",
+      "backToList": "Back to list",
+      "customizeTable": "Configure table",
+      "configureColumns": "Configure columns",
+      "deselectAll": "Deselect all",
+      "done": "Done",
+      "valueTableTitle": "Cache value",
+      "tableActions": "Actions",
+      "openValueTable": "Open value table",
+      "openValueTableFor": "Open value table for {key}",
+      "tableHeaders": {
+        "keyGroup": "Group",
+        "key": "Key",
+        "ttl": "TTL",
+        "value": "Value"
+      },
+      "valueTableHeaders": {
+        "field": "Field",
+        "entryKey": "Entry key",
+        "value": "Value",
+        "index": "Index",
+        "raw": "Raw"
+      }
+    },
     "tagConfiguration": {
       "dividers": {
         "general": "General"
@@ -296,4 +347,4 @@
       }
     }
   }
-}
+}

package/i18n/sk-SK.json

@@ -65,8 +65,22 @@
         "widgetLayout": {
           "title": "Rozloženie widgetov",
           "subtitle": "Nakonfigurujte obsah stránky"
+        },
+        "integration": {
+          "title": "Interakčný odkaz",
+          "subtitle": "Pridať položku navigácie (voliteľné)"
         }
       },
+      "actions": {
+        "saveAndContinue": "Uložiť a pokračovať",
+        "finishWithoutIL": "Dokončiť bez odkazu",
+        "saveIL": "Uložiť odkaz"
+      },
+      "integration": {
+        "intro": "Vaša kompozícia je uložená. Funguje samostatne, ale používatelia potrebujú interakčný odkaz na otvorenie z bočného panela, menu alebo ako modálne okno. Môžete ho pridať teraz alebo preskočiť a vytvoriť neskôr. Predvyplnili sme základnú konfiguráciu, ktorú môžete voľne upraviť alebo jednoducho uložiť.",
+        "formTitle": "Priradiť interakčný odkaz",
+        "linkedCompositionDescription": "Tento odkaz otvorí kompozíciu, ktorú ste práve vytvorili. Tu ju nie je možné zmeniť."
+      },
       "divider": {
         "general": "Všeobecné",
         "navigation": "Navigácia"
@@ -291,4 +305,4 @@
       }
     }
   }
-}
+}

package/package.json

@@ -1,13 +1,12 @@
 {
   "name": "@raclettejs/workbench",
-  "version": "0.1.34",
+  "version": "0.1.36-canary.0",
   "license": "MIT",
   "description": "racletteJS Workbench - used to configure your application, for dev and prod",
   "repository": "https://gitlab.com/raclettejs/workbench",
   "author": "Pacifico Digital Explorations GmbH",
   "type": "module",
   "scripts": {
-    ":install": "yarn install",
     "dev": "raclette dev",
     "down": "raclette down",
     "build": "raclette build",
@@ -34,7 +33,7 @@
     ".": "./index.ts"
   },
   "dependencies": {
-    "@raclettejs/core": "^0.1.34",
+    "@raclettejs/core": "workspace:",
     "@vueuse/integrations": "14.2.1",
     "fuse.js": "7.1.0",
     "three": "0.183.2",
@@ -44,7 +43,7 @@
     "@emnapi/core": "1.9.2",
     "@emnapi/runtime": "1.9.2",
     "@eslint/js": "9.35.0",
-    "@raclettejs/types": "^0.1.34",
+    "@raclettejs/types": "workspace:",
     "@sinclair/typebox": "0.34.48",
     "@types/ramda": "0.31.1",
     "@vueuse/core": "14.2.1",

package/packages.json

@@ -9,7 +9,9 @@
     "devDependencies": {}
   },
   "backend": {
-    "dependencies": {},
+    "dependencies": {
+      "iovalkey": "0.3.3"
+    },
     "devDependencies": {}
   }
 }

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

@@ -3,12 +3,26 @@
     ref="stepNavigatorRef"
     :steps
     :is-saving="disabled"
+    :allow-free-navigation="!!isEditing"
     :show-save-button="isEditing"
+    :show-next-with-save="isEditing"
+    :show-finish-on-last-step="isEditing"
+    show-exit-back
+    exit-back-interaction-link-id="compositionListInteractionLink"
     @save="$emit('save')"
     @save-and-finish="$emit('save-and-finish')"
+    @custom-action="$emit('custom-action', $event)"
   >
     <template #default="{ currentStep }">
-      <template v-if="currentStep.id === 'config'">
+      <template v-if="currentStep.id === 'layout'">
+        <v-navigation-drawer permanent class="tw:p-2">
+          <WidgetList />
+        </v-navigation-drawer>
+
+        <CompositionWidgetsLayout v-model="composition" />
+      </template>
+
+      <template v-else-if="currentStep.id === 'config'">
         <div>
           <!-- @vue-generic {CompositionCreate | CompositionUpdate} -->
           <DynamicForm
@@ -22,32 +36,36 @@
                 ? $t('workbench.compositionEdit.title')
                 : $t('workbench.compositionCreate.title')
             "
-            route-back-interaction-link-id="compositionListInteractionLink"
+            :hide-title="!isEditing"
             @submit="onDynamicFormSubmit"
           />
         </div>
       </template>
 
-      <template v-else-if="currentStep.id === 'layout'">
-        <v-navigation-drawer permanent class="tw:p-2">
-          <WidgetList />
-        </v-navigation-drawer>
-
-        <CompositionWidgetsLayout v-model="composition" />
+      <template v-else-if="currentStep.id === 'integration' && interactionLink">
+        <CompositionIntegration
+          ref="integrationRef"
+          v-model="interactionLink"
+          :disabled
+          :linked-composition-title="composition.title"
+        />
       </template>
-
-      <template v-else-if="currentStep.id === 'integration'"> </template>
     </template>
   </StepNavigator>
 </template>
 
 <script setup lang="ts">
-import type { CompositionCreate, CompositionUpdate } from "@raclettejs/core"
+import type {
+  CompositionCreate,
+  CompositionUpdate,
+  InteractionLinkCreate,
+} 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, ref, useTemplateRef, watch } from "vue"
 import CompositionWidgetsLayout from "./CompositionWidgetsLayout.vue"
+import CompositionIntegration from "./CompositionIntegration.vue"
 import WidgetList from "./widgetsLayout/WidgetList.vue"
 import StepNavigator from "@app/components/stepNavigator/StepNavigator.vue"
 import { Step } from "@app/components/stepNavigator/StepNavigatorTypes"
@@ -57,14 +75,18 @@ const props = defineProps<{ disabled?: boolean; isEditing?: boolean }>()
 defineEmits<{
   (e: "save"): void
   (e: "save-and-finish"): void
+  (e: "custom-action", actionId: string): void
 }>()
 
 const composition = defineModel<CompositionCreate | CompositionUpdate>({
   required: true,
 })
 
+const interactionLink = defineModel<InteractionLinkCreate>("interactionLink")
+
 const stepNavigatorRef = useTemplateRef("stepNavigatorRef")
 const dynamicFormRef = useTemplateRef("dynamicFormRef")
+const integrationRef = useTemplateRef("integrationRef")
 
 const { t } = useI18n()
 const isUpdatingPathname = ref(false)
@@ -103,7 +125,9 @@ const isPathnameEmpty = (pathname: unknown): boolean => {
 }
 
 const buildPathnameFromSlug = (
-  currentPathname: CompositionCreate["pathname"] | CompositionUpdate["pathname"],
+  currentPathname:
+    | CompositionCreate["pathname"]
+    | CompositionUpdate["pathname"],
   slug: string,
 ) => {
   if (typeof currentPathname === "string") {
@@ -188,12 +212,19 @@ const validateConfigStep = (): boolean => {
   return true
 }
 
+const validateIntegrationStep = (): boolean =>
+  integrationRef.value?.validate() ?? true
+
 const onDynamicFormSubmit = () => stepNavigatorRef.value?.nextStep()
 
 watch(
   () => composition.value.pathname,
   (pathname) => {
-    if (props.isEditing || isUpdatingPathname.value || !isPathSyncEnabled.value) {
+    if (
+      props.isEditing ||
+      isUpdatingPathname.value ||
+      !isPathSyncEnabled.value
+    ) {
       return
     }
 
@@ -233,7 +264,14 @@ watch(
   { immediate: true },
 )
 
-const steps = computed<Step[]>(() => [
+const editSteps = computed<Step[]>(() => [
+  {
+    id: "layout",
+    title: t("workbench.compositionConfiguration.steps.widgetLayout.title"),
+    subtitle: t(
+      "workbench.compositionConfiguration.steps.widgetLayout.subtitle",
+    ),
+  },
   {
     id: "config",
     title: t("workbench.compositionConfiguration.steps.configuration.title"),
@@ -242,6 +280,9 @@ const steps = computed<Step[]>(() => [
     ),
     validator: validateConfigStep,
   },
+])
+
+const createSteps = computed<Step[]>(() => [
   {
     id: "layout",
     title: t("workbench.compositionConfiguration.steps.widgetLayout.title"),
@@ -249,5 +290,46 @@ const steps = computed<Step[]>(() => [
       "workbench.compositionConfiguration.steps.widgetLayout.subtitle",
     ),
   },
+  {
+    id: "config",
+    title: t("workbench.compositionConfiguration.steps.configuration.title"),
+    subtitle: t(
+      "workbench.compositionConfiguration.steps.configuration.subtitle",
+    ),
+    validator: validateConfigStep,
+    primaryAction: "custom",
+    primaryActionId: "save-and-continue",
+    primaryLabelKey:
+      "workbench.compositionConfiguration.actions.saveAndContinue",
+  },
+  {
+    id: "integration",
+    title: t("workbench.compositionConfiguration.steps.integration.title"),
+    subtitle: t(
+      "workbench.compositionConfiguration.steps.integration.subtitle",
+    ),
+    disableFooterBack: true,
+    validator: validateIntegrationStep,
+    primaryAction: "custom",
+    primaryActionId: "save-il",
+    primaryLabelKey: "workbench.compositionConfiguration.actions.saveIL",
+    secondaryActions: [
+      {
+        id: "finish-without-il",
+        labelKey: "workbench.compositionConfiguration.actions.finishWithoutIL",
+        variant: "outlined",
+        skipValidation: true,
+      },
+    ],
+  },
 ])
+
+const steps = computed(() =>
+  props.isEditing ? editSteps.value : createSteps.value,
+)
+
+defineExpose({
+  goToStep: (step: number, options?: { skipValidation?: boolean }) =>
+    stepNavigatorRef.value?.goToStep(step, options),
+})
 </script>

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

@@ -1,3 +1,31 @@
 <template>
-  <div>Ich bin die Einbindung für eine Komposition :)</div>
+  <InteractionLinkBehaviorForm
+    ref="behaviorFormRef"
+    v-model="interactionLink"
+    :disabled
+    :fluid="true"
+    show-linked-composition
+    :linked-composition-title="linkedCompositionTitle"
+    :intro="$t('workbench.compositionConfiguration.integration.intro')"
+    :title="$t('workbench.compositionConfiguration.integration.formTitle')"
+  />
 </template>
+
+<script setup lang="ts">
+import type { InteractionLinkCreate } from "@raclettejs/core"
+import InteractionLinkBehaviorForm from "@app/components/interactionLink/InteractionLinkBehaviorForm.vue"
+import { useTemplateRef } from "vue"
+
+defineProps<{
+  disabled?: boolean
+  linkedCompositionTitle?: string
+}>()
+
+const interactionLink = defineModel<InteractionLinkCreate>({ required: true })
+
+const behaviorFormRef = useTemplateRef("behaviorFormRef")
+
+const validate = (): boolean => behaviorFormRef.value?.validate() ?? true
+
+defineExpose({ validate })
+</script>

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

@@ -112,12 +112,7 @@ const previewSrc = computed(() => {
   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 || ""
+  return image || ""
 })
 
 const onResize: OnResizeFunction = ({ cols }) => emit("resize", cols)

package/plugins/pacifico__compositions/frontend/composables/prefillInteractionLinkFromComposition.ts

@@ -0,0 +1,54 @@
+import type { CompositionCreate, InteractionLinkCreate } from "@raclettejs/core"
+
+const getDefaultPathname = (
+  pathname: CompositionCreate["pathname"],
+): string => {
+  if (typeof pathname === "string") {
+    return pathname
+  }
+
+  if (pathname && typeof pathname === "object") {
+    const localized = pathname as Record<string, string>
+    return (
+      localized.default ||
+      localized.en ||
+      localized.de ||
+      Object.values(localized).find((value) => value?.trim()) ||
+      ""
+    )
+  }
+
+  return ""
+}
+
+export const prefillInteractionLinkFromComposition = (
+  interactionLink: InteractionLinkCreate,
+  composition: CompositionCreate,
+): void => {
+  interactionLink.composition = interactionLink.composition || ""
+
+  if (interactionLink.triggers.length > 0) {
+    return
+  }
+
+  const navTitle =
+    composition.title?.trim() || getDefaultPathname(composition.pathname)
+
+  if (!navTitle) {
+    return
+  }
+
+  interactionLink.triggers = [
+    {
+      type: "page-navigation",
+      settings: {
+        icon: "mdi-file-document-outline",
+        title: {
+          default: navTitle,
+        },
+        sortOrder: 0,
+        navigationBarType: "navItem",
+      },
+    },
+  ]
+}