@resee-movies/nuxt-ux 0.14.0 → 0.16.0

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@resee-movies/nuxt-ux",
   "configKey": "ux",
-  "version": "0.14.0",
+  "version": "0.16.0",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.0"

package/dist/runtime/components/Card.vue

@@ -4,6 +4,7 @@
     :class = "[
   'card',
   {
+    loading: props.loading,
     interactive: props.interactive,
     colorful: props.colorful,
     bordered: props.bordered,
@@ -12,15 +13,7 @@
   }
 ]"
   >
-    <slot name="default">
-      <div v-if="slots.image" class="image">
-        <slot name="image" />
-      </div>
-
-      <div v-if="slots.content" class="content">
-        <slot name="content" />
-      </div>
-    </slot>
+    <slot />
   </Component>
 </template>
 
@@ -29,18 +22,17 @@
 </script>
 
 <script setup>
-import { useSlots } from "#imports";
 const props = defineProps({
   is: { type: null, required: false, default: "div" },
+  loading: { type: Boolean, required: false, default: false },
   interactive: { type: Boolean, required: false, default: false },
   colorful: { type: Boolean, required: false, default: false },
   bordered: { type: Boolean, required: false, default: false },
   beveled: { type: Boolean, required: false, default: false },
   raised: { type: Boolean, required: false, default: false }
 });
-const slots = useSlots();
 </script>
 
 <style scoped>
