@raclettejs/core 0.0.1

package/services/frontend/src/orchestrator/assets/styles/themes/dark.ts

@@ -0,0 +1,39 @@
+/**
+ * dark theme
+ */
+export default {
+  background: "#212121",
+  surface: "#212121",
+  primary: "#148dbc",
+  "primary-darken-1": "#1279a2",
+  "primary-darken-2": "#106689",
+  "primary-darken-3": "#0e5470",
+  "primary-darken-4": "#0b4157",
+  "primary-darken-5": "#092f3f",
+  "primary-darken-6": "#061d26",
+  "primary-darken-7": "#040b0e",
+  "primary-lighten-1": "#1a9ed0",
+  "primary-lighten-2": "#27aee2",
+  "primary-lighten-3": "#4ebce7",
+  "primary-lighten-4": "#76caed",
+  "primary-lighten-5": "#9dd8f2",
+  "primary-lighten-6": "#c4e7f7",
+  "primary-lighten-7": "#ebf5fc",
+  secondary: "#03DAC6",
+  "secondary-darken-1": "#02b7a6",
+  "secondary-darken-2": "#029487",
+  error: "#FF5252",
+  info: "#42A5F5",
+  success: "#66BB6A",
+  warning: "#FFA726",
+  "surface-2": "#000",
+  "surface-3": "#333333",
+  "surface-4": "#666666",
+  "border-default": "#666666",
+  "signal-1": "#9aeba3",
+  "signal-2": "#dafdba",
+  "signal-3": "#a0c7d9",
+  "page-nav-bg": "#121212",
+  "page-nav-active": "#148dbc",
+  "footer-bg": "#212425",
+}

package/services/frontend/src/orchestrator/assets/styles/themes/highContrast.ts

@@ -0,0 +1,38 @@
+/**
+ * light theme
+ */
+export default {
+  background: "#000000",
+  surface: "#0A0A0A",
+  primary: "#00A9E0",
+  "primary-darken-1": "#0093C4",
+  "primary-darken-2": "#007DA8",
+  "primary-darken-3": "#00688C",
+  "primary-darken-4": "#005270",
+  "primary-darken-5": "#003D54",
+  "primary-darken-6": "#002838",
+  "primary-darken-7": "#00131C",
+  "primary-lighten-1": "#22B7E7",
+  "primary-lighten-2": "#44C4ED",
+  "primary-lighten-3": "#66D2F3",
+  "primary-lighten-4": "#88DFF8",
+  "primary-lighten-5": "#AAEDFD",
+  "primary-lighten-6": "#CCF6FE",
+  "primary-lighten-7": "#FFFFFF",
+  secondary: "#FF9E00",
+  "secondary-darken-1": "#D98500",
+  "secondary-darken-2": "#B36D00",
+  error: "#FF2929",
+  info: "#29B6FF",
+  success: "#1FE01F",
+  warning: "#FFBB00",
+  "surface-2": "#111111",
+  "surface-3": "#333333",
+  "surface-4": "#555555",
+  "border-default": "#FFFFFF",
+  "signal-1": "#00FF00",
+  "signal-2": "#FFFF00",
+  "signal-3": "#00FFFF",
+  "page-nav-bg": "#0A0A0A",
+  "page-nav-active": "#00A9E0",
+}

package/services/frontend/src/orchestrator/assets/styles/themes/light.ts

