@revenexx/studio-shared 0.4.0 → 0.4.1

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/KpiTile.d.vue.ts

@@ -7,6 +7,12 @@ 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 __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>;

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,6 +7,12 @@ 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 __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>;

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/RecordLayout.vue

@@ -37,8 +37,7 @@ const narrowOpen = ref(props.railOpenOnNarrow);
         <AltArrowDown
           :size="14"
           class="shrink-0 transition-transform"
-          :class="narrowOpen ? 'rotate-180' : ''"
-        />
+          :class="narrowOpen ? 'rotate-180' : ''" weight="Bold" />
       </button>
 
       <div :class="narrowOpen ? 'space-y-3' : 'hidden space-y-3 xl:block'">

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

@@ -5,12 +5,12 @@ defineProps({
 </script>
 
 <template>
-  <section class="overflow-hidden rounded-lg border border-gray-400/10 bg-white/60 outline-1 outline-white/30 backdrop-blur-sm">
+  <section class="rx-card">
     <div
       v-if="title || $slots.actions"
-      class="flex items-center justify-between gap-2 border-b border-black/[0.06] px-4 py-2.5"
+      class="flex items-center justify-between gap-2 rx-card-head px-4"
     >
-      <h3 class="truncate text-xs font-semibold uppercase tracking-wide text-muted-foreground">
+      <h3 class="truncate text-sm font-semibold text-[#0B0522]">
         {{ title }}
       </h3>
       <slot name="actions" />

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

@@ -0,0 +1,22 @@
+type __VLS_Props = {
+    /** How many are picked; 0 hides the box. */
+    count: number;
+    busy?: boolean;
+};
+declare var __VLS_15: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_15) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    clear: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClear?: (() => any) | undefined;
+}>, {}, {}, {}, {}, 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/SelectionBar.vue

@@ -0,0 +1,40 @@
+<script setup>
+import { Button } from "@revenexx/studio";
+import { useT } from "../../composables/useT";
+const props = defineProps({
+  count: { type: Number, required: true },
+  busy: { type: Boolean, required: false }
+});
+const emit = defineEmits(["clear"]);
+const t = useT();
+</script>
+
+<template>
+  <Transition
+    enter-active-class="transition duration-150 ease-out"
+    enter-from-class="translate-y-2 opacity-0"
+    leave-active-class="transition duration-100 ease-in"
+    leave-to-class="translate-y-2 opacity-0"
+  >
+    <div
+      v-if="props.count > 0"
+      class="pointer-events-none sticky bottom-[max(1rem,env(safe-area-inset-bottom))] z-20 -mt-14 flex justify-center px-2"
+      data-test="selection-bar"
+    >
+      <div
+        role="region"
+        :aria-label="t('shared.selection.label')"
+        class="pointer-events-auto flex max-w-full flex-wrap items-center gap-2 rounded-lg border border-black/[0.06] bg-white px-3 py-2 shadow-[0_8px_24px_rgba(11,5,34,0.14)]"
+      >
+        <span class="px-1 text-sm font-medium tabular-nums text-[#0B0522]" aria-live="polite">
+          {{ t("shared.selection.count", { n: props.count }, props.count) }}
+        </span>
+        <Button variant="ghost" size="sm" :disabled="busy" data-test="selection-clear" @click="emit('clear')">
+          {{ t("shared.selection.clear") }}
+        </Button>
+        <span v-if="$slots.default" class="hidden h-5 w-px bg-black/[0.08] sm:block" aria-hidden="true" />
+        <slot />
+      </div>
+    </div>
+  </Transition>
+</template>

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

@@ -0,0 +1,22 @@
+type __VLS_Props = {
+    /** How many are picked; 0 hides the box. */
+    count: number;
+    busy?: boolean;
+};
+declare var __VLS_15: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_15) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    clear: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClear?: (() => any) | undefined;
+}>, {}, {}, {}, {}, 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/SidebarNav.d.vue.ts

@@ -22,13 +22,47 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
     sections: SidebarNavSection[];
     /** Hide the header icon and use a lighter header title weight. */
     minimal?: boolean;