-@reference "tailwindcss";@layer components{@property --resee-card-border-coverage{syntax:"<percentage>";inherits:false;initial-value:0%}.card .content{padding:--spacing(1.5)}.card.beveled{border-bottom-left-radius:var(--radius-xl);border-top-right-radius:var(--radius-xl);overflow:clip}.card.raised{box-shadow:var(--shadow-heavy)}.card{--resee-card-bg-color:var(--color-global-background);--resee-card-border-color:var(--color-global-background-accent);--resee-card-border-highlight:var(--color-global-foreground-accent) 0% 100%;--resee-card-border-angle:225deg;--resee-card-border-coverage:100%}.card.bordered:not(.interactive){border:2px solid var(--resee-card-border-color)}.card.bordered.interactive{--resee-card-bg-gradient:linear-gradient(var(--resee-card-bg-color),var(--resee-card-bg-color));--resee-card-border-gradient:linear-gradient(225deg,var(--resee-card-border-color) 0 var(--resee-card-border-coverage),var(--resee-card-border-highlight))}.card.bordered.interactive.colorful{--resee-card-border-highlight:var(--colorscale-resee-linear);@variant dark{--resee-card-border-highlight:var(--colorscale-resee-lite-linear)}}.card.bordered.interactive{background-clip:padding-box,border-box;background-image:var(--resee-card-bg-gradient),var(--resee-card-border-gradient);background-origin:border-box;border:2px solid transparent}.card.interactive{transition-duration:.5s;transition-property:border-radius,box-shadow,--resee-card-border-coverage;transition-timing-function:var(--default-transition-timing-function);-webkit-user-select:none;-moz-user-select:none;user-select:none}.card.interactive:focus-within.bordered,.card.interactive:hover.bordered{--resee-card-border-coverage:0%}.card.interactive:focus-within.beveled,.card.interactive:hover.beveled{border-radius:0}.card.interactive:focus-within,.card.interactive:hover{box-shadow:var(--shadow-heavy)}}
+@reference "tailwindcss";@layer components{@property --resee-card-border-coverage{syntax:"<percentage>";inherits:false;initial-value:0%}@property --resee-card-bg-color{syntax:"<color>";inherits:false;initial-value:transparent}@keyframes resee-card-bg-color-pulse{0%{background-color:var(--resee-card-bg-load-color-1)}50%{background-color:var(--resee-card-bg-load-color-2)}to{background-color:var(--resee-card-bg-load-color-1)}}.card{--resee-card-bg-color:var(--color-global-background);--resee-card-bg-load-color-1:#fff;--resee-card-bg-load-color-2:#f0f0f0;--resee-card-border-color:var(--color-global-background-accent);--resee-card-border-highlight:var(--color-global-foreground-accent) 0% 100%;--resee-card-border-angle:225deg;--resee-card-border-coverage:100%;--resee-card-border-weight:2px;@variant dark{--resee-card-bg-load-color-1:#000;--resee-card-bg-load-color-2:#0f0f0f}}.card.loading{animation-duration:2.5s;animation-fill-mode:both;animation-iteration-count:infinite;animation-name:resee-card-bg-color-pulse;animation-timing-function:ease-out}.card.beveled{border-bottom-left-radius:var(--radius-xl);border-top-right-radius:var(--radius-xl);overflow:clip}.card.raised{box-shadow:var(--shadow-heavy)}.card.bordered.loading,.card.bordered:not(.interactive){background-color:var(--resee-card-bg-color);border:solid var(--resee-card-border-weight) var(--resee-card-border-color)}.card.bordered.interactive:not(.loading){--resee-card-bg-gradient:linear-gradient(var(--resee-card-bg-color),var(--resee-card-bg-color));--resee-card-border-gradient:linear-gradient(225deg,var(--resee-card-border-color) 0 var(--resee-card-border-coverage),var(--resee-card-border-highlight));background-clip:padding-box,border-box;background-image:var(--resee-card-bg-gradient),var(--resee-card-border-gradient);background-origin:border-box;border:var(--resee-card-border-weight) solid transparent}.card.bordered.interactive:not(.loading).colorful{--resee-card-border-highlight:var(--colorscale-resee-linear);@variant dark{--resee-card-border-highlight:var(--colorscale-resee-lite-linear)}}.card.interactive:not(.loading){transition-duration:calc(var(--default-transition-duration)*3);transition-property:border-radius,box-shadow,--resee-card-border-coverage;transition-timing-function:var(--default-transition-timing-function);-webkit-user-select:none;-moz-user-select:none;user-select:none}.card.interactive:not(.loading):focus-within.bordered,.card.interactive:not(.loading):hover.bordered{--resee-card-border-coverage:0%}.card.interactive:not(.loading):focus-within.beveled,.card.interactive:not(.loading):hover.beveled{border-radius:0}.card.interactive:not(.loading):focus-within,.card.interactive:not(.loading):hover{box-shadow:var(--shadow-heavy)}}
 </style>

package/dist/runtime/components/Card.vue.d.ts

@@ -2,6 +2,7 @@ import type { Component } from 'vue';
 import type { HintedString } from '../types/index.js';
 export interface CardProps {
     is?: HintedString<'div'> | Component;
+    loading?: boolean;
     interactive?: boolean;
     colorful?: boolean;
     bordered?: boolean;
@@ -10,10 +11,6 @@ export interface CardProps {
 }
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<CardProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<CardProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
     default?: (props: {}) => any;
-} & {
-    image?: (props: {}) => any;
-} & {
-    content?: (props: {}) => any;
 }>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/CardScroller.vue

@@ -0,0 +1,233 @@
+<template>
+  <div :class="['scroller', { 'to-edge': props.toPageContainerEdge }]">
+    <div ref="ruler" :class="props.rulerClasses" />
+
+    <div
+      ref    = "scrollBox"
+      class  = "scroll-box styled-scroll transition-opacity duration-300"
+      :class = "[
+  props.scrollBoxClasses,
+  {
+    'opacity-0': !displayBounds.s0,
+    'justify-start': displayBounds.s1 || !props.centerAlign,
+    'justify-center': !displayBounds.s1 || props.centerAlign
+  }
+]"
+    >
+      <div
+        v-if   = "slots.firstItem"
+        ref    = "firstItem"
+        :class = "[props.itemClasses, props.itemSizeClasses]"
+      >
+        <slot name="firstItem" />
+      </div>
+
+      <div
+        v-for  = "(item, index) in props.items"
+        ref    = "scrollItems"
+        :key   = "identify(item, index)"
+        :class = "[props.itemClasses, props.itemSizeClasses]"
+      >
+        <slot name="item" :item="item" :index="index" />
+      </div>
+
+      <div
+        v-if   = "props.loading"
+        :class = "[props.itemClasses, props.itemSizeClasses]"
+      >
+        <slot name="loading" />
+      </div>
+
+      <div
+        v-if   = "slots.finalItem"
+        ref    = "finalItem"
+        :class = "[props.itemClasses, props.itemSizeClasses]"
+      >
+        <slot name="finalItem" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { isObjectLike } from "@resee-movies/utilities/objects/is-object-like";
+import { isString } from "@resee-movies/utilities/strings/is-string";
+import { defaultWindow, useElementBounding, useDebounceFn, useScroll, watchDebounced } from "@vueuse/core";
+import { computed, ref, watch } from "vue";
+</script>
+
+<script setup>
+const props = defineProps({
+  items: { type: null, required: true },
+  rulerClasses: { type: null, required: false, default: void 0 },
+  scrollBoxClasses: { type: null, required: false, default: void 0 },
+  itemClasses: { type: null, required: false, default: void 0 },
+  itemSizeClasses: { type: null, required: false, default: "w-32 md:w-36 lg:w-42" },
+  loading: { type: Boolean, required: false, default: false },
+  centerAlign: { type: Boolean, required: false, default: false },
+  toPageContainerEdge: { type: Boolean, required: false, default: true },
+  styleWhenTransiting: { type: String, required: false, default: "right" },
+  transitOpacity: { type: Boolean, required: false, default: true },
+  transitScale: { type: Boolean, required: false, default: true }
+});
+const slots = defineSlots();
+const ruler = ref();
+const scrollBox = ref();
+const scrollItems = ref([]);
+const firstItem = ref();
+const finalItem = ref();
+const rulerBounds = useElementBounding(ruler);
+const scrollItemElements = computed(() => {
+  const result = [];
+  if (firstItem.value) {
+    result.push(firstItem.value);
+  }
+  result.push(...scrollItems.value);
+  if (finalItem.value) {
+    result.push(finalItem.value);
+  }
+  return result;
+});
+const displayBounds = computed(() => {
+  const rulerEl = ruler.value;
+  if (!rulerEl) {
+    return { s0: false, s1: false, x1: 0, x2: 0, x3: 0, x4: 0, x1_2: "0px", x3_4: "0px" };
+  }
+  const rulerStyles = defaultWindow?.getComputedStyle(rulerEl);
+  const rulerLeft = rulerBounds.left.value;
+  const rulerWidth = rulerBounds.width.value;
+  const rulerPadLeft = parseFloat(rulerStyles?.paddingLeft || "0");
+  const rulerPadRight = parseFloat(rulerStyles?.paddingRight || "0");
+  const scrollBoxWidth = scrollBox.value?.scrollWidth ?? 0;
+  const bounds = {
+    s0: true,
+    // Has layout occurred
+    s1: rulerWidth < scrollBoxWidth,
+    // Is the scroll box overflowing
+    x1: rulerLeft,
+    x2: rulerLeft + rulerPadLeft,
+    x3: rulerLeft + rulerPadLeft + rulerWidth,
+    x4: rulerLeft + rulerPadLeft + rulerWidth + rulerPadRight
+  };
+  bounds.x1_2 = `${bounds.x2 - bounds.x1}px`;
+  bounds.x3_4 = `${bounds.x4 - bounds.x3}px`;
+  return bounds;
+});
+const {
+  pause: pauseScrollReset,
+  resume: resumeScrollReset
+} = watchDebounced([displayBounds], () => {
+  scrollBox.value?.scrollTo({ left: 0, behavior: "instant" });
+}, { debounce: 500 });
+const scrollState = useScroll(scrollBox);
+const {
+  pause: pauseStyleChanges,
+  resume: resumeStyleChanges
+} = watch([scrollState.x, displayBounds], () => {
+  queueStyleChanges(props.styleWhenTransiting, props.transitOpacity, props.transitScale);
+  debouncedQueueStyleChanges(props.styleWhenTransiting, props.transitOpacity, props.transitScale);
+}, { flush: "sync" });
+watch(
+  [() => props.transitOpacity, () => props.transitScale],
+  ([styleOpacity, styleScale]) => {
+    const areAnyDisabled = !(styleOpacity && styleScale);
+    const areAllDisabled = !(styleOpacity || styleScale);
+    if (areAnyDisabled) {
+      removeStyleChanges(styleOpacity, styleScale);
+    } else {
+      debouncedQueueStyleChanges(props.styleWhenTransiting, styleOpacity, styleScale);
+    }
+    if (areAllDisabled) {
+      pauseScrollReset();
+      pauseStyleChanges();
+    } else {
+      resumeScrollReset();
+      resumeStyleChanges();
+    }
+  }
+);
+const debouncedQueueStyleChanges = useDebounceFn(queueStyleChanges, 100);
+let queuedFrame = void 0;
+function queueStyleChanges(transiting, styleOpacity, styleScale) {
+  if (queuedFrame) {
+    cancelAnimationFrame(queuedFrame);
+    queuedFrame = void 0;
+  }
+  queuedFrame = requestAnimationFrame(() => {
+    applyStyleChanges(transiting, styleOpacity, styleScale);
+    queuedFrame = void 0;
+  });
+}
+function applyStyleChanges(transiting, styleOpacity, styleScale) {
+  const styleLeft = transiting === "both" || transiting === "left";
+  const styleRight = transiting === "both" || transiting === "right";
+  for (const element of scrollItemElements.value) {
+    const [percentage, direction] = percentInBounds(element, displayBounds.value);
+    if (direction === "none") {
+      if (styleOpacity) {
+        element.style.opacity = "1";
+      }
+      if (styleScale) {
+        element.style.scale = "1";
+      }
+    } else if (direction === "left" && styleLeft || direction === "right" && styleRight) {
+      if (styleOpacity) {
+        element.style.opacity = percentage.toString();
+      }
+      if (styleScale && element.firstElementChild instanceof HTMLElement) {
+        element.firstElementChild.style.transformOrigin = `center ${direction === "left" ? "right" : "left"}`;
+        element.firstElementChild.style.scale = (1 - 0.2 * (1 - percentage)).toString();
+      }
+    }
+  }
+}
+function removeStyleChanges(styleOpacity, styleScale) {
+  for (const element of scrollItemElements.value) {
+    if (!styleOpacity) {
+      element.style.opacity = "";
+    }
+    if (!styleScale && element.firstElementChild instanceof HTMLElement) {
+      element.firstElementChild.style.transformOrigin = "";
+      element.firstElementChild.style.scale = "";
+    }
+  }
+}
+function percentInBounds(element, { x1, x2, x3, x4 }) {
+  const {
+    left: elementStart,
+    width: elementWidth
+  } = element.getBoundingClientRect();
+  const elementEnd = elementStart + elementWidth;
+  if (elementEnd <= x1) {
+    return [0, "left"];
+  }
+  if (elementStart >= x4) {
+    return [0, "right"];
+  }
+  if (elementStart >= x2 && elementEnd <= x3) {
+    return [1, "none"];
+  }
+  if (elementStart < x2) {
+    return [easeInSine((elementEnd - x1) / (x2 - x1 + elementWidth)), "left"];
+  }
+  const stopA = x3 - elementWidth;
+  const stopB = x4 - stopA;
+  return [easeInSine(1 - (elementStart - stopA) / stopB), "right"];
+}
+function easeInSine(t) {
+  return roundHundredth(-1 * Math.cos(t * (Math.PI / 2)) + 1);
+}
+function roundHundredth(value) {
+  return Math.round(value * 100) / 100;
+}
+function identify(item, fallback) {
+  if (isObjectLike(item) && "id" in item && isString(item.id)) {
+    return item.id;
+  }
+  return fallback;
+}
+</script>
+
+<style scoped>
+@reference "tailwindcss";.scroller .scroll-box{display:flex;gap:--spacing(3);overflow-x:scroll;padding-block-end:var(--page-column-gutter);scroll-padding-left:v-bind("displayBounds.x1_2");scroll-padding-right:v-bind("displayBounds.x3_4");scroll-snap-type:inline;touch-action:pan-x pan-y;width:100%;@variant sm{gap:--spacing(4)}}.scroller .scroll-box>:deep(*){flex-shrink:0;scroll-snap-align:start}.scroller .scroll-box>:deep(:first-child){margin-left:v-bind("displayBounds.x1_2")}.scroller .scroll-box>:deep(:last-child){margin-right:v-bind("displayBounds.x3_4");scroll-snap-align:end}.scroller.to-edge{margin-inline:calc(var(--page-column-gutter)*-1)}.scroller.to-edge>:first-child{padding-inline:var(--page-column-gutter)}.scroller.to-edge{@variant sm{margin-inline:calc(var(--page-container-pad-x)*-1);&>:first-child{padding-inline:var(--page-container-pad-x)}}}
+</style>

package/dist/runtime/components/CardScroller.vue.d.ts

@@ -0,0 +1,38 @@
+import type { HTMLElementClassNames } from '../types/index.js';
+export type CardScrollerProps<T> = {
+    items: T[] | null | undefined;
+    rulerClasses?: HTMLElementClassNames;
+    scrollBoxClasses?: HTMLElementClassNames;
+    itemClasses?: HTMLElementClassNames;
+    itemSizeClasses?: HTMLElementClassNames;
+    loading?: boolean;
+    centerAlign?: boolean;
+    toPageContainerEdge?: boolean;
+    styleWhenTransiting?: 'left' | 'right' | 'both';
+    transitOpacity?: boolean;
+    transitScale?: boolean;
+};
+declare const __VLS_export: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: __VLS_PrettifyLocal<CardScrollerProps<T>> & import("vue").PublicProps & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {
+        item: (slotProps: {
+            item: T;
+            index: number;
+        }) => unknown;
+        firstItem: () => unknown;
+        finalItem: () => unknown;
+        loading: () => unknown;
+    };
+    emit: {};
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = {
+    [K in keyof T as K]: T[K];
+} & {};

package/dist/runtime/components/GlobalHeader.vue

@@ -0,0 +1,107 @@
+<template>
+  <div ref="rulerElement" :class="{ placeholder: isHeaderAffixed }" />
+
+  <header
+    ref    = "headerElement"
+    v-bind = "$attrs"
+    :class = "{
+  'header-affixed': isHeaderAffixed,
+  'header-transit': doTransitions,
+  'header-hidden': hideDrawerContent
+}"
+  >
+    <div
+      ref    = "drawerElement"
+      :class = "slots.subheader ? 'border-b border-b-global-background-accent' : void 0"
+    >
+      <LayoutPageColumn>
+        <slot name="default" />
+      </LayoutPageColumn>
+    </div>
+
+    <div v-if="slots.subheader" ref="subheadElement">
+      <LayoutPageColumn>
+        <slot name="subheader" />
+      </LayoutPageColumn>
+    </div>
+  </header>
+</template>
+
+<script>
+
+</script>
+
+<script setup>
+import { ref, useSlots, watch } from "vue";
+import { useElementSize, useWindowScroll } from "@vueuse/core";
+import { useGlobalHeaderState } from "../composables/use-global-header-state";
+import { useTwoFrameRefToggle } from "../composables/use-two-frame-ref-toggle";
+import LayoutPageColumn from "./LayoutPageColumn.vue";
+defineOptions({
+  inheritAttrs: false
+});
+const props = defineProps({
+  drawer: { type: Boolean, required: false, default: true }
+});
+const slots = useSlots();
+const rulerElement = ref();
+const headerElement = ref();
+const drawerElement = ref();
+const subheadElement = ref();
+const { height: headerHeight } = useElementSize(headerElement);
+const { height: drawerHeight } = useElementSize(drawerElement);
+const { height: subheadHeight } = useElementSize(subheadElement);
+const { y: windowScrollY } = useWindowScroll();
+const [isHeaderAffixed, doTransitions, updateAffixState] = useTwoFrameRefToggle();
+const hideDrawerContent = ref(false);
+let backscrollCounter = 0;
+function disableAffix() {
+  updateAffixState(false);
+  hideDrawerContent.value = false;
+  backscrollCounter = 0;
+}
+function enableAffix() {
+  updateAffixState(true);
+  hideDrawerContent.value = true;
+}
+const { pause, resume } = watch(windowScrollY, (newScrollY, oldScrollY) => {
+  const scrollCeiling = rulerElement.value?.offsetTop ?? 0;
+  const rawDrawerHeight = drawerHeight.value;
+  if (newScrollY <= scrollCeiling || newScrollY <= scrollCeiling + rawDrawerHeight && hideDrawerContent.value) {
+    return disableAffix();
+  }
+  if (!isHeaderAffixed.value && newScrollY > scrollCeiling + rawDrawerHeight) {
+    return enableAffix();
+  }
+  const scrollDelta = newScrollY - oldScrollY;
+  const isScrollDown = scrollDelta > 0;
+  const negDrawerHeight = rawDrawerHeight * -1;
+  backscrollCounter = isScrollDown ? Math.min(rawDrawerHeight, backscrollCounter + scrollDelta) : Math.max(negDrawerHeight, backscrollCounter + scrollDelta);
+  if (backscrollCounter === rawDrawerHeight) {
+    hideDrawerContent.value = true;
+  } else if (backscrollCounter === negDrawerHeight) {
+    hideDrawerContent.value = false;
+  }
+});
+const headerState = useGlobalHeaderState();
+watch(
+  [() => props.drawer, headerHeight, subheadHeight, hideDrawerContent, isHeaderAffixed],
+  () => {
+    if (props.drawer) {
+      resume();
+    } else {
+      pause();
+      disableAffix();
+    }
+    headerState.isHeaderDrawerEnabled.value = props.drawer;
+    headerState.headerHeight.value = headerHeight.value;
+    headerState.subheaderHeight.value = subheadHeight.value;
+    headerState.isHeaderPulledDown.value = isHeaderAffixed.value && !hideDrawerContent.value;
+  },
+  { immediate: true }
+);
+</script>
+
+<style scoped>
+.placeholder{height:calc(v-bind(headerHeight)*1px)}.header-affixed{box-shadow:var(--shadow-heavy);left:0;position:fixed;right:0;top:0;transform:translateY(0);z-index:100}.header-affixed.header-transit{transition-duration:calc(var(--default-transition-duration)*2);transition-property:transform,box-shadow;transition-timing-function:var(--default-transition-timing-function)}.header-affixed.header-hidden{box-shadow:none;transform:translateY(calc(v-bind(drawerHeight)*-1px))}
+</style>