@@ -0,0 +1,39 @@
+/**
+ * light theme
+ */
+export default {
+  background: "#F4F4F4",
+  surface: "#F4F4F4",
+  primary: "#148dbc",
+  "primary-darken-1": "#107299",
+  "primary-darken-2": "#0d5b7a",
+  "primary-darken-3": "#0a455c",
+  "primary-darken-4": "#073a4d",
+  "primary-darken-5": "#05303e",
+  "primary-darken-6": "#042530",
+  "primary-darken-7": "#021921",
+  "primary-lighten-1": "#189ed3",
+  "primary-lighten-2": "#2eaee2",
+  "primary-lighten-3": "#51bde8",
+  "primary-lighten-4": "#75ccee",
+  "primary-lighten-5": "#98dbf3",
+  "primary-lighten-6": "#bce9f8",
+  "primary-lighten-7": "#dff8fd",
+  secondary: "#45c4b0",
+  "secondary-darken-1": "#38a190",
+  "secondary-darken-2": "#2b7b6d",
+  error: "#B00020",
+  info: "#2196F3",
+  success: "#4CAF50",
+  warning: "#FB8C00",
+  "surface-2": "#F4F4F4",
+  "surface-3": "#CCCCCC",
+  "surface-4": "#888888",
+  "border-default": "#CCC",
+  "signal-1": "#9aeba3",
+  "signal-2": "#dafdba",
+  "signal-3": "#a0c7d9",
+  "page-nav-bg": "#F4F4F4",
+  "page-nav-active": "#148dbc",
+  "footer-bg": "#E8EBE9",
+}

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

@@ -0,0 +1,5 @@
+@use "vuetify" with (
+  $utilities: false,
+  $reset: false
+);
+@use "@mdi/font/css/materialdesignicons.css";

package/services/frontend/src/orchestrator/components/ErrorWidgetState.vue

@@ -0,0 +1,87 @@
+<template>
+  <v-card class="tw:m-2 tw:border tw:border-red-300 tw:bg-red-50">
+    <v-card-title
+      class="tw:text-red-700 tw:text-base tw:font-semibold tw:flex tw:items-center tw:gap-2"
+    >
+      <v-icon color="red" size="small">mdi-alert-circle</v-icon>
+      Widget Load Error
+    </v-card-title>
+
+    <v-card-text class="tw:text-red-600">
+      <div class="tw:mb-2">There was an error while loading your widget</div>
+
+      <div v-if="!isDev" class="tw:text-sm tw:text-red-500">
+        Please contact support if this issue persists.
+      </div>
+
+      <div v-if="isDev" class="tw:space-y-3">
+        <div class="tw:text-sm">
+          <strong>Plugin:</strong> {{ pluginKey || "Unknown" }}<br />
+          <strong>Widget:</strong> {{ widgetName || "Unknown" }}<br />
+          <strong>UUID:</strong> {{ uuid || "Not provided" }}
+        </div>
+
+        <div v-if="error" class="tw:bg-red-100 tw:p-3 tw:rounded tw:text-xs">
+          <strong>Error:</strong>
+          <pre class="tw:mt-1 tw:whitespace-pre-wrap">{{ errorMessage }}</pre>
+        </div>
+
+        <div
+          v-if="stackTrace"
+          class="tw:bg-red-100 tw:p-3 tw:rounded tw:text-xs"
+        >
+          <strong>Stack Trace:</strong>
+          <pre
+            class="tw:mt-1 tw:whitespace-pre-wrap tw:max-h-32 tw:overflow-y-auto"
+            >{{ stackTrace }}</pre
+          >
+        </div>
+
+        <details v-if="props" class="tw:text-xs">
+          <summary class="tw:cursor-pointer tw:font-medium">Raw Props</summary>
+          <pre
+            class="tw:mt-2 tw:bg-red-100 tw:p-2 tw:rounded tw:whitespace-pre-wrap tw:max-h-32 tw:overflow-y-auto"
+            >{{ JSON.stringify(props, null, 2) }}</pre
+          >
+        </details>
+      </div>
+    </v-card-text>
+  </v-card>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue"
+import { isDevelopmentMode } from "@racletteCore/helpers/devMode"
+
+const props = defineProps<{
+  uuid?: string
+  pluginKey?: string
+  widgetName?: string
+  error?: Error
+}>()
+
+const isDev = computed(() => isDevelopmentMode())
+
+const errorMessage = computed(
+  () => props.error?.message || "Unknown error occurred",
+)
+
+const stackTrace = computed(() => {
+  if (!props.error?.stack) return null
+
+  const cleanedStack = props.error.stack
+    .split("\n")
+    .map((line) => line.replace(/\.vue\?t=\d+:\d+:\d+/g, ".vue"))
+    .filter(
+      (line) =>
+        line.includes(".vue") ||
+        line.includes("setup") ||
+        line.includes("render") ||
+        line.includes(props.widgetName || ""),
+    )
+    .slice(0, 5)
+    .join("\n")
+
+  return cleanedStack || props.error.stack
+})
+</script>

