@erudit-js/prose 4.0.0 → 4.1.0

package/dist/app/composables/context.d.ts

@@ -1,4 +1,5 @@
-import { type Component, type InjectionKey, type Ref } from 'vue';
+import { type Component, type InjectionKey, type Ref, type TemplateRef } from 'vue';
+import type { useFloating, UseFloatingOptions } from '@floating-ui/vue';
 import type { EruditLanguageCode } from '@erudit-js/core/eruditConfig/language';
 import type { EruditMode } from '@erudit-js/core/mode';
 import type { FormatText } from '@erudit-js/core/formatText';
@@ -17,6 +18,10 @@ export interface ProseContext {
     EruditLink: Component;
     setPreview: (previewRequest: any) => void;
     closePreview: () => void;
+    usePopup: (containerElement: TemplateRef<HTMLElement>, toggleElement: TemplateRef<HTMLElement>, popupElement: TemplateRef<HTMLElement>, options?: UseFloatingOptions) => {
+        popupVisible: Ref<boolean>;
+        popupStyles: ReturnType<typeof useFloating>['floatingStyles'];
+    };
     loadingSvg: string;
 }
 export declare const proseContextSymbol: InjectionKey<ProseContext>;

package/dist/app/default/Inliners.vue

@@ -1,11 +1,11 @@
-<script lang="ts" setup>
-import type { inlinersSchema, ProseElement } from '@jsprose/core';
-
-import Render from '../shared/Render.vue';
-
-defineProps<{ element: ProseElement<typeof inlinersSchema> }>();
-</script>
-
-<template>
-  <Render v-for="child of element.children" :element="child" />
-</template>
+<script lang="ts" setup>
+import type { inlinersSchema, ProseElement } from '@jsprose/core';
+
+import Render from '../shared/Render.vue';
+
+defineProps<{ element: ProseElement<typeof inlinersSchema> }>();
+</script>
+
+<template>
+  <Render v-for="child of element.children" :element="child" />
+</template>

package/dist/app/default/Mix.vue

@@ -1,11 +1,11 @@
-<script lang="ts" setup>
-import { type mixSchema, type ProseElement } from '@jsprose/core';
-
-import Render from '../shared/Render.vue';
-
-const { element } = defineProps<{ element: ProseElement<typeof mixSchema> }>();
-</script>
-
-<template>
-  <Render v-for="child of element.children" :element="child" />
-</template>
+<script lang="ts" setup>
+import { type mixSchema, type ProseElement } from '@jsprose/core';
+
+import Render from '../shared/Render.vue';
+
+const { element } = defineProps<{ element: ProseElement<typeof mixSchema> }>();
+</script>
+
+<template>
+  <Render v-for="child of element.children" :element="child" />
+</template>

package/dist/app/default/Text.vue

@@ -1,25 +1,25 @@
-<script lang="ts" setup>
-import { Text, h } from 'vue';
-import type { ProseElement, textSchema } from '@jsprose/core';
-
-import {
-  useFormatText,
-  useFormatTextState,
-} from '../composables/formatText.js';
-
-const { element } = defineProps<{ element: ProseElement<typeof textSchema> }>();
-const formatTextState = useFormatTextState();
-const formatText = useFormatText();
-
-const originalText = element.data;
-const leadingSpace = originalText.match(/^(\s*)/)?.[1] ? ' ' : '';
-const trailingSpace = originalText.match(/(\s*)$/)?.[1] ? ' ' : '';
-const formattedText = formatText(originalText, formatTextState);
-const textWithSpaces = leadingSpace + formattedText + trailingSpace;
-
-const TextComponent = h(Text, textWithSpaces);
-</script>
-
-<template>
-  <component :is="TextComponent" />
-</template>
+<script lang="ts" setup>
+import { Text, h } from 'vue';
+import type { ProseElement, textSchema } from '@jsprose/core';
+
+import {
+  useFormatText,
+  useFormatTextState,
+} from '../composables/formatText.js';
+
+const { element } = defineProps<{ element: ProseElement<typeof textSchema> }>();
+const formatTextState = useFormatTextState();
+const formatText = useFormatText();
+
+const originalText = element.data;
+const leadingSpace = originalText.match(/^(\s*)/)?.[1] ? ' ' : '';
+const trailingSpace = originalText.match(/(\s*)$/)?.[1] ? ' ' : '';
+const formattedText = formatText(originalText, formatTextState);
+const textWithSpaces = leadingSpace + formattedText + trailingSpace;
+
+const TextComponent = h(Text, textWithSpaces);
+</script>
+
+<template>
+  <component :is="TextComponent" />
+</template>