-}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
+    /**
+     * Icon-only rail (tablet / small laptop, R2): rows shrink to their icon
+     * with the label as tooltip, section labels become hairlines.
+     */
+    collapsed?: boolean;
+    /** Show the collapse/expand toggle in the header. */
+    collapsible?: boolean;
+    /** Drop the header row (the mobile drawer brings its own). */
+    hideHeader?: boolean;
+    /**
+     * Area mode: only the route's section shows its rows, the others are one
+     * row each that lays a panel next to the sidebar (`SidebarNavAreas`). The
+     * icon rail and the drawer keep the full list.
+     */
+    areas?: boolean;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    toggle: () => any;
+}, string, import("vue").PublicProps, Readonly<{
     title: string;
     icon?: Component;
     sections: SidebarNavSection[];
     /** Hide the header icon and use a lighter header title weight. */
     minimal?: boolean;
-}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    /**
+     * Icon-only rail (tablet / small laptop, R2): rows shrink to their icon
+     * with the label as tooltip, section labels become hairlines.
+     */
+    collapsed?: boolean;
+    /** Show the collapse/expand toggle in the header. */
+    collapsible?: boolean;
+    /** Drop the header row (the mobile drawer brings its own). */
+    hideHeader?: boolean;
+    /**
+     * Area mode: only the route's section shows its rows, the others are one
+     * row each that lays a panel next to the sidebar (`SidebarNavAreas`). The
+     * icon rail and the drawer keep the full list.
+     */
+    areas?: boolean;
+}> & Readonly<{
+    onToggle?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
     icon?: (props: {}) => any;
 } & {
     top?: (props: {}) => any;

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

@@ -3,46 +3,92 @@
 </script>
 
 <script setup>
-import { sidebarItemKey } from "../../lib/sidebarNav";
+import { SidebarMinimalistic as CollapseIcon } from "#solar-icons";
+import { SIDEBAR_BEST_MATCH, sidebarBestMatch, sidebarItemKey } from "../../lib/sidebarNav";
 import SidebarNavLink from "./SidebarNavLink.vue";
-defineProps({
+import SidebarNavAreas from "./SidebarNavAreas.vue";
+const props = defineProps({
   title: { type: String, required: true },
   icon: { type: null, required: false },
   sections: { type: Array, required: true },
-  minimal: { type: Boolean, required: false }
+  minimal: { type: Boolean, required: false },
+  collapsed: { type: Boolean, required: false },
+  collapsible: { type: Boolean, required: false },
+  hideHeader: { type: Boolean, required: false },
+  areas: { type: Boolean, required: false }
 });
+const emit = defineEmits(["toggle"]);
+const areaMode = computed(() => !!props.areas && !props.collapsed && !props.hideHeader);
+const t = useT();
+const scroller = ref(null);
+const route = useRoute();
+function revealCurrent() {
+  nextTick(() => {
+    const row = scroller.value?.querySelector("[data-nav-current]");
+    row?.scrollIntoView({ block: "nearest" });
+  });
+}
+provide(SIDEBAR_BEST_MATCH, computed(() => sidebarBestMatch(props.sections, route.fullPath)));
+onMounted(revealCurrent);
+watch(() => [route.fullPath, props.sections], revealCurrent);
 </script>
 
 <template>
   <aside class="h-full flex flex-col">
-    <div class="flex items-center gap-2 px-4 pt-4 pb-3 shrink-0 border-b border-black/[0.06]">
-      <slot v-if="!minimal" name="icon">
-        <component :is="icon" v-if="icon" :size="18" :stroke-width="2" class="text-foreground/70 shrink-0" />
-      </slot>
-      <h2 class="text-lg text-[#0B0522] truncate" :class="minimal ? 'font-medium' : 'font-semibold'">
-        {{ title }}
-      </h2>
+    <div
+      v-if="!hideHeader"
+      class="flex items-center gap-2 pt-4 pb-3 shrink-0 border-b border-black/[0.06]"
+      :class="collapsed ? 'justify-center px-2' : 'px-4'"
+    >
+      <template v-if="!collapsed">
+        <slot v-if="!minimal" name="icon">
+          <component :is="icon" v-if="icon" :size="18" :stroke-width="2" class="text-foreground/70 shrink-0" />
+        </slot>
+        <h2 class="min-w-0 flex-1 text-lg text-[#0B0522] truncate" :class="minimal ? 'font-medium' : 'font-semibold'">
+          {{ title }}
+        </h2>
+      </template>
+      <button
+        v-if="collapsible"
+        type="button"
+        class="flex size-7 shrink-0 items-center justify-center rounded-md text-foreground/60 transition-colors hover:bg-primary/5 hover:text-primary"
+        :title="collapsed ? t('shared.nav.action.expand') : t('shared.nav.action.collapse')"
+        :aria-label="collapsed ? t('shared.nav.action.expand') : t('shared.nav.action.collapse')"
+        :aria-expanded="!collapsed"
+        @click="emit('toggle')"
+      >
+        <CollapseIcon :size="16" :class="collapsed ? 'rotate-180' : ''" />
+      </button>
     </div>
 
-    <div class="flex-1 overflow-y-auto pt-3 pb-3">
-      <slot name="top" />
+    <!-- Area mode spaces its own blocks (py-1 between hairlines), so the first
+         row sits as far below the title rule as above the next hairline. -->
+    <div ref="scroller" class="flex-1 overflow-y-auto pb-3" :class="areaMode ? '' : 'pt-3'">
+      <slot v-if="!collapsed" name="top" />
 
-      <template v-for="section in sections" :key="section.key">
-        <div v-if="section.label" class="mt-3 px-4 pb-1">
-          <div class="text-mono text-muted-foreground">
-            {{ section.label }}
+      <SidebarNavAreas v-if="areaMode" :sections="sections" />
+      <template v-else>
+        <template v-for="(section, i) in sections" :key="section.key">
+          <template v-if="collapsed">
+            <div v-if="i > 0" class="mx-3 my-2 border-t border-black/[0.06]" />
+          </template>
+          <div v-else-if="section.label" class="mt-3 px-4 pb-1">
+            <div class="text-mono text-muted-foreground">
+              {{ section.label }}
+            </div>
           </div>
-        </div>
-        <nav class="flex flex-col gap-0.5 px-2">
-          <SidebarNavLink
-            v-for="item in section.items"
-            :key="sidebarItemKey(item)"
-            :item="item"
-          />
-        </nav>
+          <nav class="flex flex-col gap-0.5" :class="collapsed ? 'items-center px-1.5' : 'px-2'">
+            <template v-for="item in section.items" :key="sidebarItemKey(item)">
+              <div v-if="item.heading && !collapsed" class="px-2 pb-0.5 pt-2 text-mono text-muted-foreground">
+                {{ item.heading }}
+              </div>
+              <SidebarNavLink :item="item" :collapsed="collapsed" />
+            </template>
+          </nav>
+        </template>
       </template>
 
-      <slot name="notice" />
+      <slot v-if="!collapsed" name="notice" />
     </div>
   </aside>
 </template>

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

@@ -22,13 +22,47 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
     sections: SidebarNavSection[];
     /** Hide the header icon and use a lighter header title weight. */
     minimal?: boolean;
-}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
+    /**
+     * Icon-only rail (tablet / small laptop, R2): rows shrink to their icon
+     * with the label as tooltip, section labels become hairlines.
+     */
+    collapsed?: boolean;
+    /** Show the collapse/expand toggle in the header. */
+    collapsible?: boolean;
+    /** Drop the header row (the mobile drawer brings its own). */
+    hideHeader?: boolean;
+    /**
+     * Area mode: only the route's section shows its rows, the others are one
+     * row each that lays a panel next to the sidebar (`SidebarNavAreas`). The
+     * icon rail and the drawer keep the full list.
+     */
+    areas?: boolean;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    toggle: () => any;
+}, string, import("vue").PublicProps, Readonly<{
     title: string;
     icon?: Component;
     sections: SidebarNavSection[];
     /** Hide the header icon and use a lighter header title weight. */
     minimal?: boolean;
-}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    /**
+     * Icon-only rail (tablet / small laptop, R2): rows shrink to their icon
+     * with the label as tooltip, section labels become hairlines.
+     */
+    collapsed?: boolean;
+    /** Show the collapse/expand toggle in the header. */
+    collapsible?: boolean;
+    /** Drop the header row (the mobile drawer brings its own). */
+    hideHeader?: boolean;
+    /**
+     * Area mode: only the route's section shows its rows, the others are one
+     * row each that lays a panel next to the sidebar (`SidebarNavAreas`). The
+     * icon rail and the drawer keep the full list.
+     */
+    areas?: boolean;
+}> & Readonly<{
+    onToggle?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
     icon?: (props: {}) => any;
 } & {
     top?: (props: {}) => any;

package/dist/runtime/components/Shared/SidebarNavAreas.d.vue.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;