@revenexx/studio-shared 0.4.0 → 0.4.2

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

@@ -0,0 +1,291 @@
+<script setup>
+import { AltArrowDown as ChevronDownIcon, AltArrowRight as ChevronIcon } from "#solar-icons";
+import { SIDEBAR_BEST_MATCH, sidebarItemIsCurrent, sidebarItemKey, sidebarItemTarget } from "../../lib/sidebarNav";
+import {
+  AREA_AIM_DELAY,
+  AREA_CLOSE_DELAY,
+  AREA_OPEN_DELAY,
+  inSafeTriangle,
+  sidebarAreaBlocks
+} from "../../lib/sidebarAreas";
+import SidebarNavLink from "./SidebarNavLink.vue";
+const props = defineProps({
+  sections: { type: Array, required: true }
+});
+const t = useT();
+const route = useRoute();
+const best = inject(SIDEBAR_BEST_MATCH, null);
+const blocks = computed(() => sidebarAreaBlocks(props.sections, route.fullPath, best?.value));
+const root = ref(null);
+const panel = ref(null);
+const openKey = ref(null);
+const pinned = ref(false);
+const rect = ref({ left: 0, top: 0, height: 0, width: 0 });
+const titleHeight = ref(0);
+const openSection = computed(
+  () => openKey.value ? props.sections.find((s) => s.key === openKey.value) ?? null : null
+);
+let openTimer;
+let aimTimer;
+let closeTimer;
+let apex = null;
+let last = null;
+function headRows(section) {
+  return section.label ? section.items.slice(0, 1) : section.items;
+}
+function isOneRow(block) {
+  return block.kind === "area" || !listsItems(block.section);
+}
+function blockIsCurrent(block) {
+  return block.kind === "section" && headRows(block.section).some((item) => headIsCurrent(block.section, item));
+}
+function listsItems(section) {
+  return !!section.label && (section.items.length > 1 || section.items[0]?.label !== section.label);
+}
+function headIsCurrent(section, item) {
+  if (listsItems(section)) return false;
+  return sidebarItemIsCurrent(item, route.fullPath, best?.value);
+}
+function clearTimers() {
+  clearTimeout(openTimer);
+  clearTimeout(aimTimer);
+  clearTimeout(closeTimer);
+}
+const shelf = ref(null);
+function measure() {
+  const aside = root.value?.closest("aside");
+  if (!aside) return;
+  shelf.value = aside.closest("[data-studio-shelf]");
+  const head = aside.firstElementChild;
+  titleHeight.value = head?.classList.contains("border-b") ? head.getBoundingClientRect().height : 0;
+  const r = aside.getBoundingClientRect();
+  const frame = shelf.value?.getBoundingClientRect() ?? r;
+  rect.value = { left: r.right + 1, top: frame.top, height: frame.height, width: r.width + 1 };
+}
+function open(key) {
+  measure();
+  openKey.value = key;
+}
+function close() {
+  clearTimers();
+  openKey.value = null;
+  pinned.value = false;
+  apex = null;
+}
+function panelEdge() {
+  if (!panel.value) return null;
+  const r = panel.value.getBoundingClientRect();
+  return [{ x: r.left, y: r.top }, { x: r.left, y: r.bottom }];
+}
+function aimingAtPanel(p) {
+  const edge = panelEdge();
+  return !!(apex && edge && inSafeTriangle(p, apex, edge[0], edge[1]));
+}
+function onMove(e) {
+  if (e.pointerType !== "mouse") return;
+  last = { x: e.clientX, y: e.clientY };
+  const row = e.target?.closest("[data-area]");
+  if (row && row.dataset.area === openKey.value || !openKey.value || !aimingAtPanel(last)) apex = last;
+}
+function onAreaEnter(key, e) {
+  if (e.pointerType !== "mouse") return;
+  clearTimers();
+  if (openKey.value === key) return;
+  if (openKey.value) {
+    if (aimingAtPanel({ x: e.clientX, y: e.clientY })) {
+      aimTimer = setTimeout(() => {
+        const under = last && document.elementFromPoint(last.x, last.y)?.closest("[data-area]");
+        if (under?.dataset.area === key) open(key);
+      }, AREA_AIM_DELAY);
+      return;
+    }
+    open(key);
+    return;
+  }
+  openTimer = setTimeout(() => open(key), AREA_OPEN_DELAY);
+}
+function onAreaLeave() {
+  clearTimeout(openTimer);
+}
+function onRowEnter(e) {
+  if (e.pointerType !== "mouse" || !openKey.value || pinned.value) return;
+  if (aimingAtPanel({ x: e.clientX, y: e.clientY })) return;
+  clearTimers();
+  closeTimer = setTimeout(close, 60);
+}
+function onLeave(e) {
+  if (e.pointerType !== "mouse" || pinned.value) return;
+  clearTimeout(openTimer);
+  if (!openKey.value) return;
+  const to = e.relatedTarget;
+  if (to && (panel.value?.contains(to) || root.value?.contains(to))) return;
+  closeTimer = setTimeout(close, AREA_CLOSE_DELAY);
+}
+function onEnterKeep() {
+  clearTimeout(closeTimer);
+  clearTimeout(aimTimer);
+}
+function onAreaClick(section) {
+  const target = section.items[0] && sidebarItemTarget(section.items[0]);
+  close();
+  if (target) void navigateTo(target);
+}
+function focusPanel() {
+  nextTick(() => panel.value?.querySelector("a")?.focus());
+}
+function onAreaKey(key, e) {
+  if (e.key === "ArrowRight") {
+    e.preventDefault();
+    pinned.value = true;
+    open(key);
+    focusPanel();
+  }
+}
+function onPanelKey(e) {
+  const links = [...panel.value?.querySelectorAll("a") ?? []];
+  const i = links.indexOf(document.activeElement);
+  if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+    e.preventDefault();
+    links[(i + (e.key === "ArrowDown" ? 1 : -1) + links.length) % links.length]?.focus();
+  } else if (e.key === "Escape" || e.key === "ArrowLeft") {
+    e.preventDefault();
+    const key = openKey.value;
+    close();
+    root.value?.querySelector(`[data-area="${key}"]`)?.focus();
+  }
+}
+function onDocDown(e) {
+  if (!openKey.value) return;
+  const t2 = e.target;
+  if (panel.value?.contains(t2) || root.value?.contains(t2)) return;
+  close();
+}
+function onDocKey(e) {
+  if (e.key === "Escape" && openKey.value) close();
+}
+watch(() => route.fullPath, close);
+onMounted(() => {
+  document.addEventListener("pointerdown", onDocDown);
+  document.addEventListener("keydown", onDocKey);
+  window.addEventListener("resize", measure);
+});
+onBeforeUnmount(() => {
+  clearTimers();
+  document.removeEventListener("pointerdown", onDocDown);
+  document.removeEventListener("keydown", onDocKey);
+  window.removeEventListener("resize", measure);
+});
+</script>
+
+<template>
+  <div ref="root" @pointermove="onMove" @pointerleave="onLeave" @pointerenter="onEnterKeep">
+    <!--
+      Every labelled section is one row with its icon in a tile (the node
+      palette of the Integration Studio, kept neutral). Hairlines divide the
+      sections. The route's section lists its entries under its row, flush;
+      every other row opens the panel on hover and its first page on click.
+      The open section sits on a faint violet wash between its hairlines, so
+      it stands out in the list; a one-row block takes the same wash on hover
+      (Michael 17.10.).
+    -->
+    <div
+      v-for="(block, i) in blocks"
+      :key="block.section.key"
+      class="flex flex-col gap-0.5 px-2 py-1"
+      :class="[
+  i > 0 ? 'border-t border-black/[0.06]' : '',
+  block.kind === 'section' && listsItems(block.section) ? 'rx-area-open bg-[#faf8ff]' : '',
+  openKey === block.section.key || blockIsCurrent(block) ? 'bg-[#faf8ff]' : '',
+  isOneRow(block) ? 'transition-colors hover:bg-[#faf8ff]' : ''
+]"
+      @pointerenter.capture="block.kind === 'section' ? onRowEnter($event) : void 0"
+    >
+      <template v-if="block.kind === 'section'">
+        <NuxtLink
+          v-for="item in headRows(block.section)"
+          :key="`h-${sidebarItemKey(item)}`"
+          :to="sidebarItemTarget(item)"
+          :data-nav-current="headIsCurrent(block.section, item) && !listsItems(block.section) || void 0"
+          class="group flex h-9 items-center gap-2.5 rounded-md px-2 text-sm font-medium text-[#0B0522] transition-colors"
+        >
+          <span
+            class="flex size-6 shrink-0 items-center justify-center rounded-md transition-colors"
+            :class="headIsCurrent(block.section, item) || listsItems(block.section) ? 'bg-primary/10 text-primary' : 'bg-black/[0.04] text-foreground/60 group-hover:bg-primary/10 group-hover:text-primary'"
+          >
+            <component :is="block.section.icon ?? item.icon" :size="14" />
+          </span>
+          <span class="min-w-0 flex-1 truncate">{{ block.section.label ?? item.label }}</span>
+          <!-- The open section points down at its entries; the others point right at their panel. -->
+          <ChevronDownIcon v-if="listsItems(block.section)" :size="12" weight="Bold" class="shrink-0 text-muted-foreground" />
+        </NuxtLink>
+        <template v-if="listsItems(block.section)">
+          <template v-for="item in block.section.items" :key="sidebarItemKey(item)">
+            <div v-if="item.heading" class="rx-area-heading">{{ item.heading }}</div>
+            <SidebarNavLink class="rx-area-item" :item="item" />
+          </template>
+        </template>
+      </template>
+      <button
+        v-else
+        type="button"
+        :data-area="block.section.key"
+        class="group flex h-9 w-full cursor-pointer items-center gap-2.5 rounded-md px-2 text-left text-sm font-medium text-[#0B0522]"
+        :aria-expanded="openKey === block.section.key"
+        aria-haspopup="true"
+        :aria-label="t('shared.nav.area.open', { section: block.section.label ?? '', count: block.section.items.length })"
+        @pointerenter="onAreaEnter(block.section.key, $event)"
+        @pointerleave="onAreaLeave"
+        @click="onAreaClick(block.section)"
+        @keydown="onAreaKey(block.section.key, $event)"
+      >
+        <span
+          class="flex size-6 shrink-0 items-center justify-center rounded-md transition-colors group-hover:bg-primary/10 group-hover:text-primary"
+          :class="openKey === block.section.key ? 'bg-primary/10 text-primary' : 'bg-black/[0.04] text-foreground/60'"
+        >
+          <component :is="block.section.icon" v-if="block.section.icon" :size="14" />
+        </span>
+        <span class="min-w-0 flex-1 truncate">{{ block.section.label }}</span>
+        <ChevronIcon :size="12" weight="Bold" class="shrink-0 group-hover:text-primary" :class="openKey === block.section.key ? 'text-primary' : 'text-muted-foreground'" />
+      </button>
+    </div>
+
+    <Teleport to="body">
+      <!--
+        The panel continues the shelf: its frame is the shelf's, the sidebar
+        pane's hairline runs down its left edge, and its title rule sits on the
+        sidebar's own. A soft shadow to the right lifts it off the page.
+        The shelf's frame is gray-400/10 over the lavender page, so it reads
+        as #eae9f3; the panel lies over the shelf's edge and would double that
+        tint, hence the solid colour.
+      -->
+      <div
+        v-if="openSection"
+        ref="panel"
+        role="menu"
+        :aria-label="openSection.label"
+        class="rx-area-panel fixed z-40 flex flex-col overflow-hidden rounded-r-lg border border-l-0 border-[#eae9f3] bg-white outline-1 outline-white/30 shadow-[16px_0_32px_-18px_rgb(42_29_97/0.28)]"
+        :style="{ left: `${rect.left}px`, top: `${rect.top}px`, height: `${rect.height}px`, width: `${rect.width}px` }"
+        @pointerenter="onEnterKeep"
+        @pointerleave="onLeave"
+        @keydown="onPanelKey"
+      >
+        <div class="flex shrink-0 items-center gap-2 border-b border-black/[0.06] px-4 pb-3 pt-4" :style="titleHeight ? { height: `${titleHeight}px` } : void 0">
+          <span v-if="openSection.icon" class="flex size-6 shrink-0 items-center justify-center rounded-md bg-primary/10 text-primary">
+            <component :is="openSection.icon" :size="14" />
+          </span>
+          <h2 class="min-w-0 flex-1 truncate text-lg font-medium text-[#0B0522]">{{ openSection.label }}</h2>
+        </div>
+        <div class="flex flex-1 flex-col gap-0.5 overflow-y-auto px-2 py-3">
+          <template v-for="item in openSection.items" :key="sidebarItemKey(item)">
+            <div v-if="item.heading" class="rx-area-heading">{{ item.heading }}</div>
+            <SidebarNavLink class="rx-area-item" :item="item" />
+          </template>
+        </div>
+      </div>
+    </Teleport>
+  </div>
+</template>
+
+<style scoped>
+.rx-area-item :deep(.rx-nav-icon){margin-inline:5px}.rx-area-heading{color:var(--muted-foreground,#6b6880);font-size:11px;font-weight:500;letter-spacing:.04em;padding:10px 8px 2px 42px;text-transform:uppercase}.rx-area-panel{animation:rx-area-in 90ms ease-out}@keyframes rx-area-in{0%{opacity:.4;transform:translateX(-4px)}to{opacity:1;transform:none}}@media (prefers-reduced-motion:reduce){.rx-area-panel{animation:none}}
+</style>

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

@@ -0,0 +1,7 @@
+import type { SidebarNavSection } from '../../types/nav.js';
+type __VLS_Props = {
+    sections: SidebarNavSection[];
+};
+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/SidebarNavLink.d.vue.ts

@@ -1,15 +1,7 @@
-/**
- * One row of a `SidebarNav` section — always exactly one link, never a group.
- *
- * An item's `children` are the **tabs of the page this row opens**, not rows
- * of their own (see `lib/sidebarNav.ts`), so there is nothing to expand here:
- * the row links to the item's route, or — for a pure container that nominates
- * no landing page — to its first tab, and stays highlighted while the route is
- * on any of them.
- */
 import type { SidebarNavItem } from '../../types/nav.js';
 type __VLS_Props = {
     item: SidebarNavItem;
+    collapsed?: boolean;
 };
 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;

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

@@ -1,12 +1,20 @@
 <script setup>
-import { sidebarItemIsCurrent, sidebarItemTarget } from "../../lib/sidebarNav";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@revenexx/studio";
+import { SIDEBAR_BEST_MATCH, sidebarItemIsCurrent, sidebarItemTarget } from "../../lib/sidebarNav";
 const props = defineProps({
-  item: { type: Object, required: true }
+  item: { type: Object, required: true },
+  collapsed: { type: Boolean, required: false }
 });
 const t = useT();
 const route = useRoute();
 const target = computed(() => sidebarItemTarget(props.item));
-const current = computed(() => sidebarItemIsCurrent(props.item, route.path));
+const best = inject(SIDEBAR_BEST_MATCH, null);
+const current = computed(() => sidebarItemIsCurrent(props.item, route.fullPath, best?.value));
+const iconRowClass = computed(() => [
+  "group relative flex size-9 items-center justify-center rounded-md transition-colors hover:text-primary",
+  current.value ? "bg-primary/10 text-[#0B0522]" : "text-foreground/70 hover:bg-primary/5",
+  props.item.preview ? "opacity-70" : ""
+]);
 const rowClass = computed(() => [
   "group flex w-full items-center gap-2.5 rounded-md px-2 py-1.5 text-sm transition-colors hover:text-primary",
   current.value ? "bg-primary/10 text-[#0B0522] font-medium" : "text-foreground/80 hover:bg-primary/5",
@@ -15,8 +23,26 @@ const rowClass = computed(() => [
 </script>
 
 <template>
-  <NuxtLink v-if="target" :to="target" :class="rowClass">
-    <component :is="item.icon" v-if="item.icon" :size="14" :stroke-width="2" class="shrink-0 text-foreground/60 group-hover:text-primary" />
+  <TooltipProvider v-if="target && collapsed" :delay-duration="200">
+    <Tooltip>
+      <TooltipTrigger as-child>
+        <NuxtLink :to="target" :class="iconRowClass" :data-nav-current="current || void 0" :aria-label="item.label">
+          <component :is="item.icon" v-if="item.icon" :size="18" :stroke-width="2" class="rx-nav-icon shrink-0" :class="current ? 'text-primary' : 'text-foreground/60 group-hover:text-primary'" />
+          <span v-else class="text-sm font-medium">{{ item.label.slice(0, 1) }}</span>
+          <span
+            v-if="item.badge !== null && item.badge !== void 0"
+            class="absolute right-1 top-1 size-1.5 rounded-full bg-primary"
+            aria-hidden="true"
+          />
+        </NuxtLink>
+      </TooltipTrigger>
+      <TooltipContent side="right" class="text-sm">
+        {{ item.label }}<template v-if="item.badge !== null && item.badge !== void 0 && item.badge !== 'dot'"> · {{ item.badge }}</template>
+      </TooltipContent>
+    </Tooltip>
+  </TooltipProvider>
+  <NuxtLink v-else-if="target" :to="target" :class="rowClass" :data-nav-current="current || void 0">
+    <component :is="item.icon" v-if="item.icon" :size="14" :stroke-width="2" class="rx-nav-icon shrink-0 text-foreground/60 group-hover:text-primary" />
     <span class="min-w-0 flex-1 truncate flex items-center gap-1.5">
       {{ item.label }}
       <span

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

@@ -1,15 +1,7 @@
-/**
- * One row of a `SidebarNav` section — always exactly one link, never a group.
- *
- * An item's `children` are the **tabs of the page this row opens**, not rows
- * of their own (see `lib/sidebarNav.ts`), so there is nothing to expand here:
- * the row links to the item's route, or — for a pure container that nominates
- * no landing page — to its first tab, and stays highlighted while the route is
- * on any of them.
- */
 import type { SidebarNavItem } from '../../types/nav.js';
 type __VLS_Props = {
     item: SidebarNavItem;
+    collapsed?: boolean;
 };
 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;

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

@@ -18,7 +18,7 @@ const sortIcon = computed(() => {
 <template>
   <button
     type="button"
-    class="group inline-flex min-w-0 max-w-full cursor-pointer items-center gap-1.5 -m-1 p-1 rounded-md text-left transition-colors hover:text-primary"
+    class="group inline-flex min-w-0 cursor-pointer items-center gap-1.5 -my-1 -ml-1 mr-1 p-1 rounded-md text-left transition-colors hover:text-primary"
     :class="alignRight ? 'flex-row-reverse w-full justify-end' : ''"
     @click="emit('toggle', column)"
   >
@@ -26,7 +26,11 @@ const sortIcon = computed(() => {
          and a heading longer than its column simply prints over the next one —
          "SortierungGeändert" on a category list, with no hint that two columns
          are involved. The cell carries the full text as its `title`. -->
-    <span class="min-w-0 truncate"><slot /></span>
+    <!-- Breaks only between words — „Kundennum-mer“ read as a typo (Re-QA
+         18.10.). The left margin pulls the hover ground out to the cell edge; the
+         right margin gives the 4px back, so a column sized to its content
+         counts the whole button and the sort icon stays inside it. -->
+    <span class="min-w-0 break-normal leading-tight"><slot /></span>
     <component
       :is="sortIcon"
       weight="Linear"

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

@@ -27,7 +27,7 @@ const tileClass = computed(
 
 <template>
   <Card class="bg-white/60 backdrop-blur-sm">
-    <CardHeader class="items-center text-center">
+    <CardHeader class="items-center justify-items-center text-center">
       <div
         class="flex size-12 items-center justify-center rounded-full mb-2"
         :class="tileClass"

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

@@ -23,9 +23,10 @@ function onKeydown(event, index) {
 <template>
   <!-- Sticks flush against the bottom of the sticky PageHeader (57px = its
        pt-4 pb-3 + text-xl line + 1px border) so header and tabs stay glued as
-       one unit while the panel scrolls. Glassy frosted bg (blur + low opacity)
-       lets content scroll through. -->
-  <div :class="sticky ? 'sticky top-[57px] z-10 bg-white/40 backdrop-blur-xl' : 'relative'">
+       one unit while the panel scrolls. Opaque in the shell's ground, like the
+       header — content scrolling through read as overlapping text
+       (customers-09). -->
+  <div :class="sticky ? 'sticky top-[57px] z-10 bg-[var(--color-shell,#f3f1fa)]' : 'relative'">
     <!-- Pull the row out by the tab padding so the first/last label sits flush
          with the surrounding content (headline) edges. -->
     <div class="relative z-10 -mx-2.5 flex gap-1 overflow-x-auto" role="tablist" :aria-label="label">
@@ -42,11 +43,9 @@ function onKeydown(event, index) {
         @click="emit('update:modelValue', t.key)"
         @keydown="onKeydown($event, index)"
       >
+        <!-- No counters in tabs (Michael 13.10.): only some tabs could carry
+             one, and a half-counted tab bar reads as inconsistent. -->
         {{ t.label }}
-        <span
-          v-if="t.badge"
-          class="ml-1 rounded-full bg-muted px-1.5 text-mono font-medium tabular-nums text-muted-foreground"
-        >{{ t.badge }}</span>
         <!-- 2px indicator, exactly under the label (inset-x-3 = px-3). -->
         <span
           class="pointer-events-none absolute inset-x-2.5 bottom-0 h-0.5 rounded-full transition-colors"

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

@@ -9,6 +9,15 @@ type __VLS_Props = {
     /** Gate the Next/Finish button for the current step. */
     canAdvance?: boolean;
     busy?: boolean;
+    /** Label of the last step's button — the surface's own verb ("Anlegen"). */
+    finishLabel?: string;
+    /** Extra class on the foot, e.g. `rx-dialog-foot` inside a modal (PE-1055). */
+    footerClass?: string;
+    /**
+     * Fill a fixed-height parent: the steps and the foot stay put, only the
+     * step's content scrolls (a stepped create dialog, Michael 18.10.).
+     */
+    fill?: boolean;
 };
 declare function back(): void;
 declare function next(): void;
@@ -36,8 +45,9 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {},
     "onUpdate:modelValue"?: ((args_0: number) => any) | undefined;
     onFinish?: (() => any) | undefined;
 }>, {
-    modelValue: number;
+    fill: boolean;
     busy: boolean;
+    modelValue: number;
     canAdvance: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

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

@@ -1,10 +1,14 @@
 <script setup>
+import { DIALOG_BODY_CLASS } from "../../lib/formLayout";
 import { Button } from "@revenexx/studio";
 const props = defineProps({
   steps: { type: Array, required: true },
   modelValue: { type: Number, required: false, default: 0 },
   canAdvance: { type: Boolean, required: false, default: true },
-  busy: { type: Boolean, required: false, default: false }
+  busy: { type: Boolean, required: false, default: false },
+  finishLabel: { type: String, required: false },
+  footerClass: { type: String, required: false },
+  fill: { type: Boolean, required: false, default: false }
 });
 const emit = defineEmits(["update:modelValue", "finish"]);
 const t = useT();
@@ -29,7 +33,7 @@ function goTo(i) {
 </script>
 
 <template>
-  <div class="space-y-5">
+  <div :class="fill ? 'flex min-h-0 flex-1 flex-col gap-5' : 'space-y-5'">
     <!-- Go-Live-style stepper: a fill bar + label per step, completed steps
          are clickable to jump back. -->
     <div class="flex gap-3">
@@ -46,11 +50,11 @@ function goTo(i) {
       </div>
     </div>
 
-    <div>
+    <div :class="fill ? DIALOG_BODY_CLASS : ''" data-testid="wizard-body">
       <slot :step="activeStep" :index="index" />
     </div>
 
-    <div class="flex items-center justify-between border-t pt-3">
+    <div class="flex shrink-0 items-center justify-between border-t pt-3" :class="footerClass">
       <!-- Custom footer (e.g. multiple finish actions on a review step). Falls
            back to the standard Back / Next·Finish pair. -->
       <slot name="footer" :back="back" :next="next" :is-first="isFirst" :is-last="isLast" :can-advance="canAdvance" :busy="busy" :index="index">
@@ -58,7 +62,7 @@ function goTo(i) {
           {{ t("shared.wizard.action.back") }}
         </Button>
         <Button :disabled="!canAdvance || busy" class="gap-1" @click="next">
-          {{ isLast ? t("shared.wizard.action.finish") : t("shared.wizard.action.next") }}
+          {{ isLast ? finishLabel || t("shared.wizard.action.finish") : t("shared.wizard.action.next") }}
         </Button>
       </slot>
     </div>

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

@@ -9,6 +9,15 @@ type __VLS_Props = {
     /** Gate the Next/Finish button for the current step. */
     canAdvance?: boolean;
     busy?: boolean;
+    /** Label of the last step's button — the surface's own verb ("Anlegen"). */
+    finishLabel?: string;
+    /** Extra class on the foot, e.g. `rx-dialog-foot` inside a modal (PE-1055). */
+    footerClass?: string;
+    /**
+     * Fill a fixed-height parent: the steps and the foot stay put, only the
+     * step's content scrolls (a stepped create dialog, Michael 18.10.).
+     */
+    fill?: boolean;
 };
 declare function back(): void;
 declare function next(): void;
@@ -36,8 +45,9 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {},
     "onUpdate:modelValue"?: ((args_0: number) => any) | undefined;
     onFinish?: (() => any) | undefined;
 }>, {
-    modelValue: number;
+    fill: boolean;
     busy: boolean;
+    modelValue: number;
     canAdvance: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/runtime/composables/useMediaLibrary.d.ts

@@ -37,5 +37,17 @@ export interface MediaLibraryClient {
     thumbnailUrl: (asset: StorageAsset, size?: number) => string | null;
     /** True while the asset is still being scanned/processed. */
     isProcessing: (asset: StorageAsset) => boolean;
+    /**
+     * Optional server-side narrowing (the cockpit's client has it): free-text
+     * search over name, title, alt text and tags; one kind; the sort key
+     * (`-created_at`, `original_name`, …); a reload of page 1; a reset. A host
+     * without them gets a picker without search, chips and sort.
+     */
+    search?: Ref<string>;
+    kind?: Ref<string | null>;
+    sortKey?: Ref<string>;
+    total?: Ref<number | null>;
+    loadAssets?: () => Promise<void>;
+    resetFilters?: () => void;
 }
 export declare function useMediaLibrary(): MediaLibraryClient;

package/dist/runtime/composables/useSavedViews.d.ts

@@ -28,12 +28,22 @@ export interface StoredSavedView {
     id: string;
     name: string;
     snapshot: unknown;
+    /** PE-1052: shared with everyone in the tenant. Private when absent. */
+    shared?: boolean;
+    /** Who shared it, for a view that is not the reader's own. */
+    ownerName?: string | null;
+    /** The reader's own view (may change and delete it). Absent = own. */
+    mine?: boolean;
+}
+export interface SaveViewOptions {
+    /** „Für alle im Mandanten freigeben“ (PE-1052). Default private. */
+    shared?: boolean;
 }
 export interface SavedViewsStore {
     /** Read this surface's views. Never throws — a failure is an empty list. */
     list: (surface: string) => Promise<StoredSavedView[]>;
     /** Save under a name, replacing what that name held. */
-    save: (surface: string, name: string, snapshot: unknown) => Promise<StoredSavedView>;
+    save: (surface: string, name: string, snapshot: unknown, options?: SaveViewOptions) => Promise<StoredSavedView>;
     remove: (surface: string, id: string) => Promise<void>;
     /**
      * Does this store survive a new browser? The menu says so in one line, so

package/dist/runtime/composables/useSavedViews.js

@@ -8,7 +8,7 @@ function readAll(surface) {
     if (!raw) return [];
     const parsed = JSON.parse(raw);
     if (!Array.isArray(parsed)) return [];
-    return parsed.filter((v) => !!v && typeof v === "object" && typeof v.name === "string").map((v) => ({ id: localId(surface, v.name), name: v.name, snapshot: v.snapshot }));
+    return parsed.filter((v) => !!v && typeof v === "object" && typeof v.name === "string").map((v) => ({ id: localId(surface, v.name), name: v.name, snapshot: v.snapshot, shared: v.shared === true }));
   } catch {
     return [];
   }
@@ -17,7 +17,7 @@ function writeAll(surface, views) {
   try {
     if (typeof window === "undefined") return;
     window.localStorage.setItem(surface, JSON.stringify(
-      views.map((v) => ({ name: v.name, snapshot: v.snapshot }))
+      views.map((v) => ({ name: v.name, snapshot: v.snapshot, ...v.shared ? { shared: true } : {} }))
     ));
   } catch {
   }
@@ -28,9 +28,9 @@ export function useSavedViews() {
     async list(surface) {
       return readAll(surface);
     },
-    async save(surface, name, snapshot) {
+    async save(surface, name, snapshot, options) {
       const views = readAll(surface);
-      const entry = { id: localId(surface, name), name, snapshot };
+      const entry = { id: localId(surface, name), name, snapshot, shared: options?.shared === true };
       const at = views.findIndex((v) => v.name === name);
       if (at >= 0) views.splice(at, 1, entry);
       else views.push(entry);

package/dist/runtime/composables/useWidgetFigures.d.ts

@@ -0,0 +1,12 @@
+import type { MaybeRefOrGetter, Ref } from 'vue';
+/** One figure as the widget shows it, already formatted. */
+export interface WidgetFigure {
+    label: string;
+    value: string;
+}
+/** Called by the frame: the figures its widget may provide. */
+export declare function provideWidgetFigures(): Ref<WidgetFigure[] | null>;
+/** Called by a widget: keep its frame's figures in step with `figures`. */
+export declare function useWidgetFigures(figures: MaybeRefOrGetter<WidgetFigure[] | null>): void;
+/** The figures as card text: one `label: value` line each. */
+export declare function figuresText(figures: WidgetFigure[] | null): string;