@revenexx/studio-shared 0.3.3 → 0.4.1

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

@@ -22,28 +22,29 @@ type __VLS_Props = {
     /** Start the narrow-width disclosure expanded (initial value only). */
     railOpenOnNarrow?: boolean;
 };
-declare var __VLS_1: {}, __VLS_7: {}, __VLS_9: {}, __VLS_18: {};
+declare var __VLS_1: {}, __VLS_8: {}, __VLS_10: {}, __VLS_19: {};
 type __VLS_Slots = {} & {
     'rail-head'?: (props: typeof __VLS_1) => any;
 } & {
-    rail?: (props: typeof __VLS_7) => any;
+    rail?: (props: typeof __VLS_8) => any;
 } & {
-    tabs?: (props: typeof __VLS_9) => any;
+    tabs?: (props: typeof __VLS_10) => any;
 } & {
-    default?: (props: typeof __VLS_18) => any;
+    default?: (props: typeof __VLS_19) => any;
 };
-declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (key: string) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     "onUpdate:modelValue"?: ((key: string) => any) | undefined;
 }>, {
     modelValue: string;
+    stickyOffset: number;
     railWidth: string;
     tabs: RecordTab[];
-    stickyOffset: number;
     railOpenOnNarrow: boolean;
 }, {}, {}, {}, 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/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/RecordLayout.vue.d.ts

@@ -22,28 +22,29 @@ type __VLS_Props = {
     /** Start the narrow-width disclosure expanded (initial value only). */
     railOpenOnNarrow?: boolean;
 };
-declare var __VLS_1: {}, __VLS_7: {}, __VLS_9: {}, __VLS_18: {};
+declare var __VLS_1: {}, __VLS_8: {}, __VLS_10: {}, __VLS_19: {};
 type __VLS_Slots = {} & {
     'rail-head'?: (props: typeof __VLS_1) => any;
 } & {
-    rail?: (props: typeof __VLS_7) => any;
+    rail?: (props: typeof __VLS_8) => any;
 } & {
-    tabs?: (props: typeof __VLS_9) => any;
+    tabs?: (props: typeof __VLS_10) => any;
 } & {
-    default?: (props: typeof __VLS_18) => any;
+    default?: (props: typeof __VLS_19) => any;
 };
-declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (key: string) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     "onUpdate:modelValue"?: ((key: string) => any) | undefined;
 }>, {
     modelValue: string;
+    stickyOffset: number;
     railWidth: string;
     tabs: RecordTab[];
-    stickyOffset: number;
     railOpenOnNarrow: boolean;
 }, {}, {}, {}, 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/RecordRailCard.d.vue.ts

@@ -16,8 +16,9 @@ type __VLS_Slots = {} & {
 } & {
     default?: (props: typeof __VLS_3) => 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/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/RecordRailCard.vue.d.ts

@@ -16,8 +16,9 @@ type __VLS_Slots = {} & {
 } & {
     default?: (props: typeof __VLS_3) => 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/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

@@ -14,26 +14,61 @@
 import type { Component } from 'vue';
 import type { SidebarNavSection } from '../../types/nav.js';
 export type { SidebarNavItem, SidebarNavSection } from '../../types/nav.js';
-declare const _default: __VLS_WithSlots<import("vue").DefineComponent<{
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
     title: string;
     icon?: Component;
     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;
 } & {
     notice?: (props: {}) => any;
 }>;
-export default _default;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

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

@@ -14,26 +14,61 @@
 import type { Component } from 'vue';
 import type { SidebarNavSection } from '../../types/nav.js';
 export type { SidebarNavItem, SidebarNavSection } from '../../types/nav.js';
-declare const _default: __VLS_WithSlots<import("vue").DefineComponent<{
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
     title: string;
     icon?: Component;
     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;
 } & {
     notice?: (props: {}) => any;
 }>;
-export default _default;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

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;