package/services/frontend/src/orchestrator/components/LoadingWidgetState.vue

@@ -0,0 +1,34 @@
+<template>
+  <div
+    class="tw:flex tw:items-center tw:justify-center tw:p-6 tw:min-h-[120px]"
+  >
+    <div class="tw:flex tw:flex-col tw:items-center tw:gap-3">
+      <!-- Subtle pulsing dot animation -->
+      <div class="tw:flex tw:gap-1">
+        <div
+          v-for="i in 3"
+          :key="i"
+          class="tw:w-2 tw:h-2 tw:bg-gray-400 tw:rounded-full tw:animate-pulse"
+          :style="{ 'animation-delay': `${(i - 1) * 0.2}s` }"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+@keyframes pulse {
+  0%,
+  80%,
+  100% {
+    opacity: 0.3;
+  }
+  40% {
+    opacity: 1;
+  }
+}
+
+.tw\\:animate-pulse {
+  animation: pulse 1.4s ease-in-out infinite;
+}
+</style>

package/services/frontend/src/orchestrator/components/authentication/LoginForm.vue

@@ -0,0 +1,80 @@
+<template>
+  <v-form
+    ref="loginForm"
+    class="tw:flex tw:flex-col tw:gap-6 tw:rounded-lg tw:border tw:border-solid tw:border-[#D9D9D9] tw:p-6 tw:text-black"
+    @submit.prevent="postLogin"
+  >
+    <div class="tw:flex tw:flex-col tw:gap-3">
+      <!-- e-mail -->
+      <div class="tw:flex tw:flex-col tw:gap-2">
+        <label for="e-mail-input">{{
+          $t("core.authentication.emailInput")
+        }}</label>
+        <v-text-field
+          id="e-mail-input"
+          ref="emailInput"
+          v-model="loginData.email"
+          class="login-text-field"
+          :counter="50"
+          :placeholder="$t('core.authentication.emailInputPlaceholder')"
+          variant="outlined"
+          clearable
+          required
+        >
+        </v-text-field>
+      </div>
+
+      <!-- password -->
+      <div class="tw:flex tw:flex-col tw:gap-2">
+        <label for="password-input">{{
+          $t("core.authentication.passwordInput")
+        }}</label>
+        <v-text-field
+          id="password-input"
+          v-model="loginData.password"
+          class="login-text-field"
+          :counter="50"
+          variant="outlined"
+          clearable
+          type="password"
+          :placeholder="$t('core.authentication.passwordInputPlaceholder')"
+          required
+        >
+        </v-text-field>
+      </div>
+    </div>
+
+    <!-- button -->
+    <input
+      type="submit"
+      :value="$t('core.authentication.loginButton')"
+      class="tw:rounded-lg tw:bg-[#2C2C2C] tw:p-3 tw:text-white tw:disabled:cursor-not-allowed tw:disabled:opacity-50"
+    />
+
+    <!-- forgot password -->
+    <v-btn
+      variant="text"
+      class="tw:text-black tw:underline"
+      @click="handlePasswordForgotten"
+      >{{ $t("core.authentication.forgotPasswordLink") }}</v-btn
+    >
+  </v-form>
+</template>
+
+<script setup lang="ts">
+import { userNotifier } from "@racletteCore/exports"
+import { reactive } from "vue"
+
+const emit = defineEmits<{ submit: [{ email: string; password: string }] }>()
+
+const loginData = reactive({
+  email: "",
+  password: "",
+})
+
+const postLogin = () => emit("submit", loginData)
+
+const handlePasswordForgotten = () => {
+  userNotifier.add("Please contact your admin to reset your password.")
+}
+</script>

