@wpmoo/ui 1.0.0 → 1.1.0-dev.1

package/dist/js/table-of-contents.js

@@ -0,0 +1,195 @@
+/*!
+ * Moo UI table-of-contents.js v1.1.0-dev.1 (https://wpmoo.org/)
+ * Copyright 2026 WPMoo Authors
+ * Licensed under MIT (https://github.com/wpmoo-org/ui/blob/main/LICENSE)
+ */
+
+const instances = /* @__PURE__ */ new WeakMap();
+const ownerSelector = '.moo-ui[data-bs-theme="light"], .moo-ui[data-bs-theme="dark"]';
+function activationOffset(options, previous = 0) {
+  if (!options || typeof options !== "object" || Array.isArray(options)) {
+    throw new TypeError("TableOfContents options must be an object.");
+  }
+  const value = options.activationOffset === void 0 ? previous : options.activationOffset;
+  if (typeof value !== "number" || !Number.isFinite(value) || value < 0) {
+    throw new TypeError("TableOfContents activationOffset must be a finite nonnegative number.");
+  }
+  return value;
+}
+function fragmentId(href) {
+  if (!href?.startsWith("#") || href.length === 1) return null;
+  try {
+    return decodeURIComponent(href.slice(1));
+  } catch {
+    return null;
+  }
+}
+class TableOfContents {
+  static getInstance(element) {
+    return element?.nodeType === 1 ? instances.get(element) || null : null;
+  }
+  static getOrCreateInstance(element, options = {}) {
+    return TableOfContents.getInstance(element) || new TableOfContents(element, options);
+  }
+  constructor(element, options = {}) {
+    if (element?.nodeType !== 1 || !element.matches("[data-toc]")) {
+      throw new TypeError("TableOfContents requires a [data-toc] root element.");
+    }
+    const existing = instances.get(element);
+    if (existing) return existing;
+    this._element = element;
+    this._document = element.ownerDocument;
+    this._window = this._document.defaultView;
+    this._offset = activationOffset(options);
+    this._listeners = [];
+    this._originalLinks = /* @__PURE__ */ new Map();
+    this._originalStatus = /* @__PURE__ */ new Map();
+    this._originalMarker = {
+      attribute: element.getAttribute("data-toc-marker"),
+      properties: ["--moo-toc-marker-offset", "--moo-toc-marker-height"].map((name) => ({
+        name,
+        value: element.style.getPropertyValue(name),
+        priority: element.style.getPropertyPriority(name)
+      }))
+    };
+    this._links = [];
+    this._targets = [];
+    this._frame = 0;
+    this._disposed = false;
+    instances.set(element, this);
+    this.refresh();
+  }
+  refresh(options = {}) {
+    if (this._disposed) return this;
+    const offset = activationOffset(options, this._offset);
+    this._clearListeners();
+    this._offset = offset;
+    const owner = this._element.closest(ownerSelector);
+    const contentId = this._element.getAttribute("data-toc-content");
+    const scope = contentId ? this._document.getElementById(contentId) : owner;
+    const rootId = this._element.getAttribute("data-toc-scroll-root");
+    this._scrollElement = rootId ? this._document.getElementById(rootId) : null;
+    this._status = Array.from(this._element.querySelectorAll("[data-toc-current]")).find((node) => node.closest("[data-toc]") === this._element) || null;
+    if (this._status && !this._originalStatus.has(this._status)) {
+      this._originalStatus.set(this._status, this._status.textContent);
+    }
+    this._overview = this._status ? this._originalStatus.get(this._status) : "";
+    this._links = Array.from(this._element.querySelectorAll('a[href^="#"]')).filter((link) => link.closest("[data-toc]") === this._element).map((link) => ({ link, id: fragmentId(link.getAttribute("href")) }));
+    this._links.forEach(({ link }) => {
+      if (!this._originalLinks.has(link)) {
+        this._originalLinks.set(link, {
+          active: link.classList.contains("active"),
+          current: link.getAttribute("aria-current")
+        });
+      }
+    });
+    this._targets = [];
+    this._activate(null);
+    if (!owner || !scope || scope.closest(ownerSelector) !== owner || rootId && (!this._scrollElement || !this._scrollElement.contains(scope))) {
+      return this;
+    }
+    const seen = /* @__PURE__ */ new Set();
+    this._links.forEach(({ id, link }) => {
+      const target = id ? this._document.getElementById(id) : null;
+      if (!target || seen.has(id) || !scope.contains(target) || target.closest(ownerSelector) !== owner) return;
+      seen.add(id);
+      this._targets.push({ id, target, label: link.textContent.trim() });
+    });
+    if (!this._targets.length) return this;
+    const queue = () => this._requestUpdate();
+    this._listen(this._scrollElement || this._window, "scroll", queue, { passive: true });
+    this._listen(this._window, "resize", queue);
+    this._listen(this._window, "hashchange", queue);
+    this._listen(this._element, "click", queue);
+    this._update();
+    return this;
+  }
+  dispose() {
+    if (this._disposed) return;
+    this._disposed = true;
+    this._clearListeners();
+    this._originalLinks.forEach(({ active, current }, link) => {
+      link.classList.toggle("active", active);
+      if (current === null) link.removeAttribute("aria-current");
+      else link.setAttribute("aria-current", current);
+    });
+    this._originalStatus.forEach((text, node) => {
+      node.textContent = text;
+    });
+    const { attribute, properties } = this._originalMarker;
+    if (attribute === null) this._element.removeAttribute("data-toc-marker");
+    else this._element.setAttribute("data-toc-marker", attribute);
+    properties.forEach(({ name, value, priority }) => {
+      if (value) this._element.style.setProperty(name, value, priority);
+      else this._element.style.removeProperty(name);
+    });
+    this._originalLinks.clear();
+    this._originalStatus.clear();
+    this._targets = [];
+    this._links = [];
+    if (instances.get(this._element) === this) instances.delete(this._element);
+  }
+  _listen(target, type, handler, options) {
+    target.addEventListener(type, handler, options);
+    this._listeners.push({ target, type, handler, options });
+  }
+  _clearListeners() {
+    this._listeners.forEach(({ target, type, handler, options }) => target.removeEventListener(type, handler, options));
+    this._listeners = [];
+    if (this._frame) this._window.cancelAnimationFrame(this._frame);
+    this._frame = 0;
+  }
+  _requestUpdate() {
+    if (this._disposed || this._frame) return;
+    this._frame = this._window.requestAnimationFrame(() => {
+      this._frame = 0;
+      this._update();
+    });
+  }
+  _update() {
+    if (this._disposed) return;
+    const targets = this._targets.filter(({ target }) => target.isConnected && target.getClientRects().length > 0);
+    const scroller = this._scrollElement || this._document.scrollingElement;
+    const line = (this._scrollElement ? this._scrollElement.getBoundingClientRect().top + this._scrollElement.clientTop : 0) + this._offset;
+    let active = null;
+    targets.forEach((entry) => {
+      if (entry.target.getBoundingClientRect().top <= line + 1) active = entry;
+    });
+    const canScroll = scroller && scroller.scrollHeight > scroller.clientHeight + 1;
+    if (!canScroll) {
+      const hashId = fragmentId(this._window.location.hash);
+      active = targets.find(({ id }) => id === hashId) || active;
+    }
+    if (targets.length && canScroll && scroller.scrollTop + scroller.clientHeight >= scroller.scrollHeight - 1) {
+      active = targets[targets.length - 1];
+    }
+    this._activate(active);
+  }
+  _activate(active) {
+    let activeLink = null;
+    this._links.forEach(({ link, id }) => {
+      const current = active !== null && id === active.id;
+      link.classList.toggle("active", current);
+      if (current) {
+        link.setAttribute("aria-current", "location");
+        activeLink || (activeLink = link);
+      } else link.removeAttribute("aria-current");
+    });
+    if (this._status) this._status.textContent = active ? active.label : this._overview;
+    this._updateMarker(activeLink);
+  }
+  _updateMarker(link) {
+    const list = this._element.querySelector(":scope > .nav");
+    const text = link?.querySelector("span");
+    if (!list?.contains(link) || !text?.offsetHeight || !this._element.getClientRects().length) {
+      this._element.removeAttribute("data-toc-marker");
+      return;
+    }
+    this._element.style.setProperty("--moo-toc-marker-offset", `${link.offsetTop + text.offsetTop}px`);
+    this._element.style.setProperty("--moo-toc-marker-height", `${text.offsetHeight}px`);
+    this._element.setAttribute("data-toc-marker", "");
+  }
+}
+export {
+  TableOfContents as default
+};

