@resee-movies/nuxt-ux 0.17.0 → 0.18.0

package/dist/module.json

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

package/dist/runtime/components/GlobalHeader.vue

@@ -10,18 +10,28 @@
   'header-hidden': hideDrawerContent
 }"
   >
-    <div
-      ref    = "drawerElement"
-      :class = "slots.subheader ? 'border-b border-b-global-background-accent' : void 0"
-    >
+    <div ref="drawerElement">
       <LayoutPageColumn>
         <slot name="default" />
       </LayoutPageColumn>
+
+      <div
+        v-if  = "renderSubheader"
+        class = "border-b border-b-global-background-accent"
+      />
     </div>
 
-    <div v-if="slots.subheader" ref="subheadElement">
-      <LayoutPageColumn>
-        <slot name="subheader" />
+    <div v-if="renderSubheader" ref="subheadElement" class="subheader">
+      <LayoutPageColumn class="overflow-x-auto styled-scroll">
+        <slot name="subheader">
+          <TableOfContents
+            :toc       = "props.subheaderToc ?? headerState.subheaderToc.value"
+            class      = "flex items-center flex-nowrap"
+            link-class = "btn small borderless text-nowrap"
+            :min-depth = "2"
+            :max-depth = "2"
+          />
+        </slot>
       </LayoutPageColumn>
     </div>
   </header>
@@ -32,16 +42,20 @@
 </script>
 
 <script setup>
-import { ref, useSlots, watch } from "vue";
-import { useElementSize, useWindowScroll } from "@vueuse/core";
+import { useHead } from "#imports";
+import { computed, ref, useSlots, watch } from "vue";
+import { useElementSize } from "@vueuse/core";
 import { useGlobalHeaderState } from "../composables/use-global-header-state";
+import { useReseeWindowScroll } from "../composables/use-resee-window-scroll";
 import { useTwoFrameRefToggle } from "../composables/use-two-frame-ref-toggle";
 import LayoutPageColumn from "./LayoutPageColumn.vue";
+import TableOfContents from "./TableOfContents.vue";
 defineOptions({
   inheritAttrs: false
 });
 const props = defineProps({
-  drawer: { type: Boolean, required: false, default: true }
+  drawer: { type: Boolean, required: false, default: true },
+  subheaderToc: { type: Array, required: false }
 });
 const slots = useSlots();
 const rulerElement = ref();
@@ -51,9 +65,23 @@ const subheadElement = ref();
 const { height: headerHeight } = useElementSize(headerElement);
 const { height: drawerHeight } = useElementSize(drawerElement);
 const { height: subheadHeight } = useElementSize(subheadElement);
-const { y: windowScrollY } = useWindowScroll();
+const {
+  y: windowScrollY,
+  source: windowScrollSource
+} = useReseeWindowScroll();
 const [isHeaderAffixed, doTransitions, updateAffixState] = useTwoFrameRefToggle();
 const hideDrawerContent = ref(false);
+const headerState = useGlobalHeaderState();
+const renderSubheader = computed(() => {
+  return !!(slots.subheader || props.subheaderToc?.length || headerState.subheaderToc.value?.length);
+});
+useHead({
+  bodyAttrs: {
+    style: () => ({
+      "--extra-scroll-margin": subheadHeight.value ? `${subheadHeight.value}px` : ""
+    })
+  }
+});
 let backscrollCounter = 0;
 function disableAffix() {
   updateAffixState(false);
@@ -73,6 +101,11 @@ const { pause, resume } = watch(windowScrollY, (newScrollY, oldScrollY) => {
   if (!isHeaderAffixed.value && newScrollY > scrollCeiling + rawDrawerHeight) {
     return enableAffix();
   }
+  if (!windowScrollSource.value) {
+    hideDrawerContent.value = true;
+    backscrollCounter = 0;
+    return;
+  }
   const scrollDelta = newScrollY - oldScrollY;
   const isScrollDown = scrollDelta > 0;
   const negDrawerHeight = rawDrawerHeight * -1;
@@ -83,7 +116,6 @@ const { pause, resume } = watch(windowScrollY, (newScrollY, oldScrollY) => {
     hideDrawerContent.value = false;
   }
 });
-const headerState = useGlobalHeaderState();
 watch(
   [() => props.drawer, headerHeight, subheadHeight, hideDrawerContent, isHeaderAffixed],
   () => {
@@ -103,5 +135,5 @@ watch(
 </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))}
+.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))}.subheader :deep(.btn){background:transparent;transition:background-color;transition-duration:var(--default-transition-duration);transition-timing-function:var(--default-transition-timing-function)}.subheader :deep(.btn).active{background:var(--color-global-background-accent)}
 </style>

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

@@ -1,5 +1,15 @@
+import type { TableOfContentsItem } from './TableOfContents.vue.js';
 export interface GlobalHeaderProps {
+    /**
+     * Whether the header will act like a flyout drawer when
+     * scrolling upward on the page.
+     */
     drawer?: boolean;
+    /**
+     * Table of contents objects for the global subheader which
+     * will be turned into anchor links.
+     */
+    subheaderToc?: TableOfContentsItem[];
 }
 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;

package/dist/runtime/components/TableOfContents.vue

@@ -1,9 +1,28 @@
 <template>
   <ol v-if="props.toc?.length">
