@revenexx/studio-shared 0.3.3 → 0.4.1

package/dist/runtime/components/Shared/DetailSheet.vue

@@ -0,0 +1,211 @@
+<script setup>
+import { AltArrowDown, AltArrowLeft, AltArrowUp, CloseCircle } from "#solar-icons";
+import { Sheet, SheetContent, SheetTitle } from "@revenexx/studio";
+import { vSwipeClose } from "../../lib/swipeToClose";
+import { nextTick, onBeforeUnmount, onMounted, ref, watch } from "vue";
+import { isCloseKey, isRecordStepKey } from "../../lib/detailSheet";
+import { useT } from "../../composables/useT";
+const props = defineProps({
+  open: { type: Boolean, required: true },
+  label: { type: String, required: true },
+  busy: { type: Boolean, required: false, default: false },
+  width: { type: String, required: false, default: "440px" },
+  top: { type: String, required: false, default: "4rem" },
+  returnFocus: { type: Function, required: false, default: void 0 },
+  canStep: { type: Object, required: false, default: void 0 }
+});
+const emit = defineEmits(["update:open", "step"]);
+const t = useT();
+const WIDE = "(min-width: 1024px)";
+const wide = ref(false);
+let mql = null;
+const onMedia = (e) => {
+  wide.value = e.matches;
+};
+const panel = ref(null);
+let opener = null;
+function close() {
+  emit("update:open", false);
+}
+function stepBy(dir) {
+  if (props.canStep?.[dir < 0 ? "prev" : "next"]) emit("step", dir);
+}
+function restoreFocus() {
+  const target = props.returnFocus?.() ?? opener;
+  opener = null;
+  if (target?.isConnected) target.focus({ preventScroll: false });
+}
+watch(() => props.open, async (open, was) => {
+  if (open && !was) {
+    opener = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+    if (wide.value) {
+      await nextTick();
+      panel.value?.focus({ preventScroll: true });
+    }
+  } else if (!open && was && wide.value) {
+    await nextTick();
+    restoreFocus();
+  }
+});
+function onCloseAutoFocus(ev) {
+  ev.preventDefault();
+  restoreFocus();
+}
+function onKeydown(ev) {
+  if (!props.open) return;
+  if (wide.value && document.querySelector('[role="dialog"][data-state="open"], [role="alertdialog"][data-state="open"]')) return;
+  if (wide.value && isCloseKey(ev)) {
+    ev.preventDefault();
+    close();
+    return;
+  }
+  const dir = isRecordStepKey(ev);
+  if (dir !== null) {
+    ev.preventDefault();
+    emit("step", dir);
+  }
+}
+onMounted(() => {
+  mql = window.matchMedia(WIDE);
+  wide.value = mql.matches;
+  mql.addEventListener("change", onMedia);
+  document.addEventListener("keydown", onKeydown);
+});
+onBeforeUnmount(() => {
+  mql?.removeEventListener("change", onMedia);
+  document.removeEventListener("keydown", onKeydown);
+});
+</script>
+
+<template>
+  <!-- Slide-in from the right (≥ 1024 px), not modal ------------------- -->
+  <Teleport to="body">
+  <Transition
+    enter-active-class="motion-safe:transition-transform motion-safe:duration-200 motion-safe:ease-out"
+    enter-from-class="motion-safe:translate-x-[calc(100%+1rem)]"
+    leave-active-class="motion-safe:transition-transform motion-safe:duration-150 motion-safe:ease-in"
+    leave-to-class="motion-safe:translate-x-[calc(100%+1rem)]"
+  >
+    <aside
+      v-if="open && wide"
+      ref="panel"
+      role="region"
+      :aria-label="label"
+      tabindex="-1"
+      class="fixed bottom-3 right-3 z-40 flex flex-col overflow-hidden rounded-lg border border-black/[0.06] bg-white shadow-[0_8px_24px_rgba(11,5,34,0.12)] outline-none"
+      :style="{ width, top, maxWidth: 'calc(100vw - 1.5rem)' }"
+    >
+      <div class="shrink-0 border-b border-black/[0.06] p-4">
+        <div class="flex items-start gap-2">
+          <div class="min-w-0 flex-1">
+            <slot name="header" />
+          </div>
+          <template v-if="canStep">
+            <button
+              type="button"
+              class="flex size-8 shrink-0 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-muted hover:text-foreground aria-disabled:cursor-default aria-disabled:opacity-40 aria-disabled:hover:bg-transparent aria-disabled:hover:text-muted-foreground"
+              :aria-label="t('shared.detailsheet.action.previous')"
+              :title="t('shared.detailsheet.action.previous')"
+              aria-keyshortcuts="ArrowUp"
+              :aria-disabled="canStep.prev ? void 0 : 'true'"
+              @click="stepBy(-1)"
+            >
+              <AltArrowUp :size="18" weight="Bold" />
+            </button>
+            <button
+              type="button"
+              class="flex size-8 shrink-0 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-muted hover:text-foreground aria-disabled:cursor-default aria-disabled:opacity-40 aria-disabled:hover:bg-transparent aria-disabled:hover:text-muted-foreground"
+              :aria-label="t('shared.detailsheet.action.next')"
+              :title="t('shared.detailsheet.action.next')"
+              aria-keyshortcuts="ArrowDown"
+              :aria-disabled="canStep.next ? void 0 : 'true'"
+              @click="stepBy(1)"
+            >
+              <AltArrowDown :size="18" weight="Bold" />
+            </button>
+          </template>
+          <button
+            type="button"
+            class="flex size-8 shrink-0 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
+            :aria-label="t('shared.detailsheet.action.close')"
+            @click="close"
+          >
+            <CloseCircle :size="18" />
+          </button>
+        </div>
+        <div v-if="$slots.actions" class="mt-3 flex flex-wrap items-center gap-2">
+          <slot name="actions" layout="inline" />
+        </div>
+      </div>
+      <div class="min-h-0 flex-1 overflow-y-auto p-4" :aria-busy="busy ? 'true' : void 0">
+        <slot />
+      </div>
+      <span role="status" class="sr-only">{{ busy ? t("shared.detailsheet.state.loading") : "" }}</span>
+    </aside>
+  </Transition>
+  </Teleport>
+
+  <!-- Overlay (< 1024 px) ------------------------------------------------ -->
+  <Sheet v-if="!wide" :open="open" @update:open="(v) => {
+  if (!v) close();
+}">
+    <!-- The studio SheetContent draws its own close button, labelled in
+         English; ours sits in the header and speaks the host's language, so
+         that one is hidden. -->
+    <SheetContent
+      side="right"
+      :aria-describedby="undefined"
+      class="w-full gap-0 p-0 sm:max-w-md [&>button.absolute]:hidden motion-reduce:animate-none motion-reduce:transition-none"
+      @close-auto-focus="onCloseAutoFocus"
+    >
+      <div v-swipe-close="close" class="flex shrink-0 justify-center pt-2 md:hidden">
+        <span class="h-1.5 w-10 rounded-full bg-black/15" />
+      </div>
+      <SheetTitle class="sr-only">{{ label }}</SheetTitle>
+      <div class="flex shrink-0 items-start gap-2 border-b border-black/[0.06] p-3">
+        <button
+          type="button"
+          class="flex size-10 shrink-0 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
+          :aria-label="t('shared.detailsheet.action.back')"
+          @click="close"
+        >
+          <AltArrowLeft :size="20" weight="Bold" />
+        </button>
+        <div class="min-w-0 flex-1 self-center">
+          <slot name="header" />
+        </div>
+        <template v-if="canStep">
+          <button
+            type="button"
+            class="flex size-10 shrink-0 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-muted hover:text-foreground aria-disabled:cursor-default aria-disabled:opacity-40 aria-disabled:hover:bg-transparent aria-disabled:hover:text-muted-foreground"
+            :aria-label="t('shared.detailsheet.action.previous')"
+            :title="t('shared.detailsheet.action.previous')"
+            aria-keyshortcuts="ArrowUp"
+            :aria-disabled="canStep.prev ? void 0 : 'true'"
+            @click="stepBy(-1)"
+          >
+            <AltArrowUp :size="20" weight="Bold" />
+          </button>
+          <button
+            type="button"
+            class="flex size-10 shrink-0 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-muted hover:text-foreground aria-disabled:cursor-default aria-disabled:opacity-40 aria-disabled:hover:bg-transparent aria-disabled:hover:text-muted-foreground"
+            :aria-label="t('shared.detailsheet.action.next')"
+            :title="t('shared.detailsheet.action.next')"
+            aria-keyshortcuts="ArrowDown"
+            :aria-disabled="canStep.next ? void 0 : 'true'"
+            @click="stepBy(1)"
+          >
+            <AltArrowDown :size="20" weight="Bold" />
+          </button>
+        </template>
+      </div>
+      <div class="min-h-0 flex-1 overflow-y-auto p-4" :aria-busy="busy ? 'true' : void 0">
+        <slot />
+      </div>
+      <span role="status" class="sr-only">{{ busy ? t("shared.detailsheet.state.loading") : "" }}</span>
+      <div v-if="$slots.actions" class="flex shrink-0 items-center gap-2 border-t border-black/[0.06] bg-white p-3 pb-[max(0.75rem,env(safe-area-inset-bottom))]">
+        <slot name="actions" layout="bar" />
+      </div>
+    </SheetContent>
+  </Sheet>
+</template>

