@resee-movies/nuxt-ux 0.16.0 → 0.18.0

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@resee-movies/nuxt-ux",
   "configKey": "ux",
-  "version": "0.16.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/GlobalHeaderAnnouncement.vue

@@ -45,5 +45,5 @@ function dismissAnnouncement() {
 </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}
+@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:--spacing(12)}
 </style>

package/dist/runtime/components/ImageTiler.vue

@@ -0,0 +1,193 @@
+<template>
+  <div :class="['tiler', props.maskPreset]">
+    <div v-for="(entry, idx) of displayArray" :key="idx">
+      <ImageBase
+        :src     = "entry.source"
+        aspect   = "poster"
+        :class   = "[props.imageClass, { 'opacity-0': entry.switching || entry.loading }]"
+        :style   = "{ '--duration': `${entry.switchTime}ms`, '--delay': `${entry.switchDelay}ms` }"
+        @loading = "entry.loading = true"
+        @load    = "entry.loading = false"
+      />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+@reference "tailwindcss";@layer components{.tiler{-moz-column-gap:--spacing(v-bind(grid.gapY));column-gap:--spacing(v-bind(grid.gapY));display:grid;grid-template-columns:repeat(v-bind(grid.cols),1fr);row-gap:--spacing(v-bind(grid.gapX))}.tiler>div{justify-self:center}img{--duration:200ms;--delay:0ms;transition:opacity;transition-delay:var(--delay);transition-duration:var(--duration);transition-timing-function:ease-out}}
+</style>
+
+<script>
+export const DefaultImageTilerGridSizeFallback = {
+  cols: 5,
+  rows: 8,
+  gap: 3
+};
+export const DefaultImageTilerGridSizeDefinition = {
+  md: {
+    cols: 7,
+    rows: 5
+  },
+  lg: {
+    cols: 10,
+    rows: 5
+  }
+};
+</script>
+
+<script setup>
+import { useState } from "#imports";
+import { getRandomEntry } from "@resee-movies/utilities/arrays/get-random-entry";
+import { normalizeImageFileDescriptor } from "@resee-movies/utilities/images/normalize-image-file-descriptor";
+import { getRandomInteger } from "@resee-movies/utilities/numbers/get-random-integer";
+import { toInteger } from "@resee-movies/utilities/numbers/to-integer";
+import { sleep } from "@resee-movies/utilities/timers/sleep";
+import { computed, onMounted, shallowReactive, useId, watch } from "vue";
+import { useSettingsForBreakpoint } from "../composables/use-settings-for-breakpoint";
+import ImageBase from "./ImageBase.vue";
+const props = defineProps({
+  images: { type: Array, required: true },
+  play: { type: Boolean, required: false, default: true },
+  gridSettings: { type: Object, required: false, default: () => DefaultImageTilerGridSizeDefinition },
+  turnoverRate: { type: [String, Number, Array], required: false, default: () => [2e3, 6e3] },
+  switchTime: { type: [String, Number, Array], required: false, default: () => [1200, 1800] },
+  switchDelay: { type: [String, Number, Array], required: false, default: () => [0, 500] },
+  imageClass: { type: null, required: false, default: void 0 },
+  maskPreset: { type: [String, Array], required: false }
+});
+const gridSettingsForBreakpoint = useSettingsForBreakpoint(() => props.gridSettings);
+const grid = computed(() => {
+  const settings = gridSettingsForBreakpoint.value;
+  const rows = settings?.rows ?? DefaultImageTilerGridSizeFallback.rows;
+  const cols = settings?.cols ?? DefaultImageTilerGridSizeFallback.cols;
+  const cells = rows * cols;
+  const gapX = settings?.gapX ?? settings?.gap ?? DefaultImageTilerGridSizeFallback.gap;
+  const gapY = settings?.gapY ?? settings?.gap ?? DefaultImageTilerGridSizeFallback.gap;
+  return { rows, cols, cells, gapX, gapY };
+});
+const componentId = useId();
+const displayArray = useState(componentId, () => {
+  const arr = [];
+  for (let i = 0; i < grid.value.cells; i += 1) {
+    arr.push(generateImageDisplayInfo(i, arr));
+  }
+  return arr;
+});
+onMounted(() => {
+  showAll();
+  queueNextChange();
+});
+watch(() => grid.value.cells, (newCount, oldCount) => {
+  if (newCount < oldCount) {
+    displayArray.value.splice(newCount, Number.POSITIVE_INFINITY);
+    return;
+  }
+  if (newCount > oldCount) {
+    while (displayArray.value.length < newCount) {
+      const info = generateImageDisplayInfo(displayArray.value.length, displayArray.value);
+      displayArray.value.push(info);
+      showImageCellContent(info);
+    }
+  }
+});
+function queueNextChange() {
+  setTimeout(async () => {
+    if (props.play) {
+      const idx = getValueFromRange([0, displayArray.value.length - 1]);
+      const info = displayArray.value[idx];
+      if (info) {
+        await switchImageCellContent(info, idx);
+      }
+    }
+    queueNextChange();
+  }, getValueFromRange(props.turnoverRate));
+}
+function getValueFromRange(value) {
+  return Array.isArray(value) ? getRandomInteger(value[0], value[1]) : toInteger(value);
+}
+function pickImage(forIdx, forArray) {
+  let candidate = normalizeImageFileDescriptor(getRandomEntry(props.images));
+  if (props.images.length > 5) {
+    const neighbors = getNeighborIndexes(
+      forIdx,
+      grid.value.cols,
+      grid.value.rows,
+      props.images.length > 9 ? "8-edge" : "4-edge"
+    );
+    neighbors.push(forIdx);
+    for (let maxAttempts = 0; maxAttempts < 3; maxAttempts += 1) {
+      if (isImageInUse(candidate, forArray, neighbors)) {
+        candidate = normalizeImageFileDescriptor(getRandomEntry(props.images));
+      } else {
+        break;
+      }
+    }
+  }
+  return candidate;
+}
+function getNeighborIndexes(centerIdx, columnCount, rowCount, distance = "8-edge") {
+  const rowOffset = Math.floor(centerIdx / columnCount);
+  const colOffset = centerIdx % columnCount;
+  const top = rowOffset > 0 ? centerIdx - columnCount : -1;
+  const right = colOffset < columnCount ? centerIdx + 1 : -1;
+  const bottom = rowOffset < rowCount ? centerIdx + columnCount : -1;
+  const left = colOffset > 0 ? centerIdx - 1 : -1;
+  if (distance === "4-edge") {
+    return [top, right, bottom, left];
+  }
+  const topRight = top > -1 && right > -1 ? top + 1 : -1;
+  const bottomRight = bottom > -1 && right > -1 ? bottom + 1 : -1;
+  const bottomLeft = bottom > -1 && left > -1 ? bottom - 1 : -1;
+  const topLeft = top > -1 && left > -1 ? top - 1 : -1;
+  return [top, topRight, right, bottomRight, bottom, bottomLeft, left, topLeft];
+}
+function isImageInUse(candidate, sourceArray, indicesToCheck) {
+  for (const idx of indicesToCheck) {
+    if (idx < 0 || idx > sourceArray.length) {
+      continue;
+    }
+    if (sourceArray.at(idx)?.source.identifier === candidate.identifier) {
+      return true;
+    }
+  }
+  return false;
+}
+function generateImageDisplayInfo(forIdx, forArray) {
+  return shallowReactive({
+    source: pickImage(forIdx, forArray),
+    loading: true,
+    switching: true,
+    switchTime: getValueFromRange(props.switchTime),
+    switchDelay: getValueFromRange(props.switchDelay)
+  });
+}
+async function hideImageCellContent(info) {
+  if (info.switching) {
+    return;
+  }
+  info.switching = true;
+  await sleep(info.switchTime + info.switchDelay);
+}
+async function showImageCellContent(info) {
+  if (!info.switching) {
+    return;
+  }
+  info.switching = false;
+  await sleep(info.switchTime + info.switchDelay);
+}
+async function switchImageCellContent(info, idx) {
+  await hideImageCellContent(info);
+  info.source = pickImage(idx, displayArray.value);
+  await showImageCellContent(info);
+}
+async function showAll() {
+  return Promise.allSettled(
+    displayArray.value.map((entry) => showImageCellContent(entry))
+  );
+}
+async function hideAll() {
+  return Promise.allSettled(
+    displayArray.value.map((entry) => hideImageCellContent(entry))
+  );
+}
+</script>

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