package/services/frontend/src/orchestrator/components/chip/UserChip.vue

@@ -0,0 +1,46 @@
+<template>
+  <v-chip
+    v-if="user._source"
+    size="small"
+    :color="user ? user._source.color || 'grey' : 'grey'"
+  >
+    <v-avatar start color="indigo">
+      <v-img v-if="user._source.avatar" :src="user._source.avatar.file" />
+      <span v-else>
+        {{ userInitials }}
+      </span>
+    </v-avatar>
+    <span v-if="!props.compact"> {{ displayName }}</span>
+  </v-chip>
+</template>
+
+<script setup lang="ts">
+import useStateSubscriber from "@racletteOrchestrator/composables/useStateSubscriber"
+import { computed } from "vue"
+import { getValueFromNestedAttributeString } from "@racletteCore/lib/dataHelper"
+
+const props = withDefaults(
+  defineProps<{
+    userId: string
+    compact?: boolean
+    attribute?: string
+  }>(),
+  {
+    compact: false,
+    attribute: "_displayName",
+  },
+)
+
+const { state: user } = useStateSubscriber(["data", props.userId])
+
+const userInitials = computed(() => {
+  const firstnameInitial = user.value?._source?.firstname?.substring(0, 1)
+  const lastnameInitial = user.value?._source?.lastname?.substring(0, 1)
+
+  return `${firstnameInitial}${lastnameInitial}`
+})
+
+const displayName = computed(() =>
+  getValueFromNestedAttributeString(props.attribute, user.value),
+)
+</script>

package/services/frontend/src/orchestrator/components/composition/CompositionOverlay.vue

@@ -0,0 +1,21 @@
+<template>
+  <DefaultModal v-model="showModal">
+    <WidgetsLayoutLoader v-if="widgetsLayout" :widgets-layout="widgetsLayout" />
+  </DefaultModal>
+</template>
+
+<script setup lang="ts">
+import { DefaultModal, WidgetsLayoutLoader } from "@racletteOrchestrator"
+import useCurrentComposition from "@racletteOrchestrator/composables/useCurrentComposition"
+import { computed } from "vue"
+import useRouteState from "@racletteOrchestrator/composables/useRouteState"
+import { DEFAULT_MODAL_SLOT_NAME } from "@racletteOrchestrator/router/routeParserHelper"
+
+const { widgetsLayout } = useCurrentComposition(DEFAULT_MODAL_SLOT_NAME)
+const { removeSlot } = useRouteState()
+
+const showModal = computed({
+  get: () => !!widgetsLayout.value,
+  set: () => removeSlot(DEFAULT_MODAL_SLOT_NAME),
+})
+</script>

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