package/dist/runtime/components/GlobalHeader.vue.d.ts

@@ -0,0 +1,15 @@
+export interface GlobalHeaderProps {
+    drawer?: boolean;
+}
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<GlobalHeaderProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<GlobalHeaderProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    default?: (props: {}) => any;
+} & {
+    subheader?: (props: {}) => any;
+}>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/GlobalHeaderAnnouncement.vue

@@ -0,0 +1,49 @@
+<template>
+  <div
+    v-if      = "!isDismissed"
+    :class    = "['announcement', { dismissable: props.dismissable }]"
+    role      = "alert"
+    aria-live = "polite"
+  >
+    <LayoutPageColumn :class="{ 'relative': props.dismissable }">
+      <slot />
+
+      <CloseButton
+        v-if   = "props.dismissable"
+        class  = "absolute right-3 top-1/2 -translate-y-1/2"
+        size   = "sm"
+        @click = "dismissAnnouncement()"
+      />
+    </LayoutPageColumn>
+  </div>
+</template>
+
+<script>
+
+</script>
+
+<script setup>
+import { computed, ref } from "vue";
+import CloseButton from "./CloseButton.vue";
+import LayoutPageColumn from "./LayoutPageColumn.vue";
+import { useReseeUx } from "../composables/use-resee-ux";
+const props = defineProps({
+  announcementId: { type: String, required: false, default: void 0 },
+  dismissable: { type: Boolean, required: false, default: true }
+});
+const { preferences } = useReseeUx();
+const isLocallyDismissed = ref(false);
+const isDismissed = computed(() => {
+  return isLocallyDismissed.value || props.announcementId && preferences.value.dismissNotification === props.announcementId;
+});
+function dismissAnnouncement() {
+  if (props.announcementId) {
+    preferences.value.dismissNotification = props.announcementId;
+  }
+  isLocallyDismissed.value = true;
+}
+</script>
+
+<style scoped>
+@reference "tailwindcss";.announcement{--announcement-bg-color:#fff;@variant dark{--announcement-bg-color:#000}background-image:linear-gradient(to bottom,var(--announcement-bg-color) 0 calc(100% - 10px),transparent),linear-gradient(to right,var(--colorscale-resee-linear));padding-bottom:6px}.announcement.dismissable>div{padding-right:12rem}
+</style>

package/dist/runtime/components/GlobalHeaderAnnouncement.vue.d.ts

@@ -0,0 +1,14 @@
+export interface GlobalHeaderAnnouncementProps {
+    announcementId?: string;
+    dismissable?: boolean;
+}
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<GlobalHeaderAnnouncementProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<GlobalHeaderAnnouncementProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    default?: (props: {}) => any;
+}>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/Image.vue