-    <li v-for="entry of props.toc" :key="entry.slug">
-      <a :href="`#${entry.slug}`" v-html="entry.text" />
-      <TableOfContents v-if="entry.children.length" :toc="entry.children" />
-    </li>
+    <template v-for="entry of props.toc" :key="entry.slug">
+      <li v-if="shouldRenderLevel(entry.level)">
+        <NuxtLink
+          v-slot  = "config"
+          :href   = "`#${entry.slug}`"
+          :custom = "true"
+        >
+          <a
+            v-html = "entry.text"
+            :class = "[props.linkClass, { active: mounted && areRoutesStrictEqual(config.route, route) }]"
+            :href  = "config.href"
+          />
+        </NuxtLink>
+
+        <TableOfContents
+          v-if        = "entry.children?.length && shouldRenderLevel((entry.level ?? 1) + 1)"
+          :toc        = "entry.children"
+          :link-class = "props.linkClass"
+          :min-depth  = "props.minDepth"
+          :max-depth  = "props.maxDepth"
+        />
+      </li>
+    </template>
   </ol>
 </template>
 
@@ -12,8 +31,26 @@
 </script>
 
 <script setup>
+import { NuxtLink } from "#components";
+import { useRoute } from "#imports";
+import { onMounted, ref } from "vue";
+import { areRoutesStrictEqual } from "../utils/routing";
 import TableOfContents from "./TableOfContents.vue";
 const props = defineProps({
-  toc: { type: null, required: true }
+  toc: { type: null, required: true },
+  minDepth: { type: Number, required: false },
+  maxDepth: { type: Number, required: false },
+  linkClass: { type: null, required: false }
+});
+const route = useRoute();
+const mounted = ref(false);
+onMounted(() => {
+  mounted.value = true;
 });
+function shouldRenderLevel(level) {
+  if (!level) {
+    return true;
+  }
+  return (!props.minDepth || props.minDepth <= level) && (!props.maxDepth || props.maxDepth >= level);
+}
 </script>

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

@@ -1,6 +1,14 @@
 import type { TableOfContents as TableOfContentsOptions } from '@resee-movies/utilities/dom/generate-table-of-contents';
+import type { HTMLElementClassNames } from '../types/index.js';
+export type TableOfContentsItem = Partial<TableOfContentsOptions> & {
+    text: string;
+    slug: string;
+};
 export type UiTableOfContentsProps = {
-    toc: TableOfContentsOptions[] | null | undefined;
+    toc: TableOfContentsItem[] | null | undefined;
+    minDepth?: number;
+    maxDepth?: number;
+    linkClass?: HTMLElementClassNames;
 };
 declare const __VLS_export: import("vue").DefineComponent<UiTableOfContentsProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<UiTableOfContentsProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/composables/use-global-header-state.d.ts

@@ -1,10 +1,61 @@
+import { type MaybeRefOrGetter } from 'vue';
+import type { TableOfContentsItem } from '../components/TableOfContents.vue.js';
+/**
+ *
+ */
+declare function tableOfContents(toc: UseGlobalHeaderStateOptions['tableOfContents']): void;
+/**
+ * Configuration for the {@link useGlobalHeaderState} composable.
+ */
+export type UseGlobalHeaderStateOptions = {
+    tableOfContents?: MaybeRefOrGetter<(TableOfContentsItem | undefined)[] | undefined>;
+};
 /**
  * Stateful information about the GlobalHeader component.
  */
-export declare function useGlobalHeaderState(): {
+export declare function useGlobalHeaderState(options?: UseGlobalHeaderStateOptions): {
     headerHeight: import("vue").Ref<number, number>;
     subheaderHeight: import("vue").Ref<number, number>;
+    subheaderToc: import("vue").Ref<{
+        level?: number | undefined;
+        text: string;
+        slug: string;
+        parent?: {
+            level: number;
+            text: string;
+            slug: string;
+            parent: /*elided*/ any | undefined;
+            children: /*elided*/ any[];
+        } | undefined;
+        children?: {
+            level: number;
+            text: string;
+            slug: string;
+            parent: /*elided*/ any | undefined;
+            children: /*elided*/ any[];
+        }[] | undefined;
+    }[], TableOfContentsItem[] | {
+        level?: number | undefined;
+        text: string;
+        slug: string;
+        parent?: {
+            level: number;
+            text: string;
+            slug: string;
+            parent: /*elided*/ any | undefined;
+            children: /*elided*/ any[];
+        } | undefined;
+        children?: {
+            level: number;
+            text: string;
+            slug: string;
+            parent: /*elided*/ any | undefined;
+            children: /*elided*/ any[];
+        }[] | undefined;
+    }[]>;
+    tableOfContents: typeof tableOfContents;
     isHeaderDrawerEnabled: import("vue").Ref<boolean, boolean>;
     isHeaderPulledDown: import("vue").Ref<boolean, boolean>;
     offsetFromHeaderStyles: import("vue").ComputedRef<string[]>;
 };
+export {};

package/dist/runtime/composables/use-global-header-state.js

@@ -1,4 +1,4 @@
-import { computed, ref } from "vue";
+import { computed, onScopeDispose, ref, toValue, watch } from "vue";
 const headerHeight = ref(0);
 const subheaderHeight = ref(0);
 const isHeaderDrawerEnabled = ref(true);
@@ -9,10 +9,30 @@ const offsetFromHeaderStyles = computed(() => {
     `padding-top: ${headerHeight.value}px;`
   ];
 });
