sprintify-ui 0.12.23 → 0.12.24

package/dist/tailwindcss/theme.js

@@ -1,6 +1,15 @@
 export default {
     extend: {
         spacing: {
+            // Measured height of the layout's sticky top header (system
+            // alerts + navbar). Kept in sync by the BaseLayout* components
+            // through the --app-header-height CSS variable. Use for anything
+            // that must clear the header: sticky offsets, scroll margins,
+            // 100vh math.
+            header: 'var(--app-header-height, 0px)',
+            // Header plus the standard content gap, for sticky elements and
+            // scroll targets that should sit just below the header.
+            'below-header': 'calc(var(--app-header-height, 0px) + 1.25rem)',
             'control-xs': '1.65rem',
             'control-sm': '2rem',
             'control-md': '2.5rem',

package/dist/types/composables/layoutHeaderHeight.d.ts

@@ -0,0 +1,33 @@
+import type { Ref, StyleValue } from 'vue';
+/**
+ * The layout's sticky top header (system alerts + navbar) overlaps page
+ * content when it scrolls, so anything sticky or scroll-anchored inside the
+ * layout needs to know its rendered height. That height cannot be hardcoded:
+ * the navbar row depends on the layout `size` prop, and system alerts stack
+ * above it dynamically.
+ *
+ * The layout components measure their own header element and publish the
+ * height two ways:
+ *
+ * - The `--app-header-height` CSS variable, bound on the layout's content
+ *   wrapper — for Tailwind/CSS (`top-header`, `scroll-mt-below-header`, ...,
+ *   see the tailwindcss plugin's spacing tokens).
+ * - A provided reactive ref, read with `useLayoutHeaderHeight()` — for
+ *   scripts (scrollspy root margins, canvas math, ...).
+ */
+export declare const LAYOUT_HEADER_HEIGHT_CSS_VARIABLE = "--app-header-height";
+/**
+ * Internal — called once by each layout component (BaseLayoutSidebar,
+ * BaseLayoutStacked) with a template ref to its sticky header element.
+ * Returns the reactive height and a style binding carrying the CSS variable,
+ * to spread on the element that wraps the layout's page content.
+ */
+export declare function provideLayoutHeaderHeight(headerElement: Ref<HTMLElement | null>): {
+    headerHeight: Readonly<Ref<number>>;
+    headerHeightStyle: Readonly<Ref<StyleValue>>;
+};
+/**
+ * The rendered height (px) of the layout's sticky top header. Zero when used
+ * outside a layout component.
+ */
+export declare function useLayoutHeaderHeight(): Readonly<Ref<number>>;

package/dist/types/index.d.ts

@@ -4,6 +4,7 @@ import { useDialogsStore } from './stores/dialogs';
 import { useSnackbarsStore } from './stores/snackbars';
 import { useSystemAlertStore } from './stores/systemAlerts';
 import { useClickOutside } from './composables/clickOutside';
+import { LAYOUT_HEADER_HEIGHT_CSS_VARIABLE, useLayoutHeaderHeight } from './composables/layoutHeaderHeight';
 import { useField } from './composables/field';
 declare const messages: {
     en: {
@@ -269,5 +270,7 @@ export { useDialogsStore };
 export { useSnackbarsStore };
 export { useSystemAlertStore };
 export { useClickOutside };
+export { useLayoutHeaderHeight };
+export { LAYOUT_HEADER_HEIGHT_CSS_VARIABLE };
 export { useField };
 export { SettingsStorage };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sprintify-ui",
-  "version": "0.12.23",
+  "version": "0.12.24",
   "type": "module",
   "scripts": {
     "generate-llm-txt": "node scripts/generate-llm-txt.js",

package/src/components/BaseLayoutSidebar.vue

@@ -1,5 +1,8 @@
 <template>
-  <div class="min-h-full base-layout-sidebar">
+  <div
+    class="min-h-full base-layout-sidebar"
+    :style="headerHeightStyle"
+  >
     <TransitionRoot
       as="template"
       :show="showMobileMenu"
@@ -95,7 +98,10 @@
       class="flex flex-col min-h-full || xl:print:pl-0"
       :class="[collapsed ? 'xl:pl-14' : 'xl:pl-64']"  
     >
-      <div class="sticky top-0 left-0 z-10 shadow shrink-0 || print:hidden">
+      <div
+        ref="headerElement"
+        class="sticky top-0 left-0 z-10 shadow shrink-0 || print:hidden"
+      >
         <BaseSystemAlert
           v-for="systemAlert in systemAlerts"
           :key="systemAlert.id"
@@ -205,6 +211,7 @@ import {
   TransitionRoot,
 } from '@headlessui/vue';
 import { config } from '@/index';
+import { provideLayoutHeaderHeight } from '../composables/layoutHeaderHeight';
 import { useSystemAlertStore } from '../stores/systemAlerts';
 import { Icon as BaseIcon } from '@iconify/vue';
 import BaseSystemAlert from './BaseSystemAlert.vue';
@@ -243,6 +250,15 @@ const systemAlerts = computed(() => {
   return systemAlertStore.systemAlerts;
 });
 
+/**
+ * Header height (sticky system alerts + navbar), published as a CSS variable
+ * and via useLayoutHeaderHeight().
+ */
+
+const headerElement = ref<HTMLElement | null>(null);
+
+const { headerHeightStyle } = provideLayoutHeaderHeight(headerElement);
+
 /**
  * Show/Hide sidebar
  */

package/src/components/BaseLayoutStacked.vue

@@ -1,5 +1,8 @@
 <template>
-  <div :class="classInternal">
+  <div
+    ref="headerElement"
+    :class="classInternal"
+  >
     <BaseSystemAlert
       v-for="systemAlert in systemAlerts"
       :key="systemAlert.id"
@@ -33,13 +36,14 @@
     </BaseNavbar>
   </div>
 
-  <div>
+  <div :style="headerHeightStyle">
     <slot />
   </div>
 </template>
 
 <script lang="ts" setup>
 import { twMerge } from 'tailwind-merge';
+import { provideLayoutHeaderHeight } from '../composables/layoutHeaderHeight';
 import { useSystemAlertStore } from '../stores/systemAlerts';
 import BaseNavbar from './BaseNavbar.vue';
 import BaseSystemAlert from './BaseSystemAlert.vue';
@@ -75,4 +79,13 @@ const systemAlertStore = useSystemAlertStore();
 const systemAlerts = computed(() => {
   return systemAlertStore.systemAlerts;
 });
+
+/**
+ * Header height (sticky system alerts + navbar), published as a CSS variable
+ * and via useLayoutHeaderHeight().
+ */
+
+const headerElement = ref<HTMLElement | null>(null);
+
+const { headerHeightStyle } = provideLayoutHeaderHeight(headerElement);
 </script>

package/src/composables/layoutHeaderHeight.ts

@@ -0,0 +1,87 @@
+import type { InjectionKey, Ref, StyleValue } from 'vue';
+
+/**
+ * The layout's sticky top header (system alerts + navbar) overlaps page
+ * content when it scrolls, so anything sticky or scroll-anchored inside the
+ * layout needs to know its rendered height. That height cannot be hardcoded:
+ * the navbar row depends on the layout `size` prop, and system alerts stack
+ * above it dynamically.
+ *
+ * The layout components measure their own header element and publish the
+ * height two ways:
+ *
+ * - The `--app-header-height` CSS variable, bound on the layout's content
+ *   wrapper — for Tailwind/CSS (`top-header`, `scroll-mt-below-header`, ...,
+ *   see the tailwindcss plugin's spacing tokens).
+ * - A provided reactive ref, read with `useLayoutHeaderHeight()` — for
+ *   scripts (scrollspy root margins, canvas math, ...).
+ */
+
+export const LAYOUT_HEADER_HEIGHT_CSS_VARIABLE = '--app-header-height';
+
+const layoutHeaderHeightKey: InjectionKey<Readonly<Ref<number>>> = Symbol(
+  'layoutHeaderHeight'
+);
+
+/**
+ * Internal — called once by each layout component (BaseLayoutSidebar,
+ * BaseLayoutStacked) with a template ref to its sticky header element.
+ * Returns the reactive height and a style binding carrying the CSS variable,
+ * to spread on the element that wraps the layout's page content.
+ */
+export function provideLayoutHeaderHeight(
+  headerElement: Ref<HTMLElement | null>
+): {
+  headerHeight: Readonly<Ref<number>>;
+  headerHeightStyle: Readonly<Ref<StyleValue>>;
+} {
+  const height = ref(0);
+
+  let observer: ResizeObserver | null = null;
+
+  watch(
+    headerElement,
+    (element) => {
+      observer?.disconnect();
+      observer = null;
+
+      if (!element) {
+        height.value = 0;
+
+        return;
+      }
+
+      observer = new ResizeObserver(() => {
+        height.value = element.getBoundingClientRect().height;
+      });
+
+      observer.observe(element);
+
+      height.value = element.getBoundingClientRect().height;
+    },
+    { immediate: true }
+  );
+
+  onBeforeUnmount(() => {
+    observer?.disconnect();
+    observer = null;
+  });
+
+  const headerHeight = readonly(height);
+
+  provide(layoutHeaderHeightKey, headerHeight);
+
+  const headerHeightStyle = computed<StyleValue>(() => ({
+    [LAYOUT_HEADER_HEIGHT_CSS_VARIABLE]: `${height.value}px`,
+  }));
+
+  return { headerHeight, headerHeightStyle };
+}
+
+/**
+ * The rendered height (px) of the layout's sticky top header. Zero when used
+ * outside a layout component.
+ */
+export function useLayoutHeaderHeight(): Readonly<Ref<number>> {
+  return inject(layoutHeaderHeightKey, readonly(ref(0)));
+}

package/src/index.ts

@@ -8,6 +8,10 @@ import { useDialogsStore } from './stores/dialogs';
 import { useSnackbarsStore } from './stores/snackbars';
 import { useSystemAlertStore } from './stores/systemAlerts';
 import { useClickOutside } from './composables/clickOutside';
+import {
+  LAYOUT_HEADER_HEIGHT_CSS_VARIABLE,
+  useLayoutHeaderHeight,
+} from './composables/layoutHeaderHeight';
 import { useField } from './composables/field';
 
 const messages = { en, fr };
@@ -134,5 +138,7 @@ export { useDialogsStore };
 export { useSnackbarsStore };
 export { useSystemAlertStore };
 export { useClickOutside };
+export { useLayoutHeaderHeight };
+export { LAYOUT_HEADER_HEIGHT_CSS_VARIABLE };
 export { useField };
 export { SettingsStorage };