package/dist/app/language/element.d.ts

@@ -1,7 +1,7 @@
 export interface ElementDefaultPhrases {
     element_name: string;
 }
-export type ElementPhrases<T extends Record<string, string> = {}> = Omit<T, keyof ElementDefaultPhrases> & ElementDefaultPhrases;
+export type ElementPhrases<T extends Record<string, any> = {}> = Omit<T, keyof ElementDefaultPhrases> & ElementDefaultPhrases;
 export declare function defineElementLanguage<T extends ElementPhrases<T> = ElementPhrases>(phrases: T): T;
 export type ElementLanguagesRaw<T extends ElementPhrases> = Record<string, () => Promise<{
     default: T;

package/dist/app/shared/Prose.vue

@@ -1,40 +1,40 @@
-<script lang="ts" setup>
-import { provide } from 'vue';
-import type { AnySchema, GenericStorage, ProseElement } from '@jsprose/core';
-import { createFormatTextState } from '@erudit-js/core/formatText';
-
-import {
-  proseContextSymbol,
-  type ProseContext,
-} from '../composables/context.js';
-import { proseStorageSymbol } from '../composables/storage.js';
-import Render from './Render.vue';
-import { anchorStateSymbol, useAnchorState } from '../composables/anchor.js';
-import { formatTextStateSymbol } from '../composables/formatText.js';
-
-const { element, storage, context } = defineProps<{
-  element: ProseElement<AnySchema>;
-  storage: GenericStorage;
-  context: ProseContext;
-}>();
-
-provide(proseContextSymbol, context);
-provide(proseStorageSymbol, storage);
-
-const anchorState = useAnchorState(context.hashUrl, element);
-provide(anchorStateSymbol, anchorState);
-
-provide(formatTextStateSymbol, createFormatTextState());
-</script>
-
-<template>
-  <section
-    :style="{ '--proseGap': 'none' }"
-    :class="[
-      /* Variables */
-      'micro:[--proseAsideWidth:20px] [--proseAsideWidth:16px]',
-    ]"
-  >
-    <Render :element />
-  </section>
-</template>
+<script lang="ts" setup>
+import { provide } from 'vue';
+import type { AnySchema, GenericStorage, ProseElement } from '@jsprose/core';
+import { createFormatTextState } from '@erudit-js/core/formatText';
+
+import {
+  proseContextSymbol,
+  type ProseContext,
+} from '../composables/context.js';
+import { proseStorageSymbol } from '../composables/storage.js';
+import Render from './Render.vue';
+import { anchorStateSymbol, useAnchorState } from '../composables/anchor.js';
+import { formatTextStateSymbol } from '../composables/formatText.js';
+
+const { element, storage, context } = defineProps<{
+  element: ProseElement<AnySchema>;
+  storage: GenericStorage;
+  context: ProseContext;
+}>();
+
+provide(proseContextSymbol, context);
+provide(proseStorageSymbol, storage);
+
+const anchorState = useAnchorState(context.hashUrl, element);
+provide(anchorStateSymbol, anchorState);
+
+provide(formatTextStateSymbol, createFormatTextState());
+</script>
+
+<template>
+  <section
+    :style="{ '--proseGap': 'none' }"
+    :class="[
+      /* Variables */
+      'micro:[--proseAsideWidth:20px] [--proseAsideWidth:16px]',
+    ]"
+  >
+    <Render :element />
+  </section>
+</template>

package/dist/app/shared/Render.vue

