@raclettejs/core 0.1.40 → 0.1.42

package/services/frontend/src/orchestrator/components/dataExport/DataExporter.vue

@@ -26,14 +26,23 @@
     <v-card rounded="lg" elevation="8" :style="{ width: '360px' }">
       <!-- Header -->
       <slot name="header" v-bind="headerSlotProps">
-        <div class="tw:flex tw:items-center tw:justify-between tw:px-4 tw:pt-4 tw:pb-2">
+        <div
+          class="tw:flex tw:items-center tw:justify-between tw:px-4 tw:pt-4 tw:pb-2"
+        >
           <div class="tw:flex tw:items-center tw:gap-2">
             <v-icon icon="mdi-export-variant" size="18" color="primary" />
-            <span class="tw:text-sm tw:font-semibold tw:tracking-wide tw:uppercase tw:opacity-70">
+            <span
+              class="tw:text-sm tw:font-semibold tw:tracking-wide tw:uppercase tw:opacity-70"
+            >
               {{ $t("core.dataExporter.title") }}
             </span>
           </div>
-          <v-btn icon="mdi-close" variant="text" size="x-small" @click="isOpen = false" />
+          <v-btn
+            icon="mdi-close"
+            variant="text"
+            size="x-small"
+            @click="isOpen = false"
+          />
         </div>
       </slot>
 
@@ -71,7 +80,12 @@
           <span class="tw:text-xs tw:opacity-60 tw:uppercase tw:tracking-wide">
             {{ $t("core.dataExporter.scopeLabel") }}
           </span>
-          <v-btn-toggle v-model="selectedScope" divided density="compact" mandatory>
+          <v-btn-toggle
+            v-model="selectedScope"
+            divided
+            density="compact"
+            mandatory
+          >
             <v-btn value="combined" size="x-small">
               {{ $t("core.dataExporter.scopeCombined") }}
             </v-btn>
@@ -86,9 +100,18 @@
       </div>
 
       <!-- No formats warning -->
-      <div v-if="resolvedFormats.length === 0" class="tw:px-4 tw:py-6 tw:text-center">
-        <v-icon icon="mdi-alert-circle-outline" color="warning" class="tw:mb-2" />
-        <p class="tw:text-sm tw:opacity-60">{{ $t("core.dataExporter.noValidFormats") }}</p>
+      <div
+        v-if="resolvedFormats.length === 0"
+        class="tw:px-4 tw:py-6 tw:text-center"
+      >
+        <v-icon
+          icon="mdi-alert-circle-outline"
+          color="warning"
+          class="tw:mb-2"
+        />
+        <p class="tw:text-sm tw:opacity-60">
+          {{ $t("core.dataExporter.noValidFormats") }}
+        </p>
       </div>
 
       <!-- Preview pane -->
@@ -98,7 +121,7 @@
           <v-btn
             variant="text"
             density="compact"
-            class="tw:mb-1.5 tw:w-full tw:justify-start tw:normal-case tw:text-xs tw:opacity-60 hover:tw:opacity-90"
+            class="tw:mb-1.5 tw:w-full tw:justify-start tw:normal-case tw:text-xs tw:opacity-60 tw:hover:opacity-90"
             @click="previewOpen = !previewOpen"
           >
             <template #prepend>
@@ -112,7 +135,13 @@
         </slot>
 
         <!-- Fixed-height container prevents width reflow when toggling -->
-        <div class="tw:overflow-hidden" :style="{ height: previewOpen ? 'auto' : '0px', minHeight: previewOpen ? '0px' : undefined }">
+        <div
+          class="tw:overflow-hidden"
+          :style="{
+            height: previewOpen ? 'auto' : '0px',
+            minHeight: previewOpen ? '0px' : undefined,
+          }"
+        >
           <v-expand-transition>
             <div v-show="previewOpen">
               <slot name="preview-content" v-bind="previewContentSlotProps">