@@ -0,0 +1,31 @@
+import type { ImageFileDescriptor } from '@resee-movies/utilities/images/normalize-image-file-descriptor';
+import type { BreakpointSettings } from '../composables/use-settings-for-breakpoint.js';
+import type { HTMLElementClassNames } from '../types/index.js';
+export type ValueOrRange = string | number | [min: number, max: number];
+export type ImageTilerGridSizeDefinition = {
+    cols: number;
+    rows: number;
+    gap?: number;
+    gapX?: number;
+    gapY?: number;
+};
+export type ImageMaskPreset = 'image-mask-washout' | 'image-mask-gradient-washout' | 'image-mask-gradient-washout-lite' | 'image-mask-gradient-opacity' | 'image-mask-hero';
+export declare const DefaultImageTilerGridSizeFallback: {
+    cols: number;
+    rows: number;
+    gap: number;
+};
+export declare const DefaultImageTilerGridSizeDefinition: BreakpointSettings<ImageTilerGridSizeDefinition>;
+export interface ImageTilerProps {
+    images: ImageFileDescriptor[];
+    play?: boolean;
+    gridSettings?: BreakpointSettings<ImageTilerGridSizeDefinition>;
+    turnoverRate?: ValueOrRange;
+    switchTime?: ValueOrRange;
+    switchDelay?: ValueOrRange;
+    imageClass?: HTMLElementClassNames;
+    maskPreset?: ImageMaskPreset | ImageMaskPreset[];
+}
+declare const __VLS_export: import("vue").DefineComponent<ImageTilerProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ImageTilerProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/InlineStatsList.vue