@@ -1,51 +1,51 @@
-<script lang="ts" setup>
-import { h, type Component } from 'vue';
-import {
-  inlinersSchema,
-  mixSchema,
-  textSchema,
-  type AnySchema,
-  type ProseElement,
-} from '@jsprose/core';
-
-import { useAppElement } from '../composables/appElement.js';
-import Mix from '../default/Mix.vue';
-import Inliners from '../default/Inliners.vue';
-import Text from '../default/Text.vue';
-
-const { element } = defineProps<{ element: ProseElement<AnySchema> }>();
-
-const ElementComponent: Component = await (async () => {
-  switch (element.schemaName) {
-    case mixSchema.name:
-      return Mix;
-    case inlinersSchema.name:
-      return Inliners;
-    case textSchema.name:
-      return Text;
-  }
-
-  try {
-    const appElement = useAppElement(element);
-    return await appElement.component();
-  } catch (error) {
-    console.warn(
-      `[Prose] [Render] Missing component for element schema: ${element.schemaName}`,
-    );
-
-    return {
-      render() {
-        return h(
-          'span',
-          { class: 'text-red-500 font-semibold font-mono' },
-          `<${element.schemaName}/>`,
-        );
-      },
-    };
-  }
-})();
-</script>
-
-<template>
-  <ElementComponent :element />
-</template>
+<script lang="ts" setup>
+import { h, type Component } from 'vue';
+import {
+  inlinersSchema,
+  mixSchema,
+  textSchema,
+  type AnySchema,
+  type ProseElement,
+} from '@jsprose/core';
+
+import { useAppElement } from '../composables/appElement.js';
+import Mix from '../default/Mix.vue';
+import Inliners from '../default/Inliners.vue';
+import Text from '../default/Text.vue';
+
+const { element } = defineProps<{ element: ProseElement<AnySchema> }>();
+
+const ElementComponent: Component = await (async () => {
+  switch (element.schemaName) {
+    case mixSchema.name:
+      return Mix;
+    case inlinersSchema.name:
+      return Inliners;
+    case textSchema.name:
+      return Text;
+  }
+
+  try {
+    const appElement = useAppElement(element);
+    return await appElement.component();
+  } catch (error) {
+    console.warn(
+      `[Prose] [Render] Missing component for element schema: ${element.schemaName}`,
+    );
+
+    return {
+      render() {
+        return h(
+          'span',
+          { class: 'text-red-500 font-semibold font-mono' },
+          `<${element.schemaName}/>`,
+        );
+      },
+    };
+  }
+})();
+</script>
+
+<template>
+  <ElementComponent :element />
+</template>

package/dist/app/shared/assets/block.svg

@@ -1,3 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-  <path d="M11,19.43v-6.85l-6-3.48v6.85l6,3.48ZM13,19.43l6-3.48v-6.85l-6,3.48v6.85ZM12,10.85l5.93-3.43-5.93-3.43-5.93,3.43,5.93,3.43ZM4,17.7c-.32-.18-.56-.43-.74-.73s-.26-.63-.26-1v-7.95c0-.37.09-.7.26-1s.42-.54.74-.73l7-4.03c.32-.18.65-.28,1-.28s.68.09,1,.28l7,4.03c.32.18.56.43.74.73s.26.63.26,1v7.95c0,.37-.09.7-.26,1s-.42.54-.74.73l-7,4.03c-.32.18-.65.28-1,.28s-.68-.09-1-.28l-7-4.03Z"/>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <path d="M11,19.43v-6.85l-6-3.48v6.85l6,3.48ZM13,19.43l6-3.48v-6.85l-6,3.48v6.85ZM12,10.85l5.93-3.43-5.93-3.43-5.93,3.43,5.93,3.43ZM4,17.7c-.32-.18-.56-.43-.74-.73s-.26-.63-.26-1v-7.95c0-.37.09-.7.26-1s.42-.54.74-.73l7-4.03c.32-.18.65-.28,1-.28s.68.09,1,.28l7,4.03c.32.18.56.43.74.73s.26.63.26,1v7.95c0,.37-.09.7-.26,1s-.42.54-.74.73l-7,4.03c-.32.18-.65.28-1,.28s-.68-.09-1-.28l-7-4.03Z"/>
 </svg>

package/dist/app/shared/assets/check.svg

@@ -1,3 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 960">
-  <path d="M353.82,643.31l437.65-437.65c10.33-10.33,22.38-15.49,36.15-15.49s25.82,5.16,36.15,15.49,15.49,22.59,15.49,36.79-5.16,26.47-15.49,36.79l-473.8,475.09c-10.33,10.33-22.38,15.49-36.15,15.49s-25.82-5.16-36.15-15.49l-222.05-222.05c-10.33-10.33-15.28-22.59-14.85-36.79s5.81-26.47,16.14-36.79,22.59-15.49,36.79-15.49,26.47,5.16,36.79,15.49l183.32,184.62Z"/>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 960">
+  <path d="M353.82,643.31l437.65-437.65c10.33-10.33,22.38-15.49,36.15-15.49s25.82,5.16,36.15,15.49,15.49,22.59,15.49,36.79-5.16,26.47-15.49,36.79l-473.8,475.09c-10.33,10.33-22.38,15.49-36.15,15.49s-25.82-5.16-36.15-15.49l-222.05-222.05c-10.33-10.33-15.28-22.59-14.85-36.79s5.81-26.47,16.14-36.79,22.59-15.49,36.79-15.49,26.47,5.16,36.79,15.49l183.32,184.62Z"/>
 </svg>