@@ -0,0 +1,109 @@
+<template>
+  <div>
+    <div class="tw:m-0 tw:h-full tw:p-0 tw:max-w-full">
+      <Transition
+        enter-active-class="tw:transition-opacity tw:duration-200 tw:ease-in-out"
+        leave-active-class="tw:transition-opacity tw:duration-200 tw:ease-in-out"
+        enter-from-class="tw:opacity-0"
+        leave-to-class="tw:opacity-0"
+        mode="out-in"
+        appear
+      >
+        <v-row :key="gridKey" no-gutters class="tw:max-w-full tw:self-start">
+          <v-col
+            v-for="(column, colIndex) in props.widgetsLayout"
+            :key="colIndex"
+            :cols="getGridCols(props.widgetsLayout.length)"
+          >
+            <v-row no-gutters>
+              <TransitionGroup
+                name="grid-item"
+                tag="div"
+                class="tw:w-full tw:flex tw:flex-wrap"
+                appear
+              >
+                <v-col
+                  v-for="(slot, slotIndex) in column"
+                  :key="`${gridKey}-${colIndex}-${slotIndex}`"
+                  class="tw:overflow-auto"
+                  :cols="getSlotCols(slot)"
+                  :style="{ 'transition-delay': `${slotIndex * 50}ms` }"
+                >
+                  <component
+                    v-if="slot.widget"
+                    :is="getSlotWidget(slot.widget)"
+                    :uuid="slot.widget.uuid"
+                    v-bind="{
+                      ...widgetStates[slot.widget.uuid].config,
+                      ...widgetStates[slot.widget.uuid].public,
+                      ...(slot?.widget?.props || {}),
+                      // TODO: handle route slot params here as well
+                    }"
+                  />
+                </v-col>
+              </TransitionGroup>
+            </v-row>
+          </v-col>
+        </v-row>
+      </Transition>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { watch, ref, h } from "vue"
+import { widgetLoader } from "@racletteOrchestrator/helpers/widgetLoader"
+import { useDisplay } from "vuetify"
+import useStateSubscriber from "@racletteOrchestrator/composables/useStateSubscriber"
+import type { Composition } from "@shared/types/core/Composition.types"
+import type { WidgetBase } from "@racletteCore/store/types"
+
+const props = defineProps<{
+  widgetsLayout: Composition["widgetsLayout"]
+}>()
+
+const { mdAndDown } = useDisplay()
+
+const { state: widgetStates } = useStateSubscriber("widgets")
+
+// Create a reactive key that changes when widgetsLayout changes
+const gridKey = ref(0)
+
+const getSlotWidget = (widget: WidgetBase) => {
+  try {
+    // Use enhanced widgetLoader that handles loading/error states internally
+    return widgetLoader(widget)
+  } catch (error) {
+    console.error("🚨 Error creating widget component:", error)
+
+    // Enhanced widgetLoader handles errors internally, so this shouldn't happen
+    // But keep as fallback
+    return {
+      name: "ComponentCreationError",
+      setup() {
+        return () =>
+          h(
+            "div",
+            {
+              class: "p-4 text-red-500 border border-red-300 rounded",
+            },
+            "Error creating component",
+          )
+      },
+    }
+  }
+}
+
+const getGridCols = (rowLength) => (mdAndDown.value ? 12 : 12 / rowLength)
+
+const getSlotCols = (slot) => (mdAndDown.value ? 12 : slot.column)
+
+// Watch for changes in widgetsLayout to trigger transition
+watch(
+  () => props.widgetsLayout,
+  () => {
+    gridKey.value++
+  },
+  { deep: true },
+)
+</script>

package/services/frontend/src/orchestrator/components/dragAndDrop/DraggableElement.vue