@@ -0,0 +1,33 @@
+<template>
+  <div :class="['stats', { responsive: props.responsive }]">
+    <dl>
+      <slot name="default">
+        <template v-if="props.items?.length">
+          <InlineStatsListItem
+            v-for        = "item of props.items"
+            :key         = "item.label"
+            :label       = "item.label"
+            :description = "item.description"
+            :icon        = "item.icon"
+          />
+        </template>
+      </slot>
+    </dl>
+  </div>
+</template>
+
+<script>
+
+</script>
+
+<script setup>
+import InlineStatsListItem from "./InlineStatsListItem.vue";
+const props = defineProps({
+  responsive: { type: Boolean, required: false, default: false },
+  items: { type: Array, required: false, default: void 0 }
+});
+</script>
+
+<style scoped>
+@reference "tailwindcss";.stats{--stats-list-spacer-width:1.2rem;overflow:clip}.stats dl{display:flex;flex-wrap:wrap;margin-inline-start:calc(var(--stats-list-spacer-width)*-1)}.stats.responsive dl{@variant max-sm{flex-direction:column}}
+</style>

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

@@ -0,0 +1,15 @@
+import type { InlineStatsListItemProps } from './InlineStatsListItem.vue.js';
+export interface InlineStatsListProps {
+    responsive?: boolean;
+    items?: InlineStatsListItemProps[];
+}
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<InlineStatsListProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<InlineStatsListProps> & 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/InlineStatsListItem.vue

@@ -0,0 +1,39 @@
+<template>
+  <dt class="sr-only">
+    <slot name="label">
+      {{ props.label }}
+    </slot>
+  </dt>
+
+  <dd>
+    <slot name="default">
+      <IconTextPair :icon="props.icon" :text="props.description">
+        <template #default v-if="slots.description">
+          <slot name="description" />
+        </template>
+      </IconTextPair>
+    </slot>
+  </dd>
+</template>
+
+<script>
+
+</script>
+
+<script setup>
+import IconTextPair from "./IconTextPair.vue";
+import { useSlots } from "vue";
+defineOptions({
+  inheritAttrs: false
+});
+const props = defineProps({
+  label: { type: String, required: true },
+  description: { type: String, required: true },
+  icon: { type: String, required: false, default: void 0 }
+});
+const slots = useSlots();
+</script>
+
+<style scoped>
+@reference "tailwindcss";dd{padding-inline-start:var(--stats-list-spacer-width);position:relative}dd:before{color:var(--color-global-foreground-accent);content:"|";inset-inline-start:0;margin-inline:--spacing(2);position:absolute}
+</style>

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

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