package/dist/app/shared/assets/inliner.svg

@@ -1,3 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-  <path d="M11.29,4.71c-.19-.19-.29-.43-.29-.71s.1-.52.29-.71c.19-.19.43-.29.71-.29s.52.1.71.29.29.43.29.71-.1.52-.29.71-.43.29-.71.29-.52-.1-.71-.29ZM7.29,4.71c-.19-.19-.29-.43-.29-.71s.1-.52.29-.71.43-.29.71-.29.52.1.71.29.29.43.29.71-.1.52-.29.71-.43.29-.71.29-.52-.1-.71-.29ZM3.29,4.71c-.19-.19-.29-.43-.29-.71s.1-.52.29-.71.43-.29.71-.29.52.1.71.29.29.43.29.71-.1.52-.29.71-.43.29-.71.29-.52-.1-.71-.29ZM3.29,8.71c-.19-.19-.29-.43-.29-.71s.1-.52.29-.71.43-.29.71-.29.52.1.71.29.29.43.29.71-.1.52-.29.71-.43.29-.71.29-.52-.1-.71-.29ZM3.29,12.71c-.19-.19-.29-.43-.29-.71s.1-.52.29-.71c.19-.19.43-.29.71-.29s.52.1.71.29c.19.19.29.43.29.71s-.1.52-.29.71-.43.29-.71.29-.52-.1-.71-.29ZM3.29,16.71c-.19-.19-.29-.43-.29-.71s.1-.52.29-.71.43-.29.71-.29.52.1.71.29.29.43.29.71-.1.52-.29.71-.43.29-.71.29-.52-.1-.71-.29ZM11.29,20.71c-.19-.19-.29-.43-.29-.71s.1-.52.29-.71c.19-.19.43-.29.71-.29s.52.1.71.29.29.43.29.71-.1.52-.29.71c-.19.19-.43.29-.71.29s-.52-.1-.71-.29ZM7.29,20.71c-.19-.19-.29-.43-.29-.71s.1-.52.29-.71.43-.29.71-.29.52.1.71.29.29.43.29.71-.1.52-.29.71c-.19.19-.43.29-.71.29s-.52-.1-.71-.29ZM3.29,20.71c-.19-.19-.29-.43-.29-.71s.1-.52.29-.71.43-.29.71-.29.52.1.71.29.29.43.29.71-.1.52-.29.71c-.19.19-.43.29-.71.29s-.52-.1-.71-.29ZM16,21c-.28,0-.52-.1-.71-.29-.19-.19-.29-.43-.29-.71s.1-.52.29-.71.43-.29.71-.29h1s0-14,0-14h-1c-.28,0-.52-.1-.71-.29s-.29-.43-.29-.71.1-.52.29-.71.43-.29.71-.29h4c.28,0,.52.1.71.29.19.19.29.43.29.71s-.1.52-.29.71c-.19.19-.43.29-.71.29h-1s0,14,0,14h1c.28,0,.52.1.71.29.19.19.29.43.29.71s-.1.52-.29.71c-.19.19-.43.29-.71.29h-4Z"/>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <path d="M11.29,4.71c-.19-.19-.29-.43-.29-.71s.1-.52.29-.71c.19-.19.43-.29.71-.29s.52.1.71.29.29.43.29.71-.1.52-.29.71-.43.29-.71.29-.52-.1-.71-.29ZM7.29,4.71c-.19-.19-.29-.43-.29-.71s.1-.52.29-.71.43-.29.71-.29.52.1.71.29.29.43.29.71-.1.52-.29.71-.43.29-.71.29-.52-.1-.71-.29ZM3.29,4.71c-.19-.19-.29-.43-.29-.71s.1-.52.29-.71.43-.29.71-.29.52.1.71.29.29.43.29.71-.1.52-.29.71-.43.29-.71.29-.52-.1-.71-.29ZM3.29,8.71c-.19-.19-.29-.43-.29-.71s.1-.52.29-.71.43-.29.71-.29.52.1.71.29.29.43.29.71-.1.52-.29.71-.43.29-.71.29-.52-.1-.71-.29ZM3.29,12.71c-.19-.19-.29-.43-.29-.71s.1-.52.29-.71c.19-.19.43-.29.71-.29s.52.1.71.29c.19.19.29.43.29.71s-.1.52-.29.71-.43.29-.71.29-.52-.1-.71-.29ZM3.29,16.71c-.19-.19-.29-.43-.29-.71s.1-.52.29-.71.43-.29.71-.29.52.1.71.29.29.43.29.71-.1.52-.29.71-.43.29-.71.29-.52-.1-.71-.29ZM11.29,20.71c-.19-.19-.29-.43-.29-.71s.1-.52.29-.71c.19-.19.43-.29.71-.29s.52.1.71.29.29.43.29.71-.1.52-.29.71c-.19.19-.43.29-.71.29s-.52-.1-.71-.29ZM7.29,20.71c-.19-.19-.29-.43-.29-.71s.1-.52.29-.71.43-.29.71-.29.52.1.71.29.29.43.29.71-.1.52-.29.71c-.19.19-.43.29-.71.29s-.52-.1-.71-.29ZM3.29,20.71c-.19-.19-.29-.43-.29-.71s.1-.52.29-.71.43-.29.71-.29.52.1.71.29.29.43.29.71-.1.52-.29.71c-.19.19-.43.29-.71.29s-.52-.1-.71-.29ZM16,21c-.28,0-.52-.1-.71-.29-.19-.19-.29-.43-.29-.71s.1-.52.29-.71.43-.29.71-.29h1s0-14,0-14h-1c-.28,0-.52-.1-.71-.29s-.29-.43-.29-.71.1-.52.29-.71.43-.29.71-.29h4c.28,0,.52.1.71.29.19.19.29.43.29.71s-.1.52-.29.71c-.19.19-.43.29-.71.29h-1s0,14,0,14h1c.28,0,.52.1.71.29.19.19.29.43.29.71s-.1.52-.29.71c-.19.19-.43.29-.71.29h-4Z"/>
 </svg>