@@ -0,0 +1,86 @@
+<template>
+  <div
+    ref="rootElement"
+    :class="{
+      'tw:flex': showComponentHandle,
+    }"
+    data-draggable
+  >
+    <div v-if="showComponentHandle" ref="handleElement">
+      <v-icon class="tw:cursor-grab" icon="mdi-drag"></v-icon>
+    </div>
+
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+import useDragAndDrop, {
+  type DraggableConfig,
+} from "@racletteOrchestrator/composables/useDragAndDrop"
+import { computed, nextTick, onMounted, useTemplateRef } from "vue"
+
+const props = withDefaults(
+  defineProps<{
+    handle?: boolean
+    draggableConfig?: DraggableConfig
+  }>(),
+  {
+    draggableConfig: () => ({}) as DraggableConfig,
+  },
+)
+
+const rootElement = useTemplateRef("rootElement")
+const handleElement = useTemplateRef("handleElement")
+
+const { makeDraggable } = useDragAndDrop()
+
+const showComponentHandle = computed(
+  () => props.handle && !props.draggableConfig.handleElement,
+)
+
+onMounted(async () => {
+  await nextTick()
+  // extend config with the handleElement, if configured
+  const draggableConfig: DraggableConfig = {
+    ...(showComponentHandle.value
+      ? { handleElement: handleElement.value! }
+      : {}),
+    ...props.draggableConfig,
+  }
+
+  makeDraggable(rootElement.value!, draggableConfig)
+})
+</script>
+
+<style lang="scss">
+@keyframes wiggle {
+  0%,
+  100% {
+    transform: rotate(-3deg);
+  }
+  50% {
+    transform: rotate(3deg);
+  }
+}
+
+@keyframes wiggle-sm {
+  0%,
+  100% {
+    transform: rotate(-0.25deg);
+  }
+  50% {
+    transform: rotate(0.25deg);
+  }
+}
+
+.wiggle {
+  animation: wiggle 0.3s ease-in-out infinite;
+  will-change: transform;
+}
+
+.wiggle-sm {
+  animation: wiggle-sm 0.3s ease-in-out infinite;
+  will-change: transform;
+}
+</style>

package/services/frontend/src/orchestrator/components/dragAndDrop/DropzoneElement.vue

@@ -0,0 +1,36 @@
+<template>
+  <div
+    ref="rootElement"
+    :class="{
+      'tw:border tw:border-dashed tw:border-yellow-400': isDragging,
+      'tw:border-blue-200! ': isDragging && isDraggingInsideDropzone,
+    }"
+    data-dropzone
+  >
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+import useDragAndDrop, {
+  type DroppableConfig,
+} from "@racletteOrchestrator/composables/useDragAndDrop"
+import { nextTick, onMounted, useTemplateRef, type PropType } from "vue"
+
+const props = defineProps({
+  droppableConfig: {
+    type: Object as PropType<DroppableConfig>,
+    default: () => {},
+  },
+})
+
+const rootElement = useTemplateRef("rootElement")
+
+const { createDropzone, isDragging, isDraggingInsideDropzone } =
+  useDragAndDrop()
+
+onMounted(async () => {
+  await nextTick()
+  createDropzone(rootElement.value!, props.droppableConfig)
+})
+</script>

package/services/frontend/src/orchestrator/components/index.ts

@@ -0,0 +1,35 @@
+import CompositionOverlay from "./composition/CompositionOverlay.vue"
+import DefaultModal from "./modal/DefaultModal.vue"
+import DraggableElement from "./dragAndDrop/DraggableElement.vue"
+import DropzoneElement from "./dragAndDrop/DropzoneElement.vue"
+import ErrorWidgetState from "./ErrorWidgetState.vue"
+import LoadingWidgetState from "./LoadingWidgetState.vue"
+import LoginForm from "./authentication/LoginForm.vue"
+import PageNavigationSidebar from "./navigation/PageNavigationSidebar.vue"
+import ServerStatus from "./menu/ServerStatus.vue"
+import SimpleSearchInput from "./input/SimpleSearchInput.vue"
+import SnackStack from "./snackbar/SnackStack.vue"
+import TimeAgo from "./time/TimeAgo.vue"
+import UserChip from "./chip/UserChip.vue"
+import UserMenu from "./menu/UserMenu.vue"
+import UserNotifications from "./menu/UserNotifications.vue"
+import WidgetsLayoutLoader from "./composition/WidgetsLayoutLoader.vue"
+
+export {
+  CompositionOverlay,
+  DefaultModal,
+  DraggableElement,
+  DropzoneElement,
+  ErrorWidgetState,
+  LoadingWidgetState,
+  LoginForm,
+  PageNavigationSidebar,
+  ServerStatus,
+  SimpleSearchInput,
+  SnackStack,
+  TimeAgo,
+  UserChip,
+  UserMenu,
+  UserNotifications,
+  WidgetsLayoutLoader,
+}