package/dist/runtime/components/TableOfContents.vue

@@ -0,0 +1,56 @@
+<template>
+  <ol v-if="props.toc?.length">
+    <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>
+
+<script>
+
+</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 },
+  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

@@ -0,0 +1,15 @@
+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: 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;
+export default _default;

package/dist/runtime/components/form/Form.vue

@@ -23,6 +23,7 @@
       <PrimeForm
         v-slot                    = "$form"
         v-bind                    = "$attrs"
+        :id                       = "formUid"
         ref                       = "form"
         novalidate                = "true"
         :validate-on-mount        = "true"
@@ -54,7 +55,7 @@ import PrimeForm, {} from "@primevue/forms/form";
 import { toNonNullableArray } from "@resee-movies/utilities/arrays/to-non-nullable-array";
 import { isPromiseLike } from "@resee-movies/utilities/objects/is-promise-like";
 import { syncRefs } from "@vueuse/core";
-import { ref, useTemplateRef } from "vue";
+import { ref, useId, useTemplateRef } from "vue";
 import FormFieldBuilder from "./FormFieldBuilder.vue";
 import LazySuccessSplash from "../SuccessSplash.vue";
 import LazyMessage from "../Message.vue";
@@ -76,8 +77,9 @@ const form = useTemplateRef("form");
 const values = defineModel("values", { type: null, ...{ default: void 0 } });
 const success = ref(false);
 const errors = ref();
+const formUid = useId();
 defineEmits(["submit", "change"]);