package/dist/app/shared/assets/plus.svg

@@ -1,3 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-  <path d="M10.76,13.24h-6.18c-.35,0-.64-.12-.88-.36s-.36-.53-.36-.88.12-.64.36-.88.53-.36.88-.36h6.18v-6.18c0-.35.12-.64.36-.88s.53-.36.88-.36.64.12.88.36.36.53.36.88v6.18h6.18c.35,0,.64.12.88.36.23.23.36.53.36.88s-.12.64-.36.88-.53.36-.88.36h-6.18v6.18c0,.35-.12.64-.36.88-.23.23-.53.36-.88.36s-.64-.12-.88-.36-.36-.53-.36-.88v-6.18Z"/>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <path d="M10.76,13.24h-6.18c-.35,0-.64-.12-.88-.36s-.36-.53-.36-.88.12-.64.36-.88.53-.36.88-.36h6.18v-6.18c0-.35.12-.64.36-.88s.53-.36.88-.36.64.12.88.36.36.53.36.88v6.18h6.18c.35,0,.64.12.88.36.23.23.36.53.36.88s-.12.64-.36.88-.53.36-.88.36h-6.18v6.18c0,.35-.12.64-.36.88-.23.23-.53.36-.88.36s-.64-.12-.88-.36-.36-.53-.36-.88v-6.18Z"/>
 </svg>

package/dist/app/shared/block/AsideMenu.vue