-export function useGlobalHeaderState() {
+const subheaderToc = ref([]);
+function tableOfContents(toc) {
+  onScopeDispose(() => {
+    subheaderToc.value.length = 0;
+  }, true);
+  watch(
+    () => toValue(toc),
+    (entries) => {
+      subheaderToc.value.push(
+        ...entries?.filter((entry) => !!entry) ?? []
+      );
+    },
+    { immediate: true }
+  );
+}
+export function useGlobalHeaderState(options) {
+  if (options?.tableOfContents) {
+    tableOfContents(options.tableOfContents);
+  }
   return {
     headerHeight,
     subheaderHeight,
+    subheaderToc,
+    tableOfContents,
     isHeaderDrawerEnabled,
     isHeaderPulledDown,
     offsetFromHeaderStyles

package/dist/runtime/composables/use-resee-window-scroll.d.ts

@@ -0,0 +1,18 @@
+import { type UseWindowScrollOptions, type UseWindowScrollReturn } from '@vueuse/core';
+import { type Ref } from 'vue';
+export type UseReseeWindowScrollReturn = UseWindowScrollReturn & {
+    source: Ref<Event | undefined>;
+};
+/**
+ * A specialized implementation of the Vueuse {@link useWindowScroll} composable, which adds
+ * the new property `source` to the returned object.
+ *
+ * The purpose of `source` is to provide a best-effort attempt at identifying _why_ the scroll
+ * was initiated. To do this, a series of common user interaction events - _wheel_, _touchmove_,
+ * etc. are listened to and correlated with the scroll event.
+ *
+ * In the case of a scroll **not** being initiated by direct user interaction - e.g. invocation of
+ * `window.scrollTo` or the user agent scrolling the page in response to a URL hash change - then
+ * `source` will be undefined.
+ */
+export declare function useReseeWindowScroll(options?: UseWindowScrollOptions): UseReseeWindowScrollReturn;

package/dist/runtime/composables/use-resee-window-scroll.js

@@ -0,0 +1,65 @@
+import {
+  useEventListener,
+  useWindowScroll
+} from "@vueuse/core";
+import { ref } from "vue";
+const NavigationKeys = [
+  "ArrowUp",
+  "ArrowDown",
+  " ",
+  "Spacebar",
+  "ArrowRight",
+  "ArrowLeft",
+  "End",
+  "Home",
+  "PageDown",
+  "PageUp"
+];
+export function useReseeWindowScroll(options) {
+  const scrollSource = ref();
+  let scrollEndTimeoutId = void 0;
+  function clearScrollEndTimeout() {
+    if (scrollEndTimeoutId) {
+      clearTimeout(scrollEndTimeoutId);
+      scrollEndTimeoutId = void 0;
+    }
+  }
+  function setScrollEndTimeout() {
+    clearScrollEndTimeout();
+    scrollEndTimeoutId = setTimeout(
+      () => {
+        scrollSource.value = void 0;
+        scrollEndTimeoutId = void 0;
+      },
+      250
+    );
+  }
+  useEventListener(["wheel", "touchmove", "keydown", "keyup", "mousedown", "mouseup"], (e) => {
+    if (e instanceof KeyboardEvent) {
+      if (NavigationKeys.includes(e.key)) {
+        setScrollEndTimeout();
+        scrollSource.value = e;
+      }
+    } else if (e.type === "mouseup") {
+      clearScrollEndTimeout();
+      scrollSource.value = void 0;
+    } else {
+      setScrollEndTimeout();
+      scrollSource.value = e;
+    }
+  });
+  const scrollProps = useWindowScroll({
+    ...options,
+    onScroll(e) {
+      options?.onScroll?.(e);
+      clearScrollEndTimeout();
+    },
+    onStop(e) {
+      options?.onStop?.(e);
+      if (scrollSource.value?.type !== "mousedown") {
+        setScrollEndTimeout();
+      }
+    }
+  });
+  return { ...scrollProps, source: scrollSource };
+}

package/dist/runtime/composables/use-url-hash.d.ts

@@ -0,0 +1,43 @@
+import { type Ref } from 'vue';
+import type { RouteLocationResolvedGeneric } from 'vue-router';
+/**
+ * Vue Router's `resolve` method creates a RouteLocationResolvedGeneric object,
+ * while Vue Router's `currentRoute` ref expects a RouteLocationNormalizedLoadedGeneric
+ * object (because of course). There is an inconsistency between the two in that the
+ * former's `name` property can be null, while the latter's cannot. This means you
+ * cannot directly assign the former to the latter without TS complaining.
+ *
+ * The exceptionally long name here is a nod to the 50+ other _Location_ types that
+ * Vue Route exposes.
+ */
+export type RouteLocationResolvedGenericWithNonNullableName = Omit<RouteLocationResolvedGeneric, 'name'> & {
+    name: string | undefined;
+};
+/**
+ * Options for the `update` method returned by the {@link useUrlHash} composable.
+ */
+export type UseUrlHashUpdateOptions = {
+    /**
+     * Whether to update the hash in a way that will cause the browser
+     * to scroll to the identified element (default: false).
+     */
+    scrollTo?: boolean;
+    /**
+     * Whether to create a new history entry for the hash - push - or to replace the
+     * current (default: replace).
+     */
+    mode?: 'push' | 'replace';
+};
+/**
+ * The return type of the {@link useUrlHash} composable.
+ */
+export type UseUrlHashReturn = {
+    value: Readonly<Ref<string | undefined>>;
+    update: (newHash: string | undefined, options?: UseUrlHashUpdateOptions) => boolean;
+};
+/**
+ * Read/Write the current URL hash value. By default, this will be done in a way that does
+ * not cause browser scroll to behavior to occur - very useful when updating the hash
+ * based on the scroll position of the page.
+ */
+export declare function useUrlHash(): UseUrlHashReturn;

package/dist/runtime/composables/use-url-hash.js

@@ -0,0 +1,25 @@
+import { useRouter } from "#imports";
+import { isString } from "@resee-movies/utilities/strings/is-string";
+import { computed } from "vue";
+export function useUrlHash() {
+  const router = useRouter();
+  const value = computed(() => {
+    return router.currentRoute.value.hash || void 0;
+  });
+  const update = (newHash, options) => {
+    const normalizedHash = isString(newHash, { withContent: true }) ? !newHash.startsWith("#") ? `#${newHash}` : newHash : void 0;
+    const { path, query, hash } = router.currentRoute.value;
+    if (normalizedHash && hash && normalizedHash === hash) {
+      return false;
+    }
+    if (options?.scrollTo === true) {
+      (options?.mode === "push" ? router.push : router.replace)({ path, query, hash: normalizedHash });
+      return true;
+    }
+    const newRoute = router.resolve({ path, query, hash: normalizedHash });
+    router.currentRoute.value = newRoute;
+    window.history[options?.mode === "push" ? "pushState" : "replaceState"](null, "", normalizedHash);
+    return true;
+  };
+  return { value, update };
+}

package/dist/runtime/theme/css/brand/application.css

@@ -1 +1 @@
-@layer base{:root{--p-scrollbar-width:0px}html:has(body.p-overflow-hidden){scrollbar-color:transparent var(--color-global-background)}body{background-color:var(--color-global-background);color:var(--color-global-foreground);min-height:100vh;transition:color,background-color;transition-duration:var(--default-transition-duration);@variant dark{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}}@property --background-grid-line-color{syntax:"<color>";inherits:false;initial-value:transparent}#app-root{min-height:100vh;@variant sm{background-position:top;background-size:160px 80px;transition:--background-grid-line-color;transition-duration:var(--default-transition-duration);--background-grid-line-color:var(--color-global-background-accent);background-image:linear-gradient(to bottom,transparent 0 45px,var(--background-grid-line-color) 45px 46px,transparent 46px 59px,var(--background-grid-line-color) 59px 60px,transparent 60px),linear-gradient(to right,transparent 0 80px,var(--background-grid-line-color) 80px 81px,transparent 81px)}}.app-main{min-height:100vh}.app-footer{position:sticky;top:100vh}}
+@layer base{:root{--p-scrollbar-width:0px}html{scroll-behavior:smooth}@media screen and (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}html:has(body.p-overflow-hidden){scrollbar-color:transparent var(--color-global-background)}body{background-color:var(--color-global-background);color:var(--color-global-foreground);min-height:100vh;transition:color,background-color;transition-duration:var(--default-transition-duration);@variant dark{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}}@property --background-grid-line-color{syntax:"<color>";inherits:false;initial-value:transparent}#app-root{min-height:100vh;@variant sm{background-position:top;background-size:160px 74px;transition:--background-grid-line-color;transition-duration:var(--default-transition-duration);--background-grid-line-color:var(--color-global-background-accent);background-image:linear-gradient(to bottom,transparent 0 45px,var(--background-grid-line-color) 45px 46px,transparent 46px 59px,var(--background-grid-line-color) 59px 60px,transparent 60px),linear-gradient(to right,transparent 0 80px,var(--background-grid-line-color) 80px 81px,transparent 81px)}}.app-main{min-height:100vh}.app-footer{position:sticky;top:100vh}}

package/dist/runtime/theme/css/brand/typography.css

@@ -1 +1 @@
-@utility prose-layout-container{margin-left:auto;margin-right:auto;max-width:var(--container-3xl);width:100%;&.sm{max-width:var(--container-md)}}@layer components{:root{--typo-h6:clamp(var(--text-base),2.500vw,1.2rem);--typo-h5:clamp(var(--typo-h6),3.000vw,1.44rem);--typo-h4:clamp(var(--typo-h5),3.600vw,1.728rem);--typo-h3:clamp(var(--typo-h4),4.320vw,2.0736rem);--typo-h2:clamp(var(--typo-h3),5.184vw,2.4883rem);--typo-h1:clamp(var(--typo-h2),6.221vw,2.986rem);--typo-h1-hero:clamp(var(--typo-h1),9.331vw,4.479rem);--typo-p-hero:clamp(1.25rem,3.125vw,1.5rem)}.font-variant-small-caps{font-variant:small-caps}.icon-inline{align-items:center;display:inline-flex}.icon-inline:before{content:"​";display:block}.prose-container{@apply prose-layout-container}.prose-container:where(:not(.prose+.prose-container,.prose-container+.prose-container))>:first-child,.prose-container:where(:not(.prose+.prose-container,.prose-container+.prose-container))>:first-child>:first-child,.prose:where(:not(.prose+.prose,.prose-container+.prose))>:first-child,.prose:where(:not(.prose+.prose,.prose-container+.prose))>:first-child>:first-child{margin-block-start:0}.prose-container>:last-child,.prose-container>:last-child>:last-child,.prose>:last-child,.prose>:last-child>:last-child{margin-block-end:0}:where(.h1,.h2,.h3,.h4,.h5,.h6).prose,:where(.prose-container,.prose) :where(h1,h2,h3,h4,h5,h6){margin-block-end:.4lh;margin-block-start:.9lh;text-wrap:pretty}:where(.p,.pre,.table,.ol,.ul,.img,.figure,.blockquote).prose,:where(.prose-container,.prose) :where(p,pre,table,ol,ul,img,figure,blockquote){margin-block-end:1lh;text-wrap:pretty}:where(.prose-container,.prose) hr+*{margin-block-start:0}:where(.prose-container,.prose) :has(+hr){margin-block-end:0}.hr,.prose hr,.prose-container hr{border-color:var(--color-global-background-accent);margin-block-end:1lh;margin-block-start:1lh}.h1,.prose h1,.prose-container h1{color:color-mix(in srgb-linear,var(--custom-accent-color) 40%,currentColor);font-size:var(--typo-h1);letter-spacing:.0025em;line-height:1.125}.h1.hero,.prose h1.hero,.prose-container h1.hero{font-size:var(--typo-h1-hero);line-height:1}.h2,.prose h2,.prose-container h2{font-size:var(--typo-h2);font-weight:var(--font-weight-extralight);letter-spacing:.0108em;line-height:1.1765}.h3,.prose h3,.prose-container h3{font-size:var(--typo-h3);font-weight:var(--font-weight-extralight);letter-spacing:.022em;line-height:1.2}.h4,.prose h4,.prose-container h4{font-size:var(--typo-h4);letter-spacing:.035em;line-height:1.25}.h5,.prose h5,.prose-container h5{font-size:var(--typo-h5);letter-spacing:.0532em;line-height:1.28}.h6,.prose h6,.prose-container h6{font-size:var(--typo-h6);letter-spacing:.0532em;line-height:1.28}.p,.prose p,.prose-container p{font-size:1rem;letter-spacing:.03em;line-height:1.5}.p.hero,.prose p.hero,.prose-container p.hero{font-size:var(--typo-p-hero);line-height:1.3}.note{color:var(--color-foreground-scale-g);font-size:.95rem!important;letter-spacing:.05rem!important;line-height:1.5!important}.code,.pre,.prose code,.prose pre,.prose-container code,.prose-container pre{border-radius:.25rem;color:var(--color-foreground-scale-e);font-family:monospace;font-size:.9rem;font-weight:bolder;outline:dashed 2px var(--color-background-scale-g);outline-offset:-2px;padding:.2rem .25rem;transition:color,outline-color;transition-duration:.15s}.code:hover,.pre:hover,.prose code:hover,.prose pre:hover,.prose-container code:hover,.prose-container pre:hover{color:var(--color-global-foreground)}.pre,.prose pre,.prose-container pre{padding:.5rem .75rem}.prose table,.prose-container table,.table{border-collapse:collapse}.prose table td,.prose table th,.prose-container table td,.prose-container table th,.table td,.table th{border:1px solid var(--color-background-scale-f);padding:.5rem;vertical-align:top}.prose table tr:nth-child(2n),.prose-container table tr:nth-child(2n),.table tr:nth-child(2n){background-color:var(--color-background-scale-a)}.prose table th,.prose-container table th,.table th{background-color:var(--color-background-scale-c);font-weight:var(--font-weight-normal);letter-spacing:.1em;text-align:start}.prose table td>:last-child,.prose-container table td>:last-child,.table td>:last-child{margin-block-end:0}.ol,.prose ol,.prose ul,.prose-container ol,.prose-container ul,.ul{list-style-type:disc;padding-inline-start:1.25rem}.ol li ol,.ol li ul,.prose ol li ol,.prose ol li ul,.prose ul li ol,.prose ul li ul,.prose-container ol li ol,.prose-container ol li ul,.prose-container ul li ol,.prose-container ul li ul,.ul li ol,.ul li ul{padding-inline-start:2rem}.ol li:not(:last-child) ol:not(p+ol),.ol li:not(:last-child) ul:not(p+ul),.prose ol li:not(:last-child) ol:not(p+ol),.prose ol li:not(:last-child) ul:not(p+ul),.prose ul li:not(:last-child) ol:not(p+ol),.prose ul li:not(:last-child) ul:not(p+ul),.prose-container ol li:not(:last-child) ol:not(p+ol),.prose-container ol li:not(:last-child) ul:not(p+ul),.prose-container ul li:not(:last-child) ol:not(p+ol),.prose-container ul li:not(:last-child) ul:not(p+ul),.ul li:not(:last-child) ol:not(p+ol),.ul li:not(:last-child) ul:not(p+ul){margin-block-end:0}.ol,.prose ol,.prose-container ol{counter-reset:item;list-style-type:none}.ol>li,.prose ol>li,.prose-container ol>li{counter-increment:item}.ol>li::marker,.prose ol>li::marker,.prose-container ol>li::marker{content:counters(item,".") ". "}.img,.prose img,.prose-container img{border:2px solid var(--color-background-scale-e);border-radius:.25rem;margin-left:auto;margin-right:auto;max-height:450px;width:auto}.figure,.prose figure,.prose-container figure{display:table;margin-left:auto;margin-right:auto}.figure img,.prose figure img,.prose-container figure img{display:block;margin:0}.figure img:has(+figcaption),.prose figure img:has(+figcaption),.prose-container figure img:has(+figcaption){border-bottom-left-radius:0;border-bottom-right-radius:0}.figure figcaption,.prose figure figcaption,.prose-container figure figcaption{background-color:var(--color-background-scale-e);border-bottom-left-radius:.25rem;border-bottom-right-radius:.25rem;caption-side:bottom;display:table-caption;font-size:.85rem;padding:.5rem;text-align:center}.figure figcaption>*,.prose figure figcaption>*,.prose-container figure figcaption>*{font-size:.85rem}.figure figcaption>:last-child,.prose figure figcaption>:last-child,.prose-container figure figcaption>:last-child{margin-block-end:0}.blockquote,.prose blockquote,.prose-container blockquote{background-color:var(--color-background-scale-b);border-radius:.25rem;font-family:serif;font-size:1.1rem;padding:.25rem .75rem}.prose-numbering-2,.prose-numbering-3,.prose-numbering-4,.prose-numbering-5,.prose-numbering-6{counter-reset:l1}:where(.prose-numbering-2,.prose-numbering-3,.prose-numbering-4,.prose-numbering-5,.prose-numbering-6) h2{counter-reset:l2}:where(.prose-numbering-2,.prose-numbering-3,.prose-numbering-4,.prose-numbering-5,.prose-numbering-6) h2:before{content:counter(l1) ". ";counter-increment:l1}:where(.prose-numbering-3,.prose-numbering-4,.prose-numbering-5,.prose-numbering-6) h3{counter-reset:l3}:where(.prose-numbering-3,.prose-numbering-4,.prose-numbering-5,.prose-numbering-6) h3:before{content:counter(l1) "." counter(l2) ". ";counter-increment:l2}:where(.prose-numbering-4,.prose-numbering-5,.prose-numbering-6) h4{counter-reset:l4}:where(.prose-numbering-4,.prose-numbering-5,.prose-numbering-6) h4:before{content:counter(l1) "." counter(l2) "." counter(l3) ". ";counter-increment:l3}:where(.prose-numbering-5,.prose-numbering-6) h5{counter-reset:l5}:where(.prose-numbering-5,.prose-numbering-6) h5:before{content:counter(l1) "." counter(l2) "." counter(l3) "." counter(l4) ". ";counter-increment:l4}.prose-numbering-6 h6{counter-reset:l6}.prose-numbering-6 h6:before{content:counter(l1) "." counter(l2) "." counter(l3) "." counter(l4) "." counter(l5) ". ";counter-increment:l5}}
+@utility prose-layout-container{margin-left:auto;margin-right:auto;max-width:var(--container-3xl);width:100%;&.sm{max-width:var(--container-md)}}@layer components{:root{--typo-h6:clamp(var(--text-base),2.500vw,1.2rem);--typo-h5:clamp(var(--typo-h6),3.000vw,1.44rem);--typo-h4:clamp(var(--typo-h5),3.600vw,1.728rem);--typo-h3:clamp(var(--typo-h4),4.320vw,2.0736rem);--typo-h2:clamp(var(--typo-h3),5.184vw,2.4883rem);--typo-h1:clamp(var(--typo-h2),6.221vw,2.986rem);--typo-h1-hero:clamp(var(--typo-h1),9.331vw,4.479rem);--typo-p-hero:clamp(1.25rem,3.125vw,1.5rem);--extra-scroll-margin:0px}.font-variant-small-caps{font-variant:small-caps}.icon-inline{align-items:center;display:inline-flex}.icon-inline:before{content:"​";display:block}.prose-container{@apply prose-layout-container}.prose-container:where(:not(.prose+.prose-container,.prose-container+.prose-container))>:first-child,.prose-container:where(:not(.prose+.prose-container,.prose-container+.prose-container))>:first-child>:first-child,.prose:where(:not(.prose+.prose,.prose-container+.prose))>:first-child,.prose:where(:not(.prose+.prose,.prose-container+.prose))>:first-child>:first-child{margin-block-start:0}.prose-container>:last-child,.prose-container>:last-child>:last-child,.prose>:last-child,.prose>:last-child>:last-child{margin-block-end:0}:where(.h1,.h2,.h3,.h4,.h5,.h6).prose,:where(.prose-container,.prose) :where(h1,h2,h3,h4,h5,h6){margin-block-end:.4lh;margin-block-start:.9lh;scroll-margin-block-start:calc(--spacing(6) + var(--extra-scroll-margin, 0px));text-wrap:pretty}:where(.p,.pre,.table,.ol,.ul,.img,.figure,.blockquote).prose,:where(.prose-container,.prose) :where(p,pre,table,ol,ul,img,figure,blockquote){margin-block-end:1lh;text-wrap:pretty}:where(.prose-container,.prose) hr+*{margin-block-start:0}:where(.prose-container,.prose) :has(+hr){margin-block-end:0}.hr,.prose hr,.prose-container hr{border-color:var(--color-global-background-accent);margin-block-end:1lh;margin-block-start:1lh}.h1,.prose h1,.prose-container h1{color:color-mix(in srgb-linear,var(--custom-accent-color) 40%,currentColor);font-size:var(--typo-h1);letter-spacing:.0025em;line-height:1.125}.h1.hero,.prose h1.hero,.prose-container h1.hero{font-size:var(--typo-h1-hero);line-height:1}.h2,.prose h2,.prose-container h2{font-size:var(--typo-h2);font-weight:var(--font-weight-extralight);letter-spacing:.0108em;line-height:1.1765}.h3,.prose h3,.prose-container h3{font-size:var(--typo-h3);font-weight:var(--font-weight-extralight);letter-spacing:.022em;line-height:1.2}.h4,.prose h4,.prose-container h4{font-size:var(--typo-h4);letter-spacing:.035em;line-height:1.25}.h5,.prose h5,.prose-container h5{font-size:var(--typo-h5);letter-spacing:.0532em;line-height:1.28}.h6,.prose h6,.prose-container h6{font-size:var(--typo-h6);letter-spacing:.0532em;line-height:1.28}.p,.prose p,.prose-container p{font-size:1rem;letter-spacing:.03em;line-height:1.5}.p.hero,.prose p.hero,.prose-container p.hero{font-size:var(--typo-p-hero);line-height:1.3}.note{color:var(--color-foreground-scale-g);font-size:.95rem!important;letter-spacing:.05rem!important;line-height:1.5!important}.code,.pre,.prose code,.prose pre,.prose-container code,.prose-container pre{border-radius:.25rem;color:var(--color-foreground-scale-e);font-family:monospace;font-size:.9rem;font-weight:bolder;outline:dashed 2px var(--color-background-scale-g);outline-offset:-2px;padding:.2rem .25rem;transition:color,outline-color;transition-duration:.15s}.code:hover,.pre:hover,.prose code:hover,.prose pre:hover,.prose-container code:hover,.prose-container pre:hover{color:var(--color-global-foreground)}.pre,.prose pre,.prose-container pre{padding:.5rem .75rem}.prose table,.prose-container table,.table{border-collapse:collapse}.prose table td,.prose table th,.prose-container table td,.prose-container table th,.table td,.table th{border:1px solid var(--color-background-scale-f);padding:.5rem;vertical-align:top}.prose table tr:nth-child(2n),.prose-container table tr:nth-child(2n),.table tr:nth-child(2n){background-color:var(--color-background-scale-a)}.prose table th,.prose-container table th,.table th{background-color:var(--color-background-scale-c);font-weight:var(--font-weight-normal);letter-spacing:.1em;text-align:start}.prose table td>:last-child,.prose-container table td>:last-child,.table td>:last-child{margin-block-end:0}.ol,.prose ol,.prose ul,.prose-container ol,.prose-container ul,.ul{list-style-type:disc;padding-inline-start:1.25rem}.ol li ol,.ol li ul,.prose ol li ol,.prose ol li ul,.prose ul li ol,.prose ul li ul,.prose-container ol li ol,.prose-container ol li ul,.prose-container ul li ol,.prose-container ul li ul,.ul li ol,.ul li ul{padding-inline-start:2rem}.ol li:not(:last-child) ol:not(p+ol),.ol li:not(:last-child) ul:not(p+ul),.prose ol li:not(:last-child) ol:not(p+ol),.prose ol li:not(:last-child) ul:not(p+ul),.prose ul li:not(:last-child) ol:not(p+ol),.prose ul li:not(:last-child) ul:not(p+ul),.prose-container ol li:not(:last-child) ol:not(p+ol),.prose-container ol li:not(:last-child) ul:not(p+ul),.prose-container ul li:not(:last-child) ol:not(p+ol),.prose-container ul li:not(:last-child) ul:not(p+ul),.ul li:not(:last-child) ol:not(p+ol),.ul li:not(:last-child) ul:not(p+ul){margin-block-end:0}.ol,.prose ol,.prose-container ol{counter-reset:item;list-style-type:none}.ol>li,.prose ol>li,.prose-container ol>li{counter-increment:item}.ol>li::marker,.prose ol>li::marker,.prose-container ol>li::marker{content:counters(item,".") ". "}.img,.prose img,.prose-container img{border:2px solid var(--color-background-scale-e);border-radius:.25rem;margin-left:auto;margin-right:auto;max-height:450px;width:auto}.figure,.prose figure,.prose-container figure{display:table;margin-left:auto;margin-right:auto}.figure img,.prose figure img,.prose-container figure img{display:block;margin:0}.figure img:has(+figcaption),.prose figure img:has(+figcaption),.prose-container figure img:has(+figcaption){border-bottom-left-radius:0;border-bottom-right-radius:0}.figure figcaption,.prose figure figcaption,.prose-container figure figcaption{background-color:var(--color-background-scale-e);border-bottom-left-radius:.25rem;border-bottom-right-radius:.25rem;caption-side:bottom;display:table-caption;font-size:.85rem;padding:.5rem;text-align:center}.figure figcaption>*,.prose figure figcaption>*,.prose-container figure figcaption>*{font-size:.85rem}.figure figcaption>:last-child,.prose figure figcaption>:last-child,.prose-container figure figcaption>:last-child{margin-block-end:0}.blockquote,.prose blockquote,.prose-container blockquote{background-color:var(--color-background-scale-b);border-radius:.25rem;font-family:serif;font-size:1.1rem;padding:.25rem .75rem}.prose-numbering-2,.prose-numbering-3,.prose-numbering-4,.prose-numbering-5,.prose-numbering-6{counter-reset:l1}:where(.prose-numbering-2,.prose-numbering-3,.prose-numbering-4,.prose-numbering-5,.prose-numbering-6) h2{counter-reset:l2}:where(.prose-numbering-2,.prose-numbering-3,.prose-numbering-4,.prose-numbering-5,.prose-numbering-6) h2:before{content:counter(l1) ". ";counter-increment:l1}:where(.prose-numbering-3,.prose-numbering-4,.prose-numbering-5,.prose-numbering-6) h3{counter-reset:l3}:where(.prose-numbering-3,.prose-numbering-4,.prose-numbering-5,.prose-numbering-6) h3:before{content:counter(l1) "." counter(l2) ". ";counter-increment:l2}:where(.prose-numbering-4,.prose-numbering-5,.prose-numbering-6) h4{counter-reset:l4}:where(.prose-numbering-4,.prose-numbering-5,.prose-numbering-6) h4:before{content:counter(l1) "." counter(l2) "." counter(l3) ". ";counter-increment:l3}:where(.prose-numbering-5,.prose-numbering-6) h5{counter-reset:l5}:where(.prose-numbering-5,.prose-numbering-6) h5:before{content:counter(l1) "." counter(l2) "." counter(l3) "." counter(l4) ". ";counter-increment:l4}.prose-numbering-6 h6{counter-reset:l6}.prose-numbering-6 h6:before{content:counter(l1) "." counter(l2) "." counter(l3) "." counter(l4) "." counter(l5) ". ";counter-increment:l5}}

package/dist/runtime/utils/routing.d.ts

@@ -0,0 +1,14 @@
+import type { RouteLocationGeneric } from 'vue-router';
+/**
+ * Strictly compare the entirety of two URLs, including their hashes.
+ *
+ * This is required for two reasons:
+ *
+ * 1) NuxtLink does not provide equivalent results when parsing `:to` and `:href`
+ * props (the value of a URL's `hash` will appear in the `fullPath` of the former,
+ * but not the latter).
+ * 2) NuxtLink does not take into account the value of `hash` when computing whether
+ * a link is active. This makes sense for a lot of circumstances, but in some cases
+ * is required.
+ */
+export declare function areRoutesStrictEqual(routeA: RouteLocationGeneric | undefined, routeB: RouteLocationGeneric | undefined): boolean;

package/dist/runtime/utils/routing.js

@@ -0,0 +1,14 @@
+export function areRoutesStrictEqual(routeA, routeB) {
+  if (!(routeA && routeB)) {
+    return false;
+  }
+  let fullPathA = routeA.fullPath;
+  let fullPathB = routeB.fullPath;
+  if (routeA.hash && !fullPathA.endsWith(routeA.hash)) {
+    fullPathA += routeA.hash;
+  }
+  if (routeB.hash && !fullPathB.endsWith(routeB.hash)) {
+    fullPathB += routeB.hash;
+  }
+  return fullPathA === fullPathB;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@resee-movies/nuxt-ux",
-  "version": "0.17.0",
+  "version": "0.18.0",
   "description": "The next-gen user experience library for ReSee Movies - currently in development. ",
   "repository": {
     "url": "https://github.com/ReSee-Movies/nuxt-ux.git"
@@ -35,7 +35,7 @@
     "dist"
   ],
   "scripts": {
-    "dev": "npm run dev:prepare && nuxi dev playground --local --port 3003",
+    "dev": "npm run dev:prepare && nuxi dev playground --port 3003 --public",
     "dev:preview": "npm run dev:build && nuxi preview playground --port 3003",
     "dev:build": "nuxi build playground",
     "dev:prepare": "nuxt-module-build build --stub && nuxt-module-build prepare && nuxi prepare playground",
@@ -72,19 +72,19 @@
   "dependencies": {
     "@egoist/tailwindcss-icons": "^1.9.0",
     "@iconify-json/ph": "^1.2.2",
-    "@iconify-json/simple-icons": "^1.2.61",
+    "@iconify-json/simple-icons": "^1.2.65",
     "@iconify-json/solar": "^1.2.5",
     "@nuxt/fonts": "^0.12.1",
     "@nuxtjs/device": "^4.0.0",
     "@primeuix/utils": "^0.6.1",
-    "@primevue/forms": "^4.5.1",
-    "@primevue/nuxt-module": "^4.5.1",
+    "@primevue/forms": "^4.5.4",
+    "@primevue/nuxt-module": "^4.5.4",
     "@resee-movies/utilities": "^0.11.0",
-    "@tailwindcss/postcss": "^4.1.17",
-    "@tailwindcss/vite": "^4.1.17",
+    "@tailwindcss/postcss": "^4.1.18",
+    "@tailwindcss/vite": "^4.1.18",
     "@vueuse/core": "^14.1.0",
-    "primevue": "^4.5.1",
-    "tailwindcss": "^4.1.17",
-    "zod": "^4.1.13"
+    "primevue": "^4.5.4",
+    "tailwindcss": "^4.1.18",
+    "zod": "^4.3.5"
   }
 }