@@ -124,7 +153,9 @@
                   density="compact"
                   class="tw:mb-2 tw:font-mono tw:text-xs"
                 >
-                  <pre class="tw:whitespace-pre-wrap tw:break-all">{{ serializeResult.error }}</pre>
+                  <pre class="tw:whitespace-pre-wrap tw:break-all">{{
+                    serializeResult.error
+                  }}</pre>
                 </v-alert>
 
                 <!-- Preview code block -->
@@ -136,7 +167,9 @@
                   <div
                     class="tw:flex tw:items-center tw:justify-between tw:px-3 tw:py-1.5 tw:bg-black/5 dark:tw:bg-white/5 tw:border-b tw:border-black/10 dark:tw:border-white/10"
                   >
-                    <span class="tw:font-mono tw:text-[10px] tw:uppercase tw:tracking-widest tw:opacity-50">
+                    <span
+                      class="tw:font-mono tw:text-[10px] tw:uppercase tw:tracking-widest tw:opacity-50"
+                    >
                       {{ activeFormatId }}
                     </span>
                     <span class="tw:font-mono tw:text-[10px] tw:opacity-40">
@@ -148,14 +181,19 @@
                   <!-- Code content -->
                   <pre
                     class="tw:text-xs tw:font-mono tw:p-3 tw:max-h-52 tw:overflow-auto tw:leading-relaxed tw:bg-black/[0.03] dark:tw:bg-white/[0.03] tw:m-0"
-                  >{{ previewLines.text }}</pre>
+                    >{{ previewLines.text }}</pre
+                  >
 
                   <!-- Truncation notice -->
                   <div
                     v-if="previewLines.truncated"
                     class="tw:text-[10px] tw:text-center tw:py-1 tw:opacity-40 tw:bg-black/5 dark:tw:bg-white/5 tw:border-t tw:border-black/10 dark:tw:border-white/10"
                   >
-                    {{ $t("core.dataExporter.previewTruncatedAt", { count: PREVIEW_LINE_LIMIT }) }}
+                    {{
+                      $t("core.dataExporter.previewTruncatedAt", {
+                        count: PREVIEW_LINE_LIMIT,
+                      })
+                    }}
                   </div>
                 </div>
               </slot>
@@ -169,21 +207,31 @@
             <v-btn
               v-if="clipboardSupported"
               :disabled="!serializeResult.ok"
-              :color="copyState === 'success' ? 'success' : copyState === 'error' ? 'error' : 'primary'"
+              :color="
+                copyState === 'success'
+                  ? 'success'
+                  : copyState === 'error'
+                    ? 'error'
+                    : 'primary'
+              "
               variant="tonal"
               size="small"
               class="tw:flex-1 tw:font-medium"
               :prepend-icon="
-                copyState === 'success' ? 'mdi-check'
-                : copyState === 'error' ? 'mdi-alert-circle'
-                : 'mdi-content-copy'
+                copyState === 'success'
+                  ? 'mdi-check'
+                  : copyState === 'error'
+                    ? 'mdi-alert-circle'
+                    : 'mdi-content-copy'
               "
               @click="copyToClipboard"
             >
               {{
-                copyState === "success" ? $t("core.dataExporter.copied")
-                : copyState === "error" ? $t("core.dataExporter.copyFailed")
-                : $t("core.dataExporter.copy")
+                copyState === "success"
+                  ? $t("core.dataExporter.copied")
+                  : copyState === "error"
+                    ? $t("core.dataExporter.copyFailed")
+                    : $t("core.dataExporter.copy")
               }}
             </v-btn>
             <v-btn