@@ -1,6 +1,7 @@
 <template>
   <Card
     :is          = "props.is"
+    :loading     = "isImgLoading || props.loading"
     :interactive = "props.interactive"
     :colorful    = "props.colorful"
     :beveled     = "props.beveled"
@@ -9,34 +10,34 @@
     :class       = "[
   'image',
   {
-    loading: isImgLoading || props.showLoading,
-    glass: props.glassy && !(imgHasError || isImgLoading || props.showLoading)
+    glass: props.glassy && !(imgHasError || isImgLoading || props.loading),
+    scale: props.scaleToParent
   }
 ]"
   >
     <Icon
-      v-if     = "props.defaultIcon && imgHasError"
-      :name    = "props.defaultIcon"
-      :size    = "props.iconSize"
-      class    = "transition-opacity duration-300"
-      :class   = "{
-  'opacity-0': isImgLoading || props.showLoading
-}"
+      v-if   = "props.defaultIcon && imgHasError"
+      :name  = "props.defaultIcon"
+      :size  = "props.iconSize"
+      class  = "transition-opacity duration-300"
+      :class = "{ 'opacity-0': isImgLoading || props.loading }"
     />
 
     <ImageBase
-      :src          = "props.src"
-      :type         = "props.type"
-      :alt          = "props.alt"
-      :width        = "props.width"
-      :height       = "props.height"
-      :aspect       = "props.aspect"
-      :fit          = "props.fit"
-      :loading      = "props.loading"
-      :show-loading = "props.showLoading"
-      @loading      = "(state) => isImgLoading = state"
-      @load         = "() => imgHasError = null"
-      @error        = "(err) => imgHasError = err"
+      :src         = "props.src"
+      :type        = "props.type"
+      :alt         = "props.alt"
+      :width       = "props.width"
+      :height      = "props.height"
+      :aspect      = "props.aspect"
+      :fit         = "props.fit"
+      :loadStyle   = "props.loadStyle"
+      class        = "transition-opacity duration-300"
+      :class       = "{ 'opacity-0': isImgLoading || props.loading || imgHasError }"
+      :aria-hidden = "imgHasError ? 'true' : 'false'"
+      @loading     = "handleLoading"
+      @load        = "handleLoaded"
+      @error       = "handleError"
     />
   </Card>
 </template>