-const formInstance = provideFormInstance();
+const formInstance = provideFormInstance(formUid);
 syncRefs(() => props.disabled, formInstance.isDisabled);
 useReactiveObjectsSync({
   left: () => form.value?.states,

package/dist/runtime/components/form/FormField.vue

@@ -42,10 +42,10 @@
           :readonly   = "isReadonly"
           :value      = "$field.value"
           :invalid    = "$field.invalid"
-          :on-blur    = "$field.props.onBlur"
-          :on-change  = "$field.props.onChange"
-          :on-input   = "$field.props.onInput"
-          :on-invalid = "$field.props.onInvalid"
+          :on-blur    = "$field.props?.onBlur"
+          :on-change  = "$field.props?.onChange"
+          :on-input   = "$field.props?.onInput"
+          :on-invalid = "$field.props?.onInvalid"
         />
       </template>
     </FormLabelInputPair>
@@ -87,9 +87,9 @@ const props = defineProps({
   class: { type: null, required: false }
 });
 const formState = injectFormInstance();
-const inputId = useId();
-const labelId = `${inputId}_label`;
-const messageId = `${inputId}_message`;
+const inputId = computed(() => `${formState.formUid}_${props.name}_field`);
+const labelId = computed(() => `${formState.formUid}_${props.name}_label`);
+const messageId = computed(() => `${formState.formUid}_${props.name}_message`);
 const labelText = computed(() => props.label ?? humanize(props.name));
 const isDisabled = computed(() => props.disabled || formState.isDisabled.value);
 const isReadonly = computed(() => props.readonly || formState.isSubmitting.value);

package/dist/runtime/components/form/FormFieldTurnstile.vue

@@ -4,8 +4,9 @@
       <slot name="label" />
     </template>
 
-    <template #default="{ inputName, onChange }">
+    <template #default="{ inputId, inputName, onChange }">
       <FormElementTurnstile
+        :id                  = "inputId"
         :sitekey             = "props.sitekey"
         :response-field-name = "inputName"
         :callback            = "(token) => onChange({ value: token })"

package/dist/runtime/components/form/element/FormElementTurnstile.vue

@@ -16,6 +16,7 @@
 import { onUnmounted, useId } from "#imports";
 import { useCloudflareTurnstile } from "../../../composables/use-cloudflare-turnstile";
 const props = defineProps({
+  id: { type: String, required: false },
   sitekey: { type: String, required: true },
   action: { type: String, required: false },
   cData: { type: String, required: false },
@@ -40,7 +41,7 @@ const props = defineProps({
   appearance: { type: String, required: false, default: "always" },
   "feedback-enabled": { type: Boolean, required: false }
 });
-const widgetId = useId();
+const widgetId = props.id ?? useId();
 const { onReady } = useCloudflareTurnstile();
 let turnstile = void 0;
 onReady((ts) => {

package/dist/runtime/components/form/element/FormElementTurnstile.vue.d.ts

@@ -1,5 +1,6 @@
 import type { TurnstileRenderOptions } from '../../../composables/use-cloudflare-turnstile.js';
 export interface FormElementTurnstileProps extends TurnstileRenderOptions {
+    id?: string;
 }
 declare const __VLS_export: import("vue").DefineComponent<FormElementTurnstileProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<FormElementTurnstileProps> & 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-settings-for-breakpoint.d.ts

@@ -0,0 +1,11 @@
+import type { breakpointsTailwind } from '@vueuse/core';
+import { type ComputedRef, type MaybeRefOrGetter } from 'vue';
+export type BreakpointSettingName = (keyof typeof breakpointsTailwind) | 'default';
+export type BreakpointSettings<T> = Partial<Record<BreakpointSettingName, T>>;
+/**
+ * Given an object whose properties are Tailwind breakpoint names, this will return
+ * the value of the property that matches the active breakpoint. If an exact match
+ * is not available, a mobile-first approach is taken - the first value of a smaller
+ * breakpoint, or finally the `default`, will be returned.
+ */
+export declare function useSettingsForBreakpoint<T>(settings: MaybeRefOrGetter<BreakpointSettings<T> | null | undefined>): ComputedRef<T | undefined>;

package/dist/runtime/composables/use-settings-for-breakpoint.js

@@ -0,0 +1,25 @@
+import { computed, toValue } from "vue";
+import { useReseeBreakpoints } from "./use-resee-breakpoints.js";
+export function useSettingsForBreakpoint(settings) {
+  const ordering = ["default", "sm", "md", "lg", "xl", "2xl"];
+  const activeBreak = useReseeBreakpoints().active();
+  return computed(() => {
+    const breakpoint = activeBreak.value || "default";
+    const rawSettings = toValue(settings);
+    if (!rawSettings) {
+      return void 0;
+    }
+    if (breakpoint in rawSettings) {
+      return rawSettings[breakpoint];
+    }
+    let idx = ordering.indexOf(breakpoint);
+    while (idx > 0) {
+      idx -= 1;
+      const name = ordering[idx];
+      if (name && name in rawSettings) {
+        return rawSettings[name];
+      }
+    }
+    return rawSettings["default"];
+  });
+}

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/image.css

@@ -0,0 +1 @@
+@layer base{:root{--image-mask-gradient-opacity-dir:to bottom;--image-mask-gradient-opacity-stop:85%;--image-mask-gradient-dir:to bottom;--image-mask-gradient-stop:80%;--image-mask-color:var(--color-global-background);--image-mask-alpha-percent:85%}}@utility image-mask-washout{@apply relative before:z-1 before:absolute before:inset-0;&:before{background:--alpha(var(--image-mask-color)/var(--image-mask-alpha-percent))}}@utility image-mask-gradient-washout{@apply relative before:z-1 before:absolute before:inset-0;&:before{background:linear-gradient(var(--image-mask-gradient-dir),--alpha(var(--image-mask-color)/var(--image-mask-alpha-percent)) var(--image-mask-gradient-stop),var(--image-mask-color))}}@utility image-mask-gradient-washout-lite{@apply relative before:z-1 before:absolute before:inset-0;--image-mask-alpha-percent:10%;--image-mask-gradient-stop:30%;&:before{background:linear-gradient(var(--image-mask-gradient-dir),--alpha(var(--image-mask-color)/var(--image-mask-alpha-percent)) var(--image-mask-gradient-stop),var(--image-mask-color))}}@utility image-mask-gradient-opacity{-webkit-mask-image:linear-gradient(var(--image-mask-gradient-opacity-dir),#000 var(--image-mask-gradient-opacity-stop),transparent);mask-image:linear-gradient(var(--image-mask-gradient-opacity-dir),#000 var(--image-mask-gradient-opacity-stop),transparent)}@utility image-mask-hero{@apply relative before:z-1 before:absolute before:inset-0;--image-mask-color:#fff;@variant dark{--image-mask-color:#000}&:before{background:--alpha(var(--image-mask-color)/75%);@variant sm{background:linear-gradient(to right,--alpha(var(--image-mask-color)/90%) 35%,--alpha(var(--image-mask-color)/15%))}}}

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/theme/css/styles.css

@@ -1 +1 @@
-@import "./brand/anchor.css";@import "./brand/application.css";@import "./brand/button.css";@import "./brand/form.css";@import "./brand/gradient.css";@import "./brand/menu.css";@import "./brand/mobile.css";@import "./brand/status.css";@import "./brand/theme.css";@import "./brand/tooltip.css";@import "./brand/transition.css";@import "./brand/typography.css";@import "./brand/utilities.css";
+@import "./brand/anchor.css";@import "./brand/application.css";@import "./brand/button.css";@import "./brand/form.css";@import "./brand/gradient.css";@import "./brand/image.css";@import "./brand/menu.css";@import "./brand/mobile.css";@import "./brand/status.css";@import "./brand/theme.css";@import "./brand/tooltip.css";@import "./brand/transition.css";@import "./brand/typography.css";@import "./brand/utilities.css";

package/dist/runtime/types/form.d.ts

@@ -9,6 +9,7 @@ export type FormValues = Record<string, any>;
  * injected into descendent components.
  */
 export interface FormInstance {
+    formUid: string | undefined;
     hasSubmitted: Ref<boolean>;
     isSubmitting: Ref<boolean>;
     isDisabled: Ref<boolean>;

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

@@ -13,21 +13,21 @@ export declare const FormSymbol: InjectionKey<FormInstance>;
  *
  * @private
  */
-export declare function createFormInstance(): FormInstance;
+export declare function createFormInstance(uid?: string): FormInstance;
 /**
  * Provides the object that a Form uses to convey stateful information to the
  * DI registry. You shouldn't ever need to use this directly.
  *
  * @private
  */
-export declare function provideFormInstance(): FormInstance;
+export declare function provideFormInstance(uid?: string): FormInstance;
 /**
  * Injects the stateful object provided by an ancestor Form instance. If not
  * available, a dummy state object is generated.
  *
  * @private
  */
-export declare function injectFormInstance(): FormInstance;
+export declare function injectFormInstance(uid?: string): FormInstance;
 /**
  * Takes a Primevue Form's `states` object, and extracts the current values
  * of each named property. In doing so, it will deref proxies, and create

package/dist/runtime/utils/form.js

@@ -4,20 +4,21 @@ import { isObjectLike } from "@resee-movies/utilities/objects/is-object-like";
 import { isString } from "@resee-movies/utilities/strings/is-string";
 import { computed, inject, provide, ref, toRaw, toValue } from "vue";
 export const FormSymbol = Symbol("form");
-export function createFormInstance() {
+export function createFormInstance(uid) {
   return {
+    formUid: uid,
     hasSubmitted: ref(false),
     isSubmitting: ref(false),
     isDisabled: ref(false)
   };
 }
-export function provideFormInstance() {
-  const instance = createFormInstance();
+export function provideFormInstance(uid) {
+  const instance = createFormInstance(uid);
   provide(FormSymbol, instance);
   return instance;
 }
-export function injectFormInstance() {
-  return inject(FormSymbol, () => createFormInstance(), true);
+export function injectFormInstance(uid) {
+  return inject(FormSymbol, () => createFormInstance(uid), true);
 }
 export function getValuesFromFormState(state) {
   const result = {};

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.16.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"
   }
 }