@simple-reporting/base 1.0.22 → 1.0.23

package/dev/package.json

@@ -19,7 +19,7 @@
     "postinstall": "srl prepare"
   },
   "dependencies": {
-    "@simple-reporting/base": "^1.0.22",
+    "@simple-reporting/base": "^1.0.23",
     "axios": "^1.12.2",
     "chalk": "^5.6.2",
     "exceljs": "^4.4.0",

package/dev/src/assets/scss/general.scss

@@ -7,6 +7,7 @@
 $font-weight-bold: map.get(srl.$meta, font, weight, bold);
 
 body {
+  background: srl.colors-white-1000();
   color: srl.colors-black-1000();
 }
 

package/dev/src/assets/scss/pdf.scss

@@ -85,6 +85,19 @@ img {
   }
 }
 
+/*
+  Hold titles and the following component on the same page
+*/
+.srl-title-h1,
+.srl-title-h2,
+.srl-title-h3,
+.srl-title-h4,
+.srl-title-h5 {
+  & + * {
+    break-before: avoid;
+  }
+}
+
 /*
   Layout
 */

package/dev/src/entries/pdf.ts

@@ -1,2 +1,15 @@
 import '#imports/pdf.scss'
-import * as Awesomizr from 'srl/Awesomizr.js'
+import * as Awesomizr from 'srl/pdf/Awesomizr.js'
+import * as PDFNotes from 'srl/pdf/PDFNotes.ts'
+import * as PDFSetPageNumbers from 'srl/pdf/PDFSetPageNumbers.ts';
+
+document.addEventListener('DOMContentLoaded', () => {
+  new PDFNotes({
+    noteClass: '.srl-category-notes_group, .srl-category-notes_holding'
+  })
+
+  new PDFSetPageNumbers({
+    tocItemClass: '.srl-pdf-toc__item:not(.srl-pdf-toc__item--blank)',
+    tocItemPageNumberClass: '.srl-pdf-toc__number'
+  });
+})

package/dev/srl.config.json

@@ -744,6 +744,27 @@
           }
         }
       },
+      {
+        "name": "toc-item",
+        "font-family": "Inter",
+        "font-size": 14,
+        "line-height": 1.5,
+        "font-style": "normal",
+        "font-weight": 600,
+        "color": "black-1000",
+        "letter-spacing": 0,
+        "media": {
+          "print": {
+            "font-size": "9pt",
+            "line-height": 1.444
+          },
+          "up": {
+            "tablet-pt": {
+              "font-size": 16
+            }
+          }
+        }
+      },
       {
         "name": "editor-label-text",
         "font-family": "Inter",

package/livingdocs/040.Media/010.table/scss/pdf.scss

@@ -1,6 +1,12 @@
 @use 'srl';
 @use 'sass:map';
 
+$table-cells-width-in-mm: false;
+
+.srl-table {
+  break-inside: avoid;
+}
+
 .srl-table__container > div {
   display: flex;
   flex-direction: column;
@@ -15,6 +21,20 @@
   }
 }
 