@@ -54,6 +55,7 @@ const props = defineProps({
   defaultIcon: { type: String, required: false, default: "i-ph-image-thin" },
   iconSize: { type: String, required: false, default: "xl" },
   glassy: { type: Boolean, required: false, default: false },
+  scaleToParent: { type: Boolean, required: false, default: true },
   src: { type: null, required: true },
   alt: { type: [String, null, Function], required: false },
   type: { type: String, required: false },
@@ -61,9 +63,9 @@ const props = defineProps({
   height: { type: [String, Number], required: false },
   aspect: { type: String, required: false },
   fit: { type: String, required: false },
-  showLoading: { type: Boolean, required: false },
-  loading: { type: String, required: false },
+  loadStyle: { type: String, required: false },
   is: { type: null, required: false },
+  loading: { type: Boolean, required: false },
   interactive: { type: Boolean, required: false },
   colorful: { type: Boolean, required: false },
   bordered: { type: Boolean, required: false },
@@ -72,8 +74,19 @@ const props = defineProps({
 });
 const isImgLoading = ref(true);
 const imgHasError = ref(null);
+function handleLoading() {
+  isImgLoading.value = true;
+}
+function handleLoaded(src) {
+  isImgLoading.value = false;
+  imgHasError.value = null;
+}
+function handleError(err) {
+  isImgLoading.value = false;
+  imgHasError.value = err;
+}
 </script>
 
 <style scoped>
-@reference "tailwindcss";@layer components{@keyframes color-pulse{0%{background-color:var(--bg-color-1)}50%{background-color:var(--bg-color-2)}to{background-color:var(--bg-color-1)}}.image{--bg-color-1:#fff;--bg-color-2:#f0f0f0;background-color:var(--bg-color-1);max-width:-moz-fit-content;max-width:fit-content;overflow:clip;position:relative;width:100%;@variant dark{--bg-color-1:#000;--bg-color-2:#0f0f0f}}.image.loading{animation-duration:2.5s;animation-fill-mode:both;animation-iteration-count:infinite;animation-name:color-pulse;animation-timing-function:ease-out}.image.glass:after{background-image:linear-gradient(110deg,transparent 25%,hsla(0,0%,100%,.15) 80%,transparent);content:var(--zero-width-space);inset:0;position:absolute}.image :deep(.icon){color:var(--color-global-background-accent);left:50%;position:absolute;top:50%;transform:translateX(-50%) translateY(-50%)}}
+@layer components{.image{display:block;max-width:-moz-fit-content;max-width:fit-content;overflow:clip;position:relative}.image.glass:after{background-image:linear-gradient(110deg,transparent 25%,hsla(0,0%,100%,.15) 80%,transparent);content:var(--zero-width-space);inset:0;position:absolute}.image :deep(.icon){color:var(--color-global-background-accent);left:50%;position:absolute;top:50%;transform:translateX(-50%) translateY(-50%)}.image.scale{max-width:unset}.image.scale :deep(img){min-width:100%}}
 </style>

package/dist/runtime/components/Image.vue.d.ts

@@ -5,6 +5,7 @@ export interface ImageProps extends ImageBaseProps, CardProps {
     defaultIcon?: string;
     iconSize?: IconProps['size'];
     glassy?: boolean;
+    scaleToParent?: boolean;
 }
 declare const __VLS_export: import("vue").DefineComponent<ImageProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ImageProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;