package/dist/release-manifest.json

@@ -3,22 +3,22 @@
     {
       "export": "./moo.css",
       "path": "dist/assets/css/moo.css",
-      "sha256": "32108d9a95122382228038cd4fe4ca48736a8c0b6219375a08e7697d96d9abd3"
+      "sha256": "38bb85c89e2f1f2f043119a9290cb58dd74a1572090b5fc41930c7c57a90c894"
     },
     {
       "export": "./moo-ui.css",
       "path": "dist/assets/css/moo-ui.css",
-      "sha256": "5824bc488463bc6e6d967e4079b30d8053c9d67cba01479c10cde3830865a1bb"
+      "sha256": "d6947a3a27a4315591cf9f6b92e1fd1d958a5fceb1523b709487d54fcbefc815"
     },
     {
       "export": "./state.js",
       "path": "dist/js/state.js",
-      "sha256": "85b12aea0f22f1a29c9ffe791b0d53d53cc7ab55b08ede10029edc558c8786a6"
+      "sha256": "3560c86c8623a3d523ec763456d984e009d8a7fa5834de168b153ba9d242f1c2"
     }
   ],
   "package": {
     "name": "@wpmoo/ui",
-    "version": "1.0.0"
+    "version": "1.1.0-dev.1"
   },
   "schemaVersion": 1
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wpmoo/ui",
-  "version": "1.0.0",
+  "version": "1.1.0-dev.1",
   "description": "Bootstrap markup. shadcn feel. A frontend-framework-free component system for server-rendered apps.",
   "license": "MIT",
   "author": "WPMoo (https://wpmoo.org)",