+@if $table-cells-width-in-mm == true {
+  .srl-table-container {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+  }
+
+  table {
+    width: fit-content;
+    min-width: unset;
+  }
+}
+
 tr {
   &[class*="pagebreak"] {
     break-after: always;

package/livingdocs/080.CV/010.cv/cv.html

@@ -1,40 +1,42 @@
-<div class="srl-cv">
-  <div class="srl-grid srl-cv__header">
-    <div class="srl-grid__inner srl-cv__inner">
-      <div class="srl-cv__header-portrait">
-        <figure class="srl-cv__figure">
-          <img class="srl-cv__img" doc-image="image" />
-        </figure>
-      </div>
-      <div class="srl-cv__header-content">
-        <p class="srl-title-h3">
+<srl-article-accordion class="srl-cv" data-replace-tag="div">
+    <div class="srl-grid srl-cv__header">
+        <div class="srl-grid__inner srl-cv__inner">
+            <div class="srl-cv__header-portrait">
+                <figure class="srl-cv__figure">
+                    <img class="srl-cv__img" doc-image="image" />
+                </figure>
+            </div>
+            <div class="srl-cv__header-content">
+                <p class="srl-title-h3">
           <span class="srl-title-h3__text" doc-editable="cv-title-h3">
             Max Mustermann
           </span>
-        </p>
-        <p class="srl-title-h4">
+                </p>
+                <p class="srl-title-h4">
           <span class="srl-title-h4__text" doc-editable="cv-title-h4">
             Chairman of the Group Management, Chief Executive Officer (CEO)
           </span>
-        </p>
-        <p class="srl-paragraph" doc-editable="cv-text-excerpt">
-          Swiss, born 1956 <br />
-          Appointed in 2018
-        </p>
-      </div>
+                </p>
+                <p class="srl-paragraph" doc-editable="cv-text-excerpt">
+                    Swiss, born 1956 <br />
+                    Appointed in 2018
+                </p>
+            </div>
+        </div>
     </div>
-  </div>
-  <div class="srl-cv__content" doc-container="cv-content"></div>
-  <div class="srl-grid srl-cv__button-container">
-    <div class="srl-grid__inner srl-flex srl-justify-self-center">
-      <button type="button" class="srl-cv__button">
-        <span class="srl-cv__button-more" doc-editable="cv-text-more">
-          Read more
-        </span>
-        <span class="srl-cv__button-close" doc-editable="cv-text-close">
-          close
-        </span>
-      </button>
+    <div class="srl-cv__content srl-article-accordion__content">
+        <div class="srl-article-accordion__wrapper" doc-container="cv-content"></div>
     </div>
-  </div>
-</div>
+    <div class="srl-grid srl-cv__button-container">
+        <div class="srl-grid__inner srl-flex srl-justify-self-center">
+            <button type="button" class="srl-cv__button srl-article-accordion__toggle">
+                <span class="srl-cv__button-more" doc-editable="cv-text-more">
+                  Read more
+                </span>
+                <span class="srl-cv__button-close" doc-editable="cv-text-close">
+                  close
+                </span>
+            </button>
+        </div>
+    </div>
+</srl-article-accordion>

package/livingdocs/100.Misc/010.anchor/anchor.html

@@ -1,4 +1,4 @@
-<p class="srl-anchor srl-editor-component" data-is-anchor="true">
+<p class="srl-anchor srl-editor-component" data-remove-from-translate-plus="true" data-remove-from-xhtml="complete" data-is-anchor="true">
   <span class="srl-anchor__text srl-editor-component__text" doc-editable="anchor-text">
     Must start with a letter (A–Z or a–z); a number is not allowed. After the
     first letter, any combination of letters (a–z, A–Z), digits (0–9), hyphens

package/livingdocs/100.Misc/020.accordion/accordion.html

@@ -1,8 +1,10 @@
-<div class="srl-accordion">
+<srl-article-accordion class="srl-accordion" data-replace-tag="div">
   <div class="srl-accordion__inner">
-    <div class="srl-accordion__head" doc-container="header"></div>
-    <div class="srl-accordion__content">
-      <div class="srl-accordion__content-inner" doc-container="content"></div>
+    <div class="srl-accordion__head">
+        <button class="srl-accordion__toggle srl-article-accordion__toggle" type="button" data-replace-tag="div" doc-container="header"></button>
+    </div>
+    <div class="srl-accordion__content srl-article-accordion__content">
+      <div class="srl-accordion__content-inner srl-article-accordion__wrapper" doc-container="content"></div>
     </div>
   </div>
-</div>
+</srl-article-accordion>

package/livingdocs/110.PDF/100.pdf-toc-item/scss/general.scss

@@ -6,7 +6,7 @@
   justify-content: space-between;
   border-top: srl.system-size-unit(1pt) solid srl.colors-black-1000();
   text-decoration: none;
-  @include srl.typography-title-h5();
+  @include srl.typography-toc-item();
 }
 
 .srl-pdf-toc__text {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@simple-reporting/base",
-  "version": "1.0.22",
+  "version": "1.0.23",
   "description": "Manage srl templates, build and publish",
   "bin": {
     "srl": "cli.js"

package/scripts/build.js

@@ -909,8 +909,8 @@ async function mapScss() {
     await writeFileSync(
       join(folders.srlImports, 'xbrl.scss'),
       output.xbrl.length
-        ? `@use ` + output.xbrl.join(';\n@use ')
-        : '' + `;\n@use "@simple-reporting/base/scss/xbrl-core-styles.scss" as *;\n`,
+        ? `@use ` + output.xbrl.join(`;\n@use `)
+        : `;\n` + `;\n@use "@simple-reporting/base/scss/xbrl-core-styles.scss" as *;\n`,
     );
 
     return true;

package/scripts/init.js

@@ -58,7 +58,7 @@ async function init(folder, options) {
 
       await writeFileSync(
         `${projectPath}/.gitignore`,
-        `/.output/\n/.srl/\n/node_modules/\n/public/downloads/\n/public/html/\n/public/images/\n/public/json/\n/public/exclude/\n/dev-dist/`,
+        `/.output/\n/.srl/\n/node_modules/\n/public/downloads/\n/public/html/\n/public/images/\n/public/json/\n/public/exclude/\n/dev-dist/\n/.DS_Store\n/.idea`,
       );
       console.log(`Project has created`);
       console.log(`cd ${folder}`);

package/srl/.srl/App.vue

@@ -36,20 +36,24 @@
  * to other components in the application.
  */
 import App from '@/App.vue';
-import { watch } from 'vue'
+import { onMounted, watch } from 'vue'
 import { useCssStyles } from '#composables'
+import { setMounted } from '#utils'
 
-const styleElement = document.createElement('style');
-document.head.appendChild(styleElement);
+const styleElement = document.createElement('style')
+document.head.appendChild(styleElement)
 
-const styleContent = useCssStyles();
+const styleContent = useCssStyles()
 watch(
   styleContent.value,
   (newStyles) => {
-    styleElement.innerHTML = newStyles.join('');
+    styleElement.innerHTML = newStyles.join('')
   },
   { immediate: true },
 );
+onMounted(() => {
+  setMounted(true)
+});
 </script>
 
 <template>

package/srl/.srl/components/Srl/Article/Accordion.vue

@@ -0,0 +1,106 @@
+<script setup lang="ts">
+import {computed, onMounted, ref, useId} from 'vue'
+import { useRoute } from 'vue-router'
+import { isAccordionAnchored, setAccordionAnchored } from '#utils'
+
+const props = withDefaults(defineProps<{
+  toggleSelector?: string
+  contentSelector?: string
+  wrapperSelector?: string
+  openClass?: string
+  duration?: number
+}>(), {
+  toggleSelector: '.srl-article-accordion__toggle',
+  contentSelector: '.srl-article-accordion__content',
+  wrapperSelector: '.srl-article-accordion__wrapper',
+  openClass: 'open',
+  duration: 300,
+})
+
+const route = useRoute()
+
+const id = useId()
+const rootEl = ref<HTMLDivElement>()
+const toggle = ref<HTMLButtonElement>()
+const content = ref<HTMLDivElement>()
+const wrapper = ref<HTMLDivElement>()
+const transition = computed<string>(() => {
+  return props.duration + 'ms'
+})
+
+function open() {
+  toggle.value?.setAttribute('aria-expanded', 'true')
+  wrapper.value?.removeAttribute('hidden')
+  content.value?.classList.add(props.openClass)
+  content.value.focus()
+}
+
+function close() {
+  toggle.value?.setAttribute('aria-expanded', 'false')
+  content.value?.classList.remove(props.openClass)
+  setTimeout(() => {
+    wrapper.value?.setAttribute('hidden', 'true')
+  }, props.duration)
+}
+
+onMounted(() => {
+  toggle.value = rootEl.value?.querySelector( props.toggleSelector ) || undefined
+  content.value = rootEl.value?.querySelector( props.contentSelector ) || undefined
+  wrapper.value = rootEl.value?.querySelector( props.wrapperSelector ) || undefined
+
+  if (toggle.value && content.value && wrapper.value) {
+    wrapper.value.setAttribute('hidden', 'true')
+    content.value.id = id
+    content.value.setAttribute('tabindex', '-1')
+    toggle.value.setAttribute('aria-controls', id)
+
+    toggle.value.addEventListener('click', () => {
+      toggle.value?.getAttribute('aria-expanded') === 'true' ? close() : open()
+    })
+
+    if (route.hash) {
+      if (rootEl.value.id && rootEl.value.id === route.hash) {
+        open()
+        isAccordionAnchored() || setAccordionAnchored(true)
+      } else {
+        const targetEl = rootEl.value?.querySelector<HTMLElement>(route.hash)
+        if (targetEl) {
+          open()
+          if (!isAccordionAnchored()) {
+            setAccordionAnchored(true)
+            setTimeout(() => {
+              rootEl.value?.scrollIntoView({
+                behavior: 'smooth',
+                block: 'start',
+              })
+            }, 200)
+          }
+        }
+      }
+    }
+  }
+})
+</script>
+
+<template>
+  <div class="srl-article-accordion" ref="rootEl" tabindex="-1">
+    <slot/>
+  </div>
+</template>
+
+<style lang="scss">
+.srl-article-accordion {
+  &__content {
+    display: grid;
+    grid-template-rows: 0fr;
+    transition: grid-template-rows v-bind(transition) ease-out;
+
+    &.open {
+      grid-template-rows: 1fr;
+    }
+  }
+  &__wrapper {
+    overflow: hidden;
+  }
+}
+</style>

package/srl/.srl/components/Srl/Article/Dialog/Button.vue

@@ -1,10 +1,11 @@
 <script setup lang="ts">
-import { ref, useId } from 'vue';
+import { ref, useId } from 'vue'
 import { useArticles, useConfig } from '#composables';
-import { prepareHtmlContent } from '#utils';
+import { prepareHtmlContent, isDialogStored, addDialogToStorage, getDialogFromStorage } from '#utils';
 
 const props = defineProps<{
   uuid: string;
+  anchor?: string;
 }>();
 
 const config = useConfig();
@@ -12,6 +13,8 @@ const articles = useArticles();
 const id = ref<string>(`srl-page__dialog-${useId()}`);
 const content = ref<string>('');
 const dialog = ref<SrlPageDialog | null>(null);
+let dialogStored = false
+
 async function loadContent() {
   const article = articles.value.find((article) => article.uuid === props.uuid);
   if (article) {
@@ -20,35 +23,55 @@ async function loadContent() {
       const req = await fetch(file);
       const text = await req.text();
       content.value = prepareHtmlContent(text);
+      // Do something with anchor if provided
+      /*
+      if (props.anchor) {
+        nextTick(() => {
+          // Do action
+        });
+      }
+       */
     } catch (error) {
       console.error(`Failed to load article content from ${file}:`, error);
     }
   }
 }
 
-loadContent();
+if (isDialogStored(props.uuid)) {
+  dialogStored = true;
+} else {
+  addDialogToStorage(props.uuid, dialog);
+  loadContent();
+}
+
 async function open() {
-  dialog.value.open();
+  if (dialog.value) {
+    dialog.value.open();
+  } else {
+    const storage = getDialogFromStorage(props.uuid);
+    storage ?
+        storage.open():
+        console.warn(`Dialog with uuid ${props.uuid} not found in storage.`);
+  }
 }
 </script>
 
 <template>
   <button
-    class="srl-dialog-button"
-    type="button"
-    :aria-controls="id"
-    aria-haspopup="dialog"
-    :aria-expanded="dialog?.dialogState ?? false"
-    @click="open"
+      class="srl-dialog-button"
+      type="button"
+      :aria-controls="id"
+      aria-haspopup="dialog"
+      :aria-expanded="dialog?.dialogState ?? false"
+      @click="open"
   >
     <slot />
-    <Teleport to="body">
+    <Teleport v-if="content" to="body">
       <SrlPageDialog
-        v-if="content"
-        :id="id"
-        ref="dialog"
-        :content="content"
-        @close="expanded = false"
+          :id="id"
+          ref="dialog"
+          :content="content"
+          @close="expanded = false"
       />
     </Teleport>
   </button>

package/srl/.srl/components/Srl/Category/Accordion.vue

@@ -1,13 +1,16 @@
 <script setup lang="ts">
-import { computed, ref, useId } from 'vue'
+import { computed, nextTick, onMounted, ref, useId } from 'vue'
+import { useRoute } from 'vue-router'
+import { isAccordionAnchored, setAccordionAnchored } from '#utils'
 
 const rootEl = ref<HTMLElement | null>(null)
 const id = ref(useId())
 const state = ref(false)
+const route = useRoute()
 function toggle() {
   state.value ?
-    close() :
-    open()
+      close() :
+      open()
 }
 
 function open() {
@@ -32,10 +35,35 @@ const accordion = computed(() => {
   }
 })
 
+onMounted(() => {
+  if (route.hash) {
+    if (rootEl.value.id && rootEl.value.id === route.hash) {
+      open()
+      isAccordionAnchored() || setAccordionAnchored(true)
+    } else {
+      const targetEl = rootEl.value?.querySelector<HTMLElement>(route.hash)
+      if (targetEl) {
+        open()
+        if (!isAccordionAnchored()) {
+          setAccordionAnchored(true)
+          nextTick(() => {
+            setTimeout(() => {
+              rootEl.value.scrollIntoView({
+                behavior: 'smooth',
+                block: 'start',
+              })
+            }, 200)
+          })
+        }
+      }
+    }
+  }
+})
+
 </script>
 
 <template>
-  <div ref="rootEl">
+  <div ref="rootEl" tabindex="-1">
     <slot :accordion="accordion"/>
   </div>
 </template>

package/srl/.srl/plugins/initProject.ts

@@ -2,6 +2,7 @@ import { setConfig } from '#composables/config';
 import { createApp } from 'vue';
 import { initI18n } from '@/i18n';
 import srlVuePlugin from '#plugins/vueSrlPlugin';
+import { clearPageState } from '#utils'
 
 import '#imports/app.scss';
 
@@ -9,11 +10,15 @@ import SrlPageApp from '../App.vue';
 import router from '@/router';
 
 export default async function initProject() {
-  await setConfig();
-  const i18n = initI18n();
-  const app = (window.app = createApp(SrlPageApp));
-  app.use(i18n);
-  app.use(router);
-  app.use(srlVuePlugin);
-  return app;
+    router.beforeEach((to, from, next) => {
+        clearPageState();
+        next();
+    });
+    await setConfig();
+    const i18n = initI18n();
+    const app = (window.app = createApp(SrlPageApp));
+    app.use(i18n);
+    app.use(router);
+    app.use(srlVuePlugin);
+    return app;
 }

package/srl/.srl/utils/html.ts

@@ -3,83 +3,92 @@ import { useArticles, useLocale, addCssStyles } from '#composables';
 
 type AttrObj = { [key: string]: string | null };
 function attributesToString(attributes: Record<string, string | null>): string {
-  return Object.entries(attributes)
-    .map(([key, value]) => (value !== null ? `${key}="${value}"` : key))
-    .join(' ');
+    return Object.entries(attributes)
+        .map(([key, value]) => (value !== null ? `${key}="${value}"` : key))
+        .join(' ');
 }
 
 export function prepareHtmlContent(text: string): string {
-  const articles = useArticles();
-  const locale = useLocale();
+    const articles = useArticles();
+    const locale = useLocale();
 
-  const regex = /<a\s+([^>]+)>(.*?)<\/a>/gis;
-  text = text.replace(regex, (match, attrString, innerText) => {
+    const regex = /<a\s+([^>]+)>(.*?)<\/a>/gis;
+    text = text.replace(regex, (match, attrString, innerText) => {
 
-    const attrObj: AttrObj = {};
-    attrString.replace(/([a-zA-Z0-9\-_]+)(?:="([^"]*)")?/g, (m, key: string, value: string | null) => {
-      attrObj[key] = value || null;
-      return m;
-    });
+        const attrObj: AttrObj = {};
+        attrString.replace(/([a-zA-Z0-9\-_]+)(?:="([^"]*)")?/g, (m, key: string, value: string | null) => {
+            attrObj[key] = value || null;
+            return m;
+        });
 
-    if (
-      attrObj['data-note-target'] &&
-      attrObj['data-note-target'] === 'popup'
-    ) {
-      attrObj.uuid = attrObj.href;
-      delete attrObj.href;
-      const attrs = attributesToString(attrObj);
-      return `<srl-article-dialog-button ${attrs}>${innerText}</srl-article-dialog-button>`;
-    }
+        if (
+            attrObj['data-note-target'] &&
+            attrObj['data-note-target'] === 'popup'
+        ) {
+            attrObj.uuid = attrObj.href;
+            delete attrObj.href;
+            if (attrObj['data-article-name']) {
+                attrObj.uuid = attrObj['data-article-name'];
+                delete attrObj['data-article-name'];
+            }
+            const arrUuid = attrObj.uuid.split('#');
+            attrObj.uuid = arrUuid[0];
+            if (arrUuid[1]) {
+                attrObj.anchor = arrUuid[1];
+            }
+            const attrs = attributesToString(attrObj);
+            return `<srl-article-dialog-button ${attrs}>${innerText}</srl-article-dialog-button>`;
+        }
 
-    if (attrObj.href) {
-      const arrLink = attrObj.href.split('#');
+        if (attrObj.href) {
+            const arrLink = attrObj.href.split('#');
 
-      if (isRouterPath(arrLink[0])) {
-        delete attrObj.href;
-        if (arrLink[0].startsWith('./')) {
-          arrLink[0] = arrLink[0].substring(1);
-        }
-        if (arrLink[0] === `/${locale.value}/home`) {
-          arrLink[0] = `/${locale.value}`;
-        }
-        attrObj.to = arrLink[0];
-        if (arrLink[1]) {
-          attrObj.to += `#${arrLink[1]}`;
-        }
-        const attrs = attributesToString(attrObj);
-        return `<router-link ${attrs}>${innerText}</router-link>`;
-      }
+            if (isRouterPath(arrLink[0])) {
+                delete attrObj.href;
+                if (arrLink[0].startsWith('./')) {
+                    arrLink[0] = arrLink[0].substring(1);
+                }
+                if (arrLink[0] === `/${locale.value}/home`) {
+                    arrLink[0] = `/${locale.value}`;
+                }
+                attrObj.to = arrLink[0];
+                if (arrLink[1]) {
+                    attrObj.to += `#${arrLink[1]}`;
+                }
+                const attrs = attributesToString(attrObj);
+                return `<router-link ${attrs}>${innerText}</router-link>`;
+            }
 
-      const a = articles.value.find((i) => i.uuid === arrLink[0]);
-      if (a) {
-        delete attrObj.href;
-        attrObj.to = a.index
-          ? `/${locale.value}`
-          : `/${locale.value}/${a.slug}`;
-        if (arrLink[1]) {
-          attrObj.to += `#${arrLink[1]}`;
+            const a = articles.value.find((i) => i.uuid === arrLink[0]);
+            if (a) {
+                delete attrObj.href;
+                attrObj.to = a.index
+                    ? `/${locale.value}`
+                    : `/${locale.value}/${a.slug}`;
+                if (arrLink[1]) {
+                    attrObj.to += `#${arrLink[1]}`;
+                }
+                const attrs = attributesToString(attrObj);
+                return `<router-link ${attrs}>${innerText}</router-link>`;
+            }
         }
-        const attrs = attributesToString(attrObj);
-        return `<router-link ${attrs}>${innerText}</router-link>`;
-      }
-    }
 
-    return match;
-  });
+        return match;
+    });
 
-  text = text.replace(
-    /<template-([a-z]+)>([\s\S]*?)<\/template-\1>/g,
-    (_match, name, content) => `<template #${name}>${content}</template>`
-  );
+    text = text.replace(
+        /<template-([a-z]+)>([\s\S]*?)<\/template-\1>/g,
+        (_match, name, content) => `<template #${name}>${content}</template>`
+    );
 
-  text = text.replace(/<style[^>]*>([\s\S]*?)<\/style>/gi, (match, p1) => {
-    addCssStyles(p1);
-    return '';
-  });
+    text = text.replace(/<style[^>]*>([\s\S]*?)<\/style>/gi, (match, p1) => {
+        addCssStyles(p1);
+        return '';
+    });
 
-  return text;
+    return text;
 }
 
 export default {
-  prepareHtmlContent,
+    prepareHtmlContent,
 };

package/srl/.srl/utils/index.ts

@@ -1,5 +1,32 @@
 import { isRouterPath, isExternalPath } from './uri';
 import { camelCase } from './camelCase';
 import { prepareHtmlContent } from './html';
+import {
+    usePageState,
+    clearPageState,
+    isDialogStored,
+    addDialogToStorage,
+    getDialogFromStorage,
+    getDialogStorage,
+    isAccordionAnchored,
+    setAccordionAnchored,
+    isMounted,
+    setMounted
+} from './pageState.ts';
 
-export { isRouterPath, isExternalPath, camelCase, prepareHtmlContent };
+export {
+    isRouterPath,
+    isExternalPath,
+    camelCase,
+    prepareHtmlContent,
+    usePageState,
+    clearPageState,
+    isAccordionAnchored,
+    setAccordionAnchored,
+    isDialogStored,
+    addDialogToStorage,
+    getDialogFromStorage,
+    getDialogStorage,
+    setMounted,
+    isMounted,
+};

package/srl/.srl/utils/pageState.ts

@@ -0,0 +1,61 @@
+import { type Ref } from 'vue'
+
+type DialogStorage = {
+    [key: string]: Ref<SrlPageDialog>;
+}
+
+type PageState = {
+    isMounted: boolean;
+    dialogStorage: DialogStorage;
+    accordionAnchored: boolean;
+}
+
+const pageState: PageState = {
+    isMounted: false,
+    dialogStorage: {},
+    accordionAnchored: false,
+}
+
+export function usePageState() {
+    return pageState;
+}
+
+export function setMounted(value: boolean): void {
+    pageState.isMounted = value;
+}
+
+export function isMounted(): boolean {
+    return pageState.isMounted;
+}
+
+export function clearPageState() {
+    pageState.isMounted = false;
+    pageState.dialogStorage = {};
+    pageState.accordionAnchored = false;
+}
+
+export function isDialogStored(uuid: string): boolean {
+    return uuid in pageState.dialogStorage
+}
+
+export function addDialogToStorage(uuid: string, refSrlPageDialog: Ref<SrlPageDialog>): void {
+    pageState.dialogStorage[uuid] = refSrlPageDialog
+}
+
+export function getDialogFromStorage(uuid: string): SrlPageDialog | null {
+    return isDialogStored(uuid)?
+        pageState.dialogStorage[uuid].value : null
+}
+
+export function getDialogStorage() : DialogStorage {
+    return pageState.dialogStorage
+}
+
+export function setAccordionAnchored(value: boolean): void {
+    pageState.accordionAnchored = value;
+}
+
+export function isAccordionAnchored(): boolean {
+    return pageState.accordionAnchored;
+}
+

package/srl/srl/pdf/PDFNotes.ts

@@ -0,0 +1,71 @@
+export interface PDFNotesConfig {
+  noteClass: string; // kann mehrere Selektoren per Komma enthalten
+}
+
+export default class PDFNotes {
+  private notesArticles: NodeListOf<HTMLElement>;
+  private selectors: string[];
+  private excludedClasses = ['srl-grid', 'srl-linkable'];
+
+  constructor(config: PDFNotesConfig) {
+    const { noteClass } = config;
+
+    if (!noteClass) {
+      console.warn("PDFNotes: 'noteClass' ist erforderlich.");
+      return;
+    }
+
+    // Selektoren sauber splitten
+    this.selectors = noteClass.split(',').map(s => s.trim()).filter(Boolean);
+
+    // Gesamtliste nur wenn du sie sonst brauchst
+    this.notesArticles = document.querySelectorAll(noteClass);
+
+    if (this.notesArticles.length === 0) {
+      console.warn(`PDFNotes: Keine Elemente gefunden mit Selektor '${noteClass}'.`);
+      return;
+    }
+
+    this.markLastNotePerSelector();
+    this.setFirstAndLastNoteClass();
+  }
+
+  private setFirstAndLastNoteClass(): void {
+    this.notesArticles.forEach(container => {
+      const children = Array.from(container.children) as HTMLElement[];
+      if (children.length === 0) return;
+
+      const firstChild = children[0];
+      const lastChild = children[children.length - 1];
+
+      const getRelevantClass = (el: HTMLElement): string | null => {
+        const classes = Array.from(el.classList);
+        const relevant = classes.find(cls => !this.excludedClasses.includes(cls));
+        return relevant || null;
+      };
+
+      const firstClass = getRelevantClass(firstChild);
+      const lastClass = getRelevantClass(lastChild);
+
+      if (firstClass) container.classList.add(`${firstClass}-first`);
+      if (lastClass && lastClass !== firstClass) container.classList.add(`${lastClass}-last`);
+    });
+  }
+
+  // Neu: letzte Note je Selektor markieren
+  private markLastNotePerSelector(): void {
+    if (!this.selectors || this.selectors.length === 0) return;
+
+    this.selectors.forEach(sel => {
+      const nodes = document.querySelectorAll<HTMLElement>(sel);
+      if (nodes.length === 0) return;
+
+      const last = nodes[nodes.length - 1];
+      last.classList.add('last-note');
+
+      // Falls du unterschiedliche Klassen pro Typ willst, entkommentieren:
+      // const typeKey = sel.replace(/^[.#]/, '').replace(/[^a-zA-Z0-9_]/g, '_');
+      // last.classList.add(`last-note-${typeKey}`);
+    });
+  }
+}

package/srl/srl/pdf/PDFSetPageNumbers.ts

@@ -0,0 +1,25 @@
+export interface PDFSetPageNumbersConfig {
+  tocItemClass: string;
+  tocItemPageNumberClass: string;
+}
+
+export default class PDFSetPageNumbers {
+  private tocItems: NodeListOf<HTMLElement>;
+  private pageNumberClass: string;
+
+  constructor(config: PDFSetPageNumbersConfig) {
+    const { tocItemClass, tocItemPageNumberClass } = config;
+
+    this.tocItems = document.querySelectorAll(tocItemClass);
+    this.pageNumberClass = tocItemPageNumberClass;
+
+    this.tocItems.forEach(item => {
+      const link = item.getAttribute('href');
+      const num = item.querySelector<HTMLElement>(this.pageNumberClass);
+
+      if (num && link) {
+        num.setAttribute('data-page-number', link);
+      }
+    });
+  }
+}