sprintify-ui 0.12.22 → 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.22",
+  "version": "0.12.24",
   "type": "module",
   "scripts": {
     "generate-llm-txt": "node scripts/generate-llm-txt.js",

package/src/components/BaseBadge.vue

@@ -43,25 +43,20 @@ const props = withDefaults(
 );
 
 const colorStyle = computed((): Record<string, string> => {
-  try {
-    const config = getColorConfig(props.color, props.contrast == 'high');
-
-    const styles: Record<string, string> = {
-      backgroundColor: config.backgroundColor,
-      color: config.textColor,
-    };
-
-    if (props.bordered) {
-      styles.borderColor = config.borderColor;
-      styles.borderWidth = '1px';
-      styles.borderStyle = 'solid';
-    }
-
-    return styles;
-  } catch {
-    console.warn(`[BaseBadge] "${props.color}" is not a valid color.`);
-    return {};
+  const config = getColorConfig(props.color, props.contrast == 'high');
+
+  const styles: Record<string, string> = {
+    backgroundColor: config.backgroundColor,
+    color: config.textColor,
+  };
+
+  if (props.bordered) {
+    styles.borderColor = config.borderColor;
+    styles.borderWidth = '1px';
+    styles.borderStyle = 'solid';
   }
+
+  return styles;
 });
 
 const sizeInternal = computed(() => {

package/src/components/BaseButton.vue

@@ -207,19 +207,15 @@ const classes = computed(() => {
 
 const styles = computed(() => {
   if (props.color && !(props.color in colors)) {
-    try {
-      const config = getColorConfig(props.color);
-
-      return {
-        backgroundColor: config.backgroundColor,
-        color: config.textColor,
-        borderColor: config.borderColor,
-        borderWidth: '1px',
-        borderStyle: 'solid',
-      };
-    } catch {
-      console.warn(`[BaseButton] "${props.color}" is not a valid color.`);
-    }
+    const config = getColorConfig(props.color);
+
+    return {
+      backgroundColor: config.backgroundColor,
+      color: config.textColor,
+      borderColor: config.borderColor,
+      borderWidth: '1px',
+      borderStyle: 'solid',
+    };
   }
 
   return {};

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 };

package/src/utils/colors.ts

@@ -211,7 +211,7 @@ const colorNames = {
 } as Record<string, string>;
 
 export function getColorConfig(color: string, contrast = false): ColorConfig {
-
+  const originalColor = color;
   color = colorNames[color] || color;
 
   const colorConfig = palette[color]?.[contrast ? 'high' : 'low'];
@@ -220,20 +220,25 @@ export function getColorConfig(color: string, contrast = false): ColorConfig {
     return colorConfig;
   }
 
-  const c = getContrast(color, 'white');
+  try {
+    const c = getContrast(color, 'white');
 
-  let borderColor = 'transparent';
-  let textColor = 'white';
+    let borderColor = 'transparent';
+    let textColor = 'white';
 
-  if (c < 2) {
-    textColor = darken(color, 0.5);
-    borderColor = darken(color, 0.1);
-  }
+    if (c < 2) {
+      textColor = darken(color, 0.5);
+      borderColor = darken(color, 0.1);
+    }
 
-  return {
-    backgroundColor: color,
-    textColor: textColor,
-    borderColor: borderColor,
-    color: color
-  };
+    return {
+      backgroundColor: color,
+      textColor: textColor,
+      borderColor: borderColor,
+      color: color,
+    };
+  } catch {
+    console.warn(`[getColorConfig] "${originalColor}" is not a valid color. Falling back to gray.`);
+    return palette.gray[contrast ? 'high' : 'low'];
+  }
 }