@@ -38,6 +38,7 @@
     "./context-menu.js": "./dist/js/context-menu.js",
     "./datatable.js": "./dist/js/datatable.js",
     "./slider.js": "./dist/js/slider.js",
+    "./table-of-contents.js": "./dist/js/table-of-contents.js",
     "./sheet.js": "./dist/js/sheet.js",
     "./chart.js": "./dist/js/chart.js",
     "./chart.min.js": "./dist/js/chart.min.js",
@@ -65,6 +66,7 @@
     "dist/js/context-menu.js",
     "dist/js/datatable.js",
     "dist/js/slider.js",
+    "dist/js/table-of-contents.js",
     "dist/js/sheet.js",
     "dist/js/chart.js",
     "dist/js/chart.min.js",

package/scss/_components.scss

@@ -42,6 +42,7 @@
 @import "components/menubar";
 @import "components/avatar";
 @import "components/navigation";
+@import "components/toc";
 @import "components/skeleton";
 @import "components/sidebar";
 @import "components/alert";

package/scss/components/_toc.scss

@@ -0,0 +1,48 @@
+/* Table of contents */
+[data-toc] > .fw-semibold {
+  padding-inline-start: calc(#{$nav-link-padding-x} - var(--bs-border-width));
+}
+
+[data-toc]:has(> .nav) {
+  position: relative;
+  border-inline-start: calc(var(--bs-border-width) * 0.5) solid var(--bs-border-color);
+}
+
+[data-toc][data-toc-marker]::after {
+  content: "";
+  position: absolute;
+  inset-block-start: 0;
+  inset-inline-start: calc(var(--bs-border-width) * -1);
+  block-size: var(--moo-toc-marker-height);
+  border-inline-start: calc(var(--bs-border-width) * 3) solid var(--moo-primary);
+  transform: translateY(var(--moo-toc-marker-offset));
+  pointer-events: none;
+  @include transition($transition-base);
+}
+
+[data-toc] > .nav .nav-link {
+  display: flex;
+  position: relative;
+  margin-inline-start: calc(var(--bs-border-width) * -1);
+  color: var(--moo-muted-foreground);
+}
+
+[data-toc] > .nav .nav-link::before {
+  content: "";
+  position: absolute;
+  inset-block: var(--bs-nav-link-padding-y);
+  inset-inline-start: 0;
+  border-inline-start: calc(var(--bs-border-width) * 3) solid transparent;
+}
+
+[data-toc] > .nav .nav-link.active {
+  color: var(--moo-foreground);
+}
+
+[data-toc] > .nav .nav-link.active::before {
+  border-inline-start-color: var(--moo-primary);
+}
+
+[data-toc][data-toc-marker] > .nav .nav-link.active::before {
+  border-inline-start-color: transparent;
+}

package/scss/foundations/_scope.scss

@@ -5,6 +5,7 @@
   /* Utilities */
   @import "../utilities/border";
   @import "../utilities/scroll_fade";
+  @import "../utilities/scroll_smooth";
   /* Application layout */
   @import "../layouts/app";
   @import "../layouts/page_grid";

package/scss/layouts/app/sidebar/_base.scss

@@ -35,10 +35,6 @@
   transition: background 0.15s ease;
 }
 
-.sidebar-rail:hover::after {
-  background: var(--moo-sidebar-border);
-}
-
 .wrapper[data-layout="app"][data-shell-mode="contained"] .sidebar-inner {
   position: relative;
   height: 100%;

package/scss/mixins/_banner.scss

@@ -1,5 +1,5 @@
 /*!
- * Moo UI v1.0.0 (https://wpmoo.org/)
+ * Moo UI v1.1.0-dev.1 (https://wpmoo.org/)
  * Copyright 2026 WPMoo Authors
  * Licensed under MIT (https://github.com/wpmoo-org/ui/blob/main/LICENSE)
  *

package/scss/utilities/_scroll_smooth.scss

@@ -0,0 +1,9 @@
+.scroll-smooth {
+  scroll-behavior: smooth;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .scroll-smooth {
+    scroll-behavior: auto;
+  }
+}