@@ -1,44 +1,44 @@
-<script setup lang="ts">
-import { computed } from 'vue';
-import type { AnySchema, ProseElement } from '@jsprose/core';
-
-import { useElementPhrase } from '../../composables/language.js';
-import AsideMenuSeparator from './AsideMenuSeparator.vue';
-import AsideMenuCopyLink from './AsideMenuCopyLink.vue';
-
-const { element } = defineProps<{
-  element: ProseElement<AnySchema>;
-}>();
-
-const hasLink = computed(() => {
-  return Boolean(element.id);
-});
-
-const hasButtons = computed(() => {
-  return hasLink.value;
-});
-
-const phrase = await useElementPhrase(element);
-</script>
-
-<template>
-  <div
-    :style="{
-      '--asideMenuGap': '5px',
-      '--asideMenuGapBig': 'calc(var(--asideMenuGap) * 2)',
-    }"
-    class="bg-bg-main border-border flex w-40 flex-col rounded-sm border
-      py-(--asideMenuGap) font-sans
-      shadow-[0_0_12px_5px_light-dark(rgba(0,0,0,0.12),rgba(255,255,255,0.08))]
-      backface-hidden"
-  >
-    <div
-      class="flex items-center gap-(--asideMenuGapBig) px-(--asideMenuGapBig)
-        py-(--asideMenuGap) text-xs font-medium"
-    >
-      <div>{{ phrase.element_name }}</div>
-    </div>
-    <AsideMenuSeparator v-if="hasButtons" />
-    <AsideMenuCopyLink v-if="hasLink" :elementId="element.id!" />
-  </div>
-</template>
+<script setup lang="ts">
+import { computed } from 'vue';
+import type { AnySchema, ProseElement } from '@jsprose/core';
+
+import { useElementPhrase } from '../../composables/language.js';
+import AsideMenuSeparator from './AsideMenuSeparator.vue';
+import AsideMenuCopyLink from './AsideMenuCopyLink.vue';
+
+const { element } = defineProps<{
+  element: ProseElement<AnySchema>;
+}>();
+
+const hasLink = computed(() => {
+  return Boolean(element.id);
+});
+
+const hasButtons = computed(() => {
+  return hasLink.value;
+});
+
+const phrase = await useElementPhrase(element);
+</script>
+
+<template>
+  <div
+    :style="{
+      '--asideMenuGap': '5px',
+      '--asideMenuGapBig': 'calc(var(--asideMenuGap) * 2)',
+    }"
+    class="bg-bg-main border-border flex w-40 flex-col rounded-sm border
+      py-(--asideMenuGap) font-sans
+      shadow-[0_0_12px_5px_light-dark(rgba(0,0,0,0.12),rgba(255,255,255,0.08))]
+      backface-hidden"
+  >
+    <div
+      class="flex items-center gap-(--asideMenuGapBig) px-(--asideMenuGapBig)
+        py-(--asideMenuGap) text-xs font-medium"
+    >
+      <div>{{ phrase.element_name }}</div>
+    </div>
+    <AsideMenuSeparator v-if="hasButtons" />
+    <AsideMenuCopyLink v-if="hasLink" :elementId="element.id!" />
+  </div>
+</template>

package/dist/app/shared/block/AsideMenuButton.vue

@@ -1,51 +1,51 @@
-<script lang="ts" setup>
-import { ref, watch } from 'vue';
-
-import { useProseContext } from '../../composables/context.js';
-
-const { icon, title } = defineProps<{
-  icon: string;
-  title: string;
-  brand?: boolean;
-}>();
-
-const { EruditIcon, EruditTransition } = useProseContext();
-
-const key = ref(0);
-watch(
-  () => [icon, title],
-  () => {
-    key.value++;
-  },
-);
-</script>
-
-<template>
-  <button
-    :class="[
-      'relative cursor-pointer text-left text-xs transition-[color,background]',
-      brand
-        ? 'text-brand bg-brand/10'
-        : 'hocus:bg-bg-accent text-text-muted hocus:text-text',
-    ]"
-  >
-    <div
-      class="pointer-events-none invisible flex touch-none flex-wrap
-        items-center gap-(--asideMenuGapBig) px-(--asideMenuGapBig)
-        py-(--asideMenuGap)"
-    >
-      <EruditIcon :name="icon" class="shrink-0 text-[1.2em]" />
-      <div>{{ title }}</div>
-    </div>
-    <EruditTransition>
-      <div
-        :key
-        class="absolute top-0 left-0 flex flex-wrap items-center
-          gap-(--asideMenuGapBig) px-(--asideMenuGapBig) py-(--asideMenuGap)"
-      >
-        <EruditIcon :name="icon" class="shrink-0 text-[1.2em]" />
-        <div>{{ title }}</div>
-      </div>
-    </EruditTransition>
-  </button>
-</template>
+<script lang="ts" setup>
+import { ref, watch } from 'vue';
+
+import { useProseContext } from '../../composables/context.js';
+
+const { icon, title } = defineProps<{
+  icon: string;
+  title: string;
+  brand?: boolean;
+}>();
+
+const { EruditIcon, EruditTransition } = useProseContext();
+
+const key = ref(0);
+watch(
+  () => [icon, title],
+  () => {
+    key.value++;
+  },
+);
+</script>
+
+<template>
+  <button
+    :class="[
+      'relative cursor-pointer text-left text-xs transition-[color,background]',
+      brand
+        ? 'text-brand bg-brand/10'
+        : 'hocus:bg-bg-accent text-text-muted hocus:text-text',
+    ]"
+  >
+    <div
+      class="pointer-events-none invisible flex touch-none flex-wrap
+        items-center gap-(--asideMenuGapBig) px-(--asideMenuGapBig)
+        py-(--asideMenuGap)"
+    >
+      <EruditIcon :name="icon" class="shrink-0 text-[1.2em]" />
+      <div>{{ title }}</div>
+    </div>
+    <EruditTransition>
+      <div
+        :key
+        class="absolute top-0 left-0 flex flex-wrap items-center
+          gap-(--asideMenuGapBig) px-(--asideMenuGapBig) py-(--asideMenuGap)"
+      >
+        <EruditIcon :name="icon" class="shrink-0 text-[1.2em]" />
+        <div>{{ title }}</div>
+      </div>
+    </EruditTransition>
+  </button>
+</template>