@@ -340,14 +388,21 @@ const actionsSlotProps = computed(() => ({
 
 const PREVIEW_LINE_LIMIT = 200
 
-const previewLines = computed<{ text: string; lineCount: number; truncated: boolean }>(() => {
-  if (!serializeResult.value.ok) return { text: "", lineCount: 0, truncated: false }
+const previewLines = computed<{
+  text: string
+  lineCount: number
+  truncated: boolean
+}>(() => {
+  if (!serializeResult.value.ok)
+    return { text: "", lineCount: 0, truncated: false }
   const lines = serializeResult.value.value.split("\n")
   const truncated = lines.length > PREVIEW_LINE_LIMIT
   return {
-    text: truncated ? lines.slice(0, PREVIEW_LINE_LIMIT).join("\n") : serializeResult.value.value,
+    text: truncated
+      ? lines.slice(0, PREVIEW_LINE_LIMIT).join("\n")
+      : serializeResult.value.value,
     lineCount: lines.length,
     truncated,
   }
 })
-</script>
+</script>

package/services/frontend/src/orchestrator/components/dataTable/BaseDataTable.vue

@@ -217,7 +217,7 @@
 
       <!-- Dynamic slots for custom column rendering -->
       <template v-for="slot in customSlots" :key="slot" #[slot]="slotProps">
-        <slot :name="slot" v-bind="slotProps" />
+        <slot :name="slot" v-bind="slotProps ?? {}" />
       </template>
 
       <!-- Actions column template -->
@@ -249,6 +249,16 @@
         <slot name="tfoot" v-bind="slotProps ?? {}" />
       </template>
 
+      <template v-if="slots['group-header']" #group-header="slotProps">
+        <slot
+          name="group-header"
+          v-bind="{
+            ...(slotProps ?? {}),
+            selectionActive: showSelectColumn,
+          }"
+        />
+      </template>
+
       <!-- Forward remaining v-data-table slots (e.g. bottom, thead). -->
       <template
         v-for="slotName in vDataTablePassthroughSlots"
@@ -694,20 +704,9 @@ const V_DATA_TABLE_BRIDGED_SLOTS = new Set([
   "body.prepend",
   "body.append",
   "tfoot",
+  "group-header",
 ])
 
-/** v-data-table slots supplied by the parent (e.g. bottom), excluding built-in handling. */
-const vDataTablePassthroughSlots = computed(() =>
-  Object.keys(slots).filter(
-    (name) =>
-      !BASE_DATA_TABLE_RESERVED_SLOTS.has(name) &&
-      !V_DATA_TABLE_BRIDGED_SLOTS.has(name) &&
-      !name.startsWith("item.") &&
-      name !== "loader" &&
-      name !== "top",
-  ),
-)
-
 /** Hide ⋮ when the menu would be empty (no export toggle, import, or slot content). */
 const showActionsOverflowMenu = computed(
   () =>
@@ -721,7 +720,8 @@ const showActionsOverflowMenu = computed(
 const hasSlotContent = (name: string) => {
   const slot = slots[name]
   if (!slot) return false
-  return slot().some((vnode) => {
+  // Scoped slots may destructure props; never probe-call them without a scope object.
+  return slot({}).some((vnode) => {
     if (vnode.type === Comment) return false
     if (typeof vnode.children === "string")
       return vnode.children.trim().length > 0
@@ -757,6 +757,19 @@ const isExportMode = ref(false)
 const showSelectColumn = computed(
   () => props.showSelect || (props.showExport && isExportMode.value),
 )
+
+/** v-data-table slots supplied by the parent (e.g. bottom), excluding built-in handling. */
+const vDataTablePassthroughSlots = computed(() =>
+  Object.keys(slots).filter(
+    (name) =>
+      !BASE_DATA_TABLE_RESERVED_SLOTS.has(name) &&
+      !V_DATA_TABLE_BRIDGED_SLOTS.has(name) &&
+      !name.startsWith("item.") &&
+      name !== "loader" &&
+      name !== "top",
+  ),
+)
+
 const isActionsMenuOpen = ref(false)
 const isFilterDrawerOpen = ref(false)
 /** Draft values edited in the filter drawer (applied only on Apply). */

package/services/frontend/src/orchestrator/components/dataTable/BaseDataTableGroupSelectCheckbox.vue

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+/**
+ * Group-row select checkbox for BaseDataTable when using a custom `#group-header` slot.
+ *
+ * Vuetify does not publicly export `useSelection` / `useGroupBy`, updates can break this
+ * TODO: we should find a further solution for this!
+ * the built-in group checkbox only appears on the default group header row. This component mirrors
+ * VDataTableGroupHeaderRow and must run inside `v-data-table` (inject context).
+ *
+ */
+import { computed } from "vue"
+import { useGroupBy } from "vuetify/lib/components/VDataTable/composables/group.js"
+import { useSelection } from "vuetify/lib/components/VDataTable/composables/select.js"
+
+const props = defineProps<{
+  group: { items?: readonly unknown[] }
+}>()
+
+const { isSelected, isSomeSelected, select } = useSelection()
+const { extractRows } = useGroupBy()
+
+const selectableRows = computed(() =>
+  extractRows([props.group]).filter((row) => row.selectable),
+)
+
+const modelValue = computed(
+  () => selectableRows.value.length > 0 && isSelected(selectableRows.value),
+)
+
+const indeterminate = computed(
+  () => isSomeSelected(selectableRows.value) && !modelValue.value,
+)
+</script>
+
+<template>
+  <v-checkbox-btn
+    :disabled="selectableRows.length === 0"
+    :model-value="modelValue"
+    :indeterminate="indeterminate"
+    @update:model-value="select(selectableRows, !!$event)"
+  />
+</template>

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

@@ -20,6 +20,7 @@ import ImportSelectionDialog from "./dataImport/ImportSelectionDialog.vue"
 import ImportSummaryDialog from "./dataImport/ImportSummaryDialog.vue"
 import BaseDataTable from "./dataTable/BaseDataTable.vue"
 import BaseDataTableConfirmDeleteBtn from "./dataTable/BaseDataTableConfirmDeleteBtn.vue"
+import BaseDataTableGroupSelectCheckbox from "./dataTable/BaseDataTableGroupSelectCheckbox.vue"
 import FileUpload from "./input/FileUpload.vue"
 
 export {
@@ -27,6 +28,7 @@ export {
   ImportSummaryDialog,
   BaseDataTable,
   BaseDataTableConfirmDeleteBtn,
+  BaseDataTableGroupSelectCheckbox,
   FileUpload,
   CompositionLoadingState,
   CompositionOverlay,

package/services/frontend/src/orchestrator/components/menu/ServerStatus.vue

@@ -1,6 +1,6 @@
 <template>
   <v-tooltip
-    content-class="!tw:p-1"
+    content-class="tw:!p-1"
     location="bottom"
     max-width="400px"
     v-model="show"
@@ -65,9 +65,7 @@ const theme = computed(() =>
   vuetifyTheme.global.name.value === "light" ? "dark" : "light",
 )
 
-const socketStatus = computed(
-  () => backend.value?.socket?.status ?? 2,
-)
+const socketStatus = computed(() => backend.value?.socket?.status ?? 2)
 
 const serverStatusLabel = computed(() =>
   i18n.t(`core.socket_status_${socketStatus.value || 0}`),

package/services/frontend/src/orchestrator/components/menu/UserMenu.vue

@@ -1,7 +1,7 @@
 <template>
   <v-menu :close-on-content-click="false" v-model="isOpen">
     <template #activator="{ props }">
-      <v-btn class="!tw:me-0" v-bind="props">
+      <v-btn class="tw:!me-0" v-bind="props">
         <v-avatar density="compact" color="primary" class="tw:mr-2">
           {{ avatar }}
         </v-avatar>

package/services/frontend/src/orchestrator/components/welcomeScreen/AdminWelcomeScreen.vue

@@ -57,7 +57,7 @@
     >
       <v-card
         variant="outlined"
-        class="tw:h-full tw:transition-all hover:tw:shadow-lg"
+        class="tw:h-full tw:transition-all tw:hover:shadow-lg"
       >
         <v-card-item>
           <template v-slot:prepend>

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

@@ -4,5 +4,6 @@ export * from "./useCurrentComposition"
 export * from "./useWidgets"
 export * from "./useInteractionLinks"
 export * from "./useWidgetLifecycle"
+export * from "./useAppLoadingCoordinator"
 export * from "./useExport"
 export * from "./useBaseDataTableDeleteConfirm"

package/services/frontend/src/orchestrator/composables/useAppLoadingCoordinator.ts

@@ -0,0 +1,77 @@
+import { computed, ref, watch, type Ref } from "vue"
+import { scheduleAfterPaint } from "@racletteCore/lib/scheduleTask"
+import useUiState from "./useUiState"
+
+/**
+ * Gates global `ui.loading` until socket bootstrap and page widget slots are ready.
+ * Owns page-loader remount session so readiness re-reports stay in sync with loading.
+ * Used only from `ProductOrchestrator`.
+ */
+export const useAppLoadingCoordinator = (
+  compositionId: Ref<string | undefined | null>,
+) => {
+  const { loading, bootstrapComplete } = useUiState()
+  const pageWidgetsReady = ref(false)
+  const pageLoaderSession = ref(0)
+
+  const armPageLoadingGate = () => {
+    pageLoaderSession.value++
+    pageWidgetsReady.value = false
+  }
+
+  const pageLoaderKey = computed(
+    () => `${compositionId.value ?? "none"}-s${pageLoaderSession.value}`,
+  )
+
+  const tryClearLoading = () => {
+    if (!loading.value) {
+      return
+    }
+    if (!bootstrapComplete.value || !pageWidgetsReady.value) {
+      return
+    }
+
+    scheduleAfterPaint(() => {
+      if (loading.value && bootstrapComplete.value && pageWidgetsReady.value) {
+        loading.value = false
+      }
+    })
+  }
+
+  const onPageWidgetsReady = (ready: boolean) => {
+    pageWidgetsReady.value = ready
+    tryClearLoading()
+  }
+
+  /** Welcome screen, 404, or layouts with nothing to wait for. */
+  const markPageReadyWithoutWidgets = () => {
+    onPageWidgetsReady(true)
+  }
+
+  watch(
+    bootstrapComplete,
+    (complete, wasComplete) => {
+      if (!complete) {
+        if (wasComplete) {
+          pageLoaderSession.value++
+        }
+        pageWidgetsReady.value = false
+        return
+      }
+      tryClearLoading()
+    },
+    { immediate: true },
+  )
+
+  watch(loading, (isLoading, wasLoading) => {
+    if (isLoading && wasLoading === false) {
+      armPageLoadingGate()
+    }
+  })
+
+  return {
+    pageLoaderKey,
+    onPageWidgetsReady,
+    markPageReadyWithoutWidgets,
+  }
+}

package/services/frontend/src/orchestrator/composables/usePageNavigation.ts

@@ -41,7 +41,7 @@ export default () => {
       interactionLink.triggers
 
         .sort(
-          (a, b) => (a.settings.sortOrder ?? 0) - (b.settings.sortOrder ?? 0),
+          (a, b) => (b.settings.sortOrder ?? 0) - (a.settings.sortOrder ?? 0),
         )
         .forEach((trigger) => {
           if (trigger.settings) {

package/services/frontend/src/orchestrator/composables/useUiState.ts

@@ -11,6 +11,7 @@ export default () => {
   const theme = createUiStateBinding<"light" | "dark">("theme")
   const mobile = createUiStateBinding<boolean>("mobile")
   const loading = createUiStateBinding<boolean>("loading")
+  const bootstrapComplete = createUiStateBinding<boolean>("bootstrapComplete")
   const landingPage = createUiStateBinding<string>("landingPage")
   const availableInterfaces = createUiStateBinding<
     UIState["availableInterfaces"]
@@ -22,6 +23,7 @@ export default () => {
     theme,
     mobile,
     loading,
+    bootstrapComplete,
     landingPage,
     availableInterfaces,
   }