package/dist/runtime/components/Shared/DetailSheet.vue.d.ts

@@ -0,0 +1,60 @@
+type __VLS_Props = {
+    open: boolean;
+    /** Accessible name of the panel — normally the record's title. */
+    label: string;
+    /** The body is still fetching: `aria-busy` plus a spoken "loading". */
+    busy?: boolean;
+    /** Panel width in the wide layout. */
+    width?: string;
+    /** Distance from the viewport top in the wide layout — clears the top bar. */
+    top?: string;
+    /** Where focus goes on close. Defaults to the element focused at open. */
+    returnFocus?: () => HTMLElement | null | undefined;
+    /** Which neighbours exist — draws the previous/next buttons. Omit for none. */
+    canStep?: {
+        prev: boolean;
+        next: boolean;
+    };
+};
+declare var __VLS_13: {}, __VLS_30: {
+    layout: string;
+}, __VLS_32: {}, __VLS_61: {}, __VLS_73: {}, __VLS_75: {
+    layout: string;
+};
+type __VLS_Slots = {} & {
+    header?: (props: typeof __VLS_13) => any;
+} & {
+    actions?: (props: typeof __VLS_30) => any;
+} & {
+    default?: (props: typeof __VLS_32) => any;
+} & {
+    header?: (props: typeof __VLS_61) => any;
+} & {
+    default?: (props: typeof __VLS_73) => any;
+} & {
+    actions?: (props: typeof __VLS_75) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:open": (open: boolean) => any;
+    step: (dir: 1 | -1) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:open"?: ((open: boolean) => any) | undefined;
+    onStep?: ((dir: 1 | -1) => any) | undefined;
+}>, {
+    busy: boolean;
+    width: string;
+    top: string;
+    returnFocus: () => HTMLElement | null | undefined;
+    canStep: {
+        prev: boolean;
+        next: boolean;
+    };
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/Shared/EmptyNote.d.vue.ts

@@ -0,0 +1,19 @@
+type __VLS_Props = {
+    title?: string | null;
+    description?: string | null;
+    /** One paragraph, split into headline and subtitle at its first sentence. */
+    text?: string | null;
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/Shared/EmptyNote.vue

@@ -0,0 +1,25 @@
+<script setup>
+import { splitNotice } from "../../lib/notice";
+const props = defineProps({
+  title: { type: [String, null], required: false },
+  description: { type: [String, null], required: false },
+  text: { type: [String, null], required: false }
+});
+const parts = computed(() => {
+  if (props.title) return { title: props.title, description: props.description || null };
+  const split = splitNotice(props.text || props.description || "");
+  return { title: split.title, description: split.description };
+});
+</script>
+
+<template>
+  <div v-if="parts.title || parts.description" class="min-w-0 text-left" data-slot="empty-note">
+    <p v-if="parts.title" class="text-sm font-medium text-foreground">
+      {{ parts.title }}
+    </p>
+    <p v-if="parts.description" class="mt-0.5 text-xs text-muted-foreground">
+      {{ parts.description }}
+    </p>
+    <slot />
+  </div>
+</template>

package/dist/runtime/components/Shared/EmptyNote.vue.d.ts

@@ -0,0 +1,19 @@
+type __VLS_Props = {
+    title?: string | null;
+    description?: string | null;
+    /** One paragraph, split into headline and subtitle at its first sentence. */
+    text?: string | null;
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/Shared/FloatingPanel.d.vue.ts

@@ -34,19 +34,20 @@ type __VLS_Props = {
         placement: string;
     };
 };
-declare var __VLS_5: {}, __VLS_67: {}, __VLS_69: {};
+declare var __VLS_7: {}, __VLS_79: {}, __VLS_81: {};
 type __VLS_Slots = {} & {
-    'pill-icon'?: (props: typeof __VLS_5) => any;
+    'pill-icon'?: (props: typeof __VLS_7) => any;
 } & {
-    default?: (props: typeof __VLS_67) => any;
+    default?: (props: typeof __VLS_79) => any;
 } & {
-    footer?: (props: typeof __VLS_69) => any;
+    footer?: (props: typeof __VLS_81) => any;
 };
-declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     bottomClass: string;
     widthClass: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
 export default _default;
 type __VLS_WithSlots<T, S> = T & {
     new (): {

package/dist/runtime/components/Shared/FloatingPanel.vue.d.ts

@@ -34,19 +34,20 @@ type __VLS_Props = {
         placement: string;
     };
 };
-declare var __VLS_5: {}, __VLS_67: {}, __VLS_69: {};
+declare var __VLS_7: {}, __VLS_79: {}, __VLS_81: {};
 type __VLS_Slots = {} & {
-    'pill-icon'?: (props: typeof __VLS_5) => any;
+    'pill-icon'?: (props: typeof __VLS_7) => any;
 } & {
-    default?: (props: typeof __VLS_67) => any;
+    default?: (props: typeof __VLS_79) => any;
 } & {
-    footer?: (props: typeof __VLS_69) => any;
+    footer?: (props: typeof __VLS_81) => any;
 };
-declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     bottomClass: string;
     widthClass: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
 export default _default;
 type __VLS_WithSlots<T, S> = T & {
     new (): {

package/dist/runtime/components/Shared/GitDeploymentSettings.d.vue.ts

@@ -4,7 +4,7 @@ type __VLS_Props = {
     disabled?: boolean;
     showPreviews?: boolean;
 };
-declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:triggerMode": (value: string) => any;
     "update:previewsEnabled": (value: boolean) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
@@ -14,4 +14,5 @@ declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {
     disabled: boolean;
     showPreviews: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/Shared/GitDeploymentSettings.vue.d.ts

@@ -4,7 +4,7 @@ type __VLS_Props = {
     disabled?: boolean;
     showPreviews?: boolean;
 };
-declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:triggerMode": (value: string) => any;
     "update:previewsEnabled": (value: boolean) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
@@ -14,4 +14,5 @@ declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {
     disabled: boolean;
     showPreviews: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/Shared/KpiTile.d.vue.ts

@@ -7,7 +7,14 @@ type __VLS_Props = {
     up?: boolean;
     /** Muted line under the value (e.g. "vs last month"). */
     sub?: string;
+    /**
+     * Keep the sub line to one line and cut it with an ellipsis; the caller puts
+     * the full text in a tooltip (the Commerce tiles, Michael 19.10.: „kompakter,
+     * der Untertitel … bricht um“).
+     */
+    subOneLine?: boolean;
     to?: string;
 };
-declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/Shared/KpiTile.vue

@@ -7,26 +7,27 @@ defineProps({
   delta: { type: String, required: false },
   up: { type: Boolean, required: false },
   sub: { type: String, required: false },
+  subOneLine: { type: Boolean, required: false },
   to: { type: String, required: false }
 });
 </script>
 
 <template>
+  <!-- The home dashboard's KPI card (KpiStrip), shared: 2-layer glass, mono
+       caps label, big figure, change + note in one line, centred. The icon is
+       no longer drawn — the dashboard design has none (Michael 12.10.). -->
   <component
     :is="to ? NuxtLink : 'div'"
     :to="to"
     class="block rounded-lg border border-gray-400/10 outline-1 outline-white/30"
     :class="to ? 'transition-transform hover:-translate-y-0.5' : ''"
   >
-    <div class="relative h-full overflow-hidden rounded-lg bg-white p-4">
-      <div class="flex items-center justify-between gap-2">
-        <span class="text-xs text-muted-foreground truncate">{{ label }}</span>
-        <span v-if="icon" class="flex size-7 items-center justify-center rounded-md bg-primary/10 text-primary shrink-0"><component :is="icon" :size="14" /></span>
-      </div>
-      <div class="mt-1.5 text-2xl font-semibold leading-none tabular-nums text-[#0B0522]">{{ value }}</div>
-      <div v-if="delta || sub" class="mt-1.5 text-xs">
-        <span v-if="delta" class="font-medium tabular-nums" :class="up ? 'text-emerald-600' : 'text-rose-600'">{{ delta }}</span>
-        <span v-if="sub" class="text-muted-foreground" :class="delta ? 'ml-1' : ''">{{ sub }}</span>
+    <div class="relative flex h-full flex-col justify-start overflow-hidden rounded-lg bg-white p-4">
+      <div class="text-mono line-clamp-2 leading-[1.4] text-muted-foreground">{{ label }}</div>
+      <div class="mt-1 truncate text-2xl font-semibold tabular-nums text-[#0B0522]">{{ value }}</div>
+      <div v-if="delta || sub" class="mt-1 flex min-w-0 items-start gap-1 text-sm">
+        <span v-if="delta" class="shrink-0 font-medium tabular-nums" :class="up ? 'text-emerald-600' : 'text-rose-600'">{{ delta }}</span>
+        <span v-if="sub" class="text-muted-foreground" :class="subOneLine ? 'min-w-0 truncate' : 'line-clamp-2'">{{ delta ? "\xB7 " : "" }}{{ sub }}</span>
       </div>
     </div>
   </component>

package/dist/runtime/components/Shared/KpiTile.vue.d.ts

@@ -7,7 +7,14 @@ type __VLS_Props = {
     up?: boolean;
     /** Muted line under the value (e.g. "vs last month"). */
     sub?: string;
+    /**
+     * Keep the sub line to one line and cut it with an ellipsis; the caller puts
+     * the full text in a tooltip (the Commerce tiles, Michael 19.10.: „kompakter,
+     * der Untertitel … bricht um“).
+     */
+    subOneLine?: boolean;
     to?: string;
 };
-declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/Shared/ListSurface.d.vue.ts

@@ -24,12 +24,13 @@ type __VLS_Slots = {} & {
 } & {
     aside?: (props: typeof __VLS_5) => any;
 };
-declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     railOpen: boolean;
     railWidth: string;
     asideWidth: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
 export default _default;
 type __VLS_WithSlots<T, S> = T & {
     new (): {

package/dist/runtime/components/Shared/ListSurface.vue.d.ts

@@ -24,12 +24,13 @@ type __VLS_Slots = {} & {
 } & {
     aside?: (props: typeof __VLS_5) => any;
 };
-declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     railOpen: boolean;
     railWidth: string;
     asideWidth: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
 export default _default;
 type __VLS_WithSlots<T, S> = T & {
     new (): {

package/dist/runtime/components/Shared/PageHeader.d.vue.ts

@@ -5,16 +5,17 @@ type __VLS_Props = {
     title: string;
     description?: string;
 };
-declare var __VLS_5: {}, __VLS_7: {}, __VLS_9: {};
+declare var __VLS_6: {}, __VLS_8: {}, __VLS_10: {};
 type __VLS_Slots = {} & {
-    title?: (props: typeof __VLS_5) => any;
+    title?: (props: typeof __VLS_6) => any;
 } & {
-    actions?: (props: typeof __VLS_7) => any;
+    actions?: (props: typeof __VLS_8) => any;
 } & {
-    tabs?: (props: typeof __VLS_9) => any;
+    tabs?: (props: typeof __VLS_10) => any;
 };
-declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
 export default _default;
 type __VLS_WithSlots<T, S> = T & {
     new (): {

package/dist/runtime/components/Shared/PageHeader.vue

@@ -7,8 +7,14 @@ defineProps({
 </script>
 
 <template>
-  <div class="sticky top-0 z-20 border-b border-black/[0.06] bg-white/40 backdrop-blur-xl">
-    <div class="flex items-center gap-2 px-4 pt-4 pb-3">
+  <!-- Opaque, in the shell's ground: a see-through header let the record's
+       content run visibly behind its title on scroll (customers-09; tried
+       translucent again 13.10., dropped). The fallback keeps it opaque in a
+       host that defines no shell token. -->
+  <div class="sticky top-0 z-20 border-b border-black/[0.06] bg-[var(--color-shell,#f3f1fa)]">
+    <!-- Phone: the title keeps its own row and the actions wrap below it
+         (R3/R5) instead of squeezing the title to nothing. -->
+    <div class="flex min-h-14 items-center gap-2 px-4 pt-4 pb-3" data-rx-header-row>
       <component
         :is="icon"
         v-if="icon"
@@ -16,13 +22,18 @@ defineProps({
         :stroke-width="2"
         class="shrink-0 text-foreground/70"
       />
-      <h1 class="text-xl font-medium text-[#0B0522] truncate">
+      <h1 class="min-w-0 text-xl font-medium text-[#0B0522] truncate">
         <slot name="title">{{ title }}</slot>
       </h1>
 
       <div class="flex-1" />
 
-      <slot name="actions" />
+      <!-- One rhythm for every page: 8px between buttons, and the 32px
+           buttons tucked into the 28px title line so the header's hairline
+           meets the sidebar's whatever a page puts here (Michael 13.10.). -->
+      <div v-if="$slots.actions" class="-my-0.5 flex shrink-0 items-center gap-2">
+        <slot name="actions" />
+      </div>
     </div>
 
     <div v-if="$slots.tabs" class="flex items-center gap-1 px-3 pb-2 overflow-x-auto">

package/dist/runtime/components/Shared/PageHeader.vue.d.ts

@@ -5,16 +5,17 @@ type __VLS_Props = {
     title: string;
     description?: string;
 };
-declare var __VLS_5: {}, __VLS_7: {}, __VLS_9: {};
+declare var __VLS_6: {}, __VLS_8: {}, __VLS_10: {};
 type __VLS_Slots = {} & {
-    title?: (props: typeof __VLS_5) => any;
+    title?: (props: typeof __VLS_6) => any;
 } & {
-    actions?: (props: typeof __VLS_7) => any;
+    actions?: (props: typeof __VLS_8) => any;
 } & {
-    tabs?: (props: typeof __VLS_9) => any;
+    tabs?: (props: typeof __VLS_10) => any;
 };
-declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
 export default _default;
 type __VLS_WithSlots<T, S> = T & {
     new (): {