package/dist/app/shared/block/AsideMenuCopyLink.vue

@@ -1,40 +1,40 @@
-<script lang="ts" setup>
-import { ref } from 'vue';
-
-import { useProseContext } from '../../composables/context.js';
-import { useProseLanguage } from '../../composables/language.js';
-import AsideMenuButton from './AsideMenuButton.vue';
-import shareIcon from '../assets/share.svg?raw';
-import checkIcon from '../assets/check.svg?raw';
-
-const { elementId } = defineProps<{
-  elementId: string;
-}>();
-
-const { pathUrl, baseUrl } = useProseContext();
-const prosePhrase = await useProseLanguage();
-
-const copied = ref(false);
-let resetTimer: number | undefined;
-
-async function copyLink() {
-  await navigator.clipboard.writeText(
-    location.origin + baseUrl + pathUrl.substring(1) + '#' + elementId,
-  );
-  copied.value = true;
-  if (resetTimer) clearTimeout(resetTimer);
-  resetTimer = window.setTimeout(() => {
-    copied.value = false;
-    resetTimer = undefined;
-  }, 2500);
-}
-</script>
-
-<template>
-  <AsideMenuButton
-    :brand="copied"
-    :icon="copied ? checkIcon : shareIcon"
-    :title="copied ? prosePhrase.copied : prosePhrase.copy_link"
-    @click="copyLink"
-  />
-</template>
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+import { useProseContext } from '../../composables/context.js';
+import { useProseLanguage } from '../../composables/language.js';
+import AsideMenuButton from './AsideMenuButton.vue';
+import shareIcon from '../assets/share.svg?raw';
+import checkIcon from '../assets/check.svg?raw';
+
+const { elementId } = defineProps<{
+  elementId: string;
+}>();
+
+const { pathUrl, baseUrl } = useProseContext();
+const prosePhrase = await useProseLanguage();
+
+const copied = ref(false);
+let resetTimer: number | undefined;
+
+async function copyLink() {
+  await navigator.clipboard.writeText(
+    location.origin + baseUrl + pathUrl.substring(1) + '#' + elementId,
+  );
+  copied.value = true;
+  if (resetTimer) clearTimeout(resetTimer);
+  resetTimer = window.setTimeout(() => {
+    copied.value = false;
+    resetTimer = undefined;
+  }, 2500);
+}
+</script>
+
+<template>
+  <AsideMenuButton
+    :brand="copied"
+    :icon="copied ? checkIcon : shareIcon"
+    :title="copied ? prosePhrase.copied : prosePhrase.copy_link"
+    @click="copyLink"
+  />
+</template>

package/dist/app/shared/block/AsideMenuSeparator.vue

@@ -1,3 +1,3 @@
-<template>
-  <hr class="border-border/80 my-(--asideMenuGap)" />
-</template>
+<template>
+  <hr class="border-border/80 my-(--asideMenuGap)" />
+</template>