panelset 0.5.0

package/dist/index.d.ts

@@ -0,0 +1,111 @@
+export declare interface ActivationAbortedEventDetail {
+    panelId: string;
+    trigger: string | null;
+}
+
+export declare interface ActivationEventDetail {
+    panelId: string;
+    trigger: string | null;
+}
+
+export declare type AsyncContentHandler = (targetPanel: HTMLElement, signal: AbortSignal) => Promise<void> | void;
+
+export declare interface BeforeActivateEventDetail {
+    panelId: string;
+    targetPanel: HTMLElement;
+    outgoingPanel: HTMLElement | null;
+    signal: AbortSignal;
+    promise: Promise<void> | null;
+}
+
+export declare interface HandlerOptions {
+    once?: boolean;
+}
+
+export declare class PanelSet {
+    static defaults: Required<Omit<PanelSetConfig, 'selector'>>;
+    element: HTMLElement;
+    config: Required<Omit<PanelSetConfig, 'selector'>>;
+    panels: HTMLElement[];
+    activePanel: HTMLElement;
+    panelWrapper: HTMLElement;
+    pendingPanel: HTMLElement;
+    private _openCloseGeneration;
+    private _isLoadingAsync;
+    private _currentAbortController?;
+    static _getDataConfig(element: HTMLElement): Partial<PanelSetConfig>;
+    static _mergeConfig(defaults: Required<Omit<PanelSetConfig, 'selector'>>, dataConfig: Partial<PanelSetConfig>, options: Partial<PanelSetConfig>): Required<Omit<PanelSetConfig, 'selector'>>;
+    /**
+     * Initialize PanelSet instances
+     * @param selectorOrOptions - CSS selector string or config object
+     * @param options - Additional config options (when first param is selector)
+     * @returns Array of PanelSet instances
+     */
+    static init(selectorOrOptions?: string | PanelSetConfig, options?: PanelSetConfig): PanelSet[];
+    constructor(elementOrSelector: HTMLElement | string, options?: PanelSetConfig);
+    private _log;
+    private _autoWrapPanels;
+    private _internalInit;
+    private _dispatch;
+    private _getVerticalMetrics;
+    private _measureHeight;
+    private _cleanupPanels;
+    private _waitForTransition;
+    private _animateOpenClose;
+    /**
+     * Get the ID of the currently active panel
+     * @returns Panel ID or null if no panel is active
+     */
+    getActive(): string | null;
+    /**
+     * Open a closable panelset
+     * @param withTransition - Whether to animate
+     */
+    open(withTransition?: boolean): void;
+    /**
+     * Close a closable panelset
+     * @param withTransition - Whether to animate
+     */
+    close(withTransition?: boolean): void;
+    /**
+     * Toggle a closable panelset between open and closed
+     * @param withTransition - Whether to animate
+     */
+    toggle(withTransition?: boolean): void;
+    /**
+     * Register a handler for async content loading
+     * @param handler - Async content handler function
+     * @param options - Handler options (once: whether to load only once)
+     */
+    onBeforeActivate(handler: AsyncContentHandler, options?: HandlerOptions): void;
+    /**
+     * Show a panel by ID
+     * @param panelId - ID of the panel to show
+     * @param withTransition - Whether to animate the transition
+     * @param options - Additional options (trigger name)
+     */
+    show(panelId: string, withTransition?: boolean, options?: ShowOptions): Promise<void>;
+}
+
+export declare interface PanelSetConfig {
+    transitions?: boolean | {
+        panels?: boolean;
+        height?: boolean;
+    };
+    closable?: boolean;
+    emptyPanelHeight?: number;
+    loadingDelay?: number;
+    debug?: boolean;
+    selector?: string;
+}
+
+export declare interface ReadyEventDetail {
+    container: HTMLElement;
+    instance: PanelSet;
+}
+
+export declare interface ShowOptions {
+    trigger?: string;
+}
+
+export { }

package/dist/panelset.css

@@ -0,0 +1 @@
+[data-panelset]{--fadeout-speed: .5s;--fadein-speed: .5s;--fadein-delay: .5s;--height-duration-ratio: 1;--transition-timing: ease-in-out;--loading-panel-opacity: .1;--close-speed: .5s;--open-speed: .5s;--open-timing: ease-in-out;--close-timing: ease-in-out;--loading-dim-duration: calc(var(--fadeout-speed) * (1 - var(--loading-panel-opacity)));--loading-fadeout-duration: calc(var(--fadeout-speed) * var(--loading-panel-opacity))}[data-panelset]{position:relative;transition:height calc((var(--fadein-speed) + var(--fadein-delay)) * var(--height-duration-ratio)) var(--transition-timing);will-change:height;box-sizing:border-box}[data-panelset] .panel-wrapper{position:relative}[data-panelset].is-closed{height:0!important;min-height:0}[data-panelset].is-closed .panel-wrapper{opacity:0;pointer-events:none}[data-panelset].is-opening{transition:height var(--open-speed) var(--open-timing),box-shadow var(--open-speed) var(--open-timing),border-color var(--open-speed) var(--open-timing)}[data-panelset].is-opening .panel-wrapper{transition:opacity var(--open-speed) var(--open-timing);transition-delay:calc(.5 * var(--open-speed));opacity:1}[data-panelset].is-closing{transition:height var(--close-speed) var(--close-timing),box-shadow var(--close-speed) var(--close-timing),border-color var(--open-speed) var(--open-timing)}[data-panelset].is-closing .panel-wrapper{transition:opacity var(--close-speed) var(--close-timing);opacity:0}[data-panelset] [role=tabpanel]{opacity:0;position:absolute;top:0;left:0;width:100%;box-sizing:border-box}[data-panelset] [role=tabpanel].fade{transition:all var(--fadeout-speed) var(--transition-timing);pointer-events:none}[data-panelset] [role=tabpanel].fade.incoming{transition-duration:var(--fadein-speed);transition-delay:var(--fadein-delay)}[data-panelset] [role=tabpanel].active{opacity:1;position:relative}[data-panelset] [role=tabpanel].no-transition,[data-panelset] [role=tabpanel].incoming.no-transition{transition:none}[data-panelset].is-transitioning,[data-panelset].is-opening,[data-panelset].is-closing{overflow:hidden}@media(prefers-reduced-motion:reduce){[data-panelset]{--fadeout-speed: 0s !important;--fadein-speed: 0s !important;--fadein-delay: 0s !important;--loading-dim-duration: 0s !important;--loading-fadeout-duration: 0s !important;--close-speed: 0s !important;--open-speed: 0s !important;transition:none!important}[data-panelset] [role=tabpanel]{transition:none!important}[data-panelset]:after{transition:none!important;animation-play-state:paused!important}[data-panelset] .panel-wrapper{transition:none!important}}[data-panelset]:after{content:"";position:absolute;top:50%;left:50%;width:40px;height:40px;transform:translate(-50%,-50%);border:4px solid rgba(0,0,0,.1);border-top-color:#0064ffcc;border-radius:50%;opacity:0;pointer-events:none;transition:opacity var(--loading-dim-duration) var(--transition-timing);animation:spin .8s linear infinite;animation-play-state:running;z-index:11}[data-panelset] .panel-wrapper{transition:opacity var(--fadeout-speed) var(--transition-timing) var(--fadein-speed)}[data-panelset].is-loading{pointer-events:none}[data-panelset].is-loading:after{opacity:1}[data-panelset].is-loading .panel-wrapper{transition:opacity var(--fadeout-speed) var(--transition-timing);opacity:var(--loading-panel-opacity)}@keyframes spin{to{transform:translate(-50%,-50%) rotate(360deg)}}

package/dist/panelset.js

@@ -0,0 +1,317 @@
+const d = class d {
+  constructor(e, t = {}) {
+    this._openCloseGeneration = 0, this._isLoadingAsync = !1;
+    let s;
+    if (typeof e == "string") {
+      if (s = document.querySelector(e), !s)
+        throw new Error(`PanelSet: No element found for selector "${e}"`);
+    } else
+      s = e;
+    if (this.element = s, s.panelSet || s.dataset.panelset === "true")
+      return console.warn("PanelSet: Element already initialized, returning existing instance"), s.panelSet;
+    s.panelSet = this;
+    const i = d._getDataConfig(s);
+    this.config = d._mergeConfig(
+      d.defaults,
+      i,
+      t
+    ), this.panels = Array.from(s.querySelectorAll('[role="tabpanel"]')), this.activePanel = this.panels.find((n) => n.classList.contains("active")) || this.panels[0], this.panelWrapper = this.element.querySelector(".panel-wrapper") || this._autoWrapPanels(), this.pendingPanel = this.activePanel, this._internalInit(), this.element.dataset.panelset = "true", this._log(`Initialized (${this.panels.length} panels)`), this._dispatch("ps:ready", { container: this.element, instance: this });
+  }
+  // Parse data attributes from element
+  static _getDataConfig(e) {
+    const t = e.dataset, s = {}, i = {
+      transitions: "json",
+      closable: "boolean",
+      emptyPanelHeight: "number",
+      loadingDelay: "number",
+      debug: "boolean"
+    };
+    for (const [n, a] of Object.entries(i)) {
+      if (!(n in t)) continue;
+      const o = t[n];
+      if (o !== void 0)
+        switch (a) {
+          case "boolean":
+            s[n] = o !== "false";
+            break;
+          case "number":
+            s[n] = parseInt(o, 10);
+            break;
+          case "json":
+            try {
+              s[n] = JSON.parse(o);
+            } catch {
+              s[n] = o !== "false";
+            }
+            break;
+        }
+    }
+    return s;
+  }
+  // Merge configurations
+  static _mergeConfig(e, t, s) {
+    return {
+      ...e,
+      ...t,
+      ...s
+    };
+  }
+  /**
+   * Initialize PanelSet instances
+   * @param selectorOrOptions - CSS selector string or config object
+   * @param options - Additional config options (when first param is selector)
+   * @returns Array of PanelSet instances
+   */
+  static init(e = {}, t = {}) {
+    let s, i;
+    typeof e == "string" ? (s = e, i = t) : (i = e, s = i.selector || "[data-panelset]");
+    const n = document.querySelectorAll(s), a = [];
+    return n.forEach((o) => {
+      if (o.panelSet || o.dataset.panelset === "true") {
+        o.panelSet && a.push(o.panelSet);
+        return;
+      }
+      const l = new d(o, i);
+      a.push(l);
+    }), a;
+  }
+  // Debug logging helper
+  _log(e) {
+    if (!this.config.debug) return;
+    const t = this.element.id || "no id";
+    console.log(`[PanelSet] - "${t}" -`, e);
+  }
+  _autoWrapPanels() {
+    const e = document.createElement("div");
+    return e.className = "panel-wrapper", this.panels.forEach((t) => e.appendChild(t)), this.element.appendChild(e), e;
+  }
+  _internalInit() {
+    this.panels.forEach((e) => {
+      e.classList.remove("fade", "incoming"), e !== this.activePanel ? (e.hidden = !0, e.classList.remove("active")) : (e.hidden = !1, e.classList.add("active"));
+    }), this.element.style.height = "";
+  }
+  // Dispatch custom event helper
+  _dispatch(e, t) {
+    this.element.dispatchEvent(
+      new CustomEvent(e, {
+        detail: t,
+        bubbles: !0,
+        cancelable: !1
+      })
+    );
+  }
+  /* --- Modular helpers --- */
+  _getVerticalMetrics(e) {
+    if (!e) return 0;
+    const t = getComputedStyle(e);
+    return ["paddingTop", "paddingBottom", "borderTopWidth", "borderBottomWidth"].reduce((s, i) => s + (parseFloat(t[i]) || 0), 0);
+  }
+  _measureHeight(e) {
+    let t = e.offsetHeight;
+    return t += this._getVerticalMetrics(this.panelWrapper), t += this._getVerticalMetrics(this.element), t;
+  }
+  _cleanupPanels(e) {
+    this.panels.forEach((t) => {
+      t.classList.remove("fade", "incoming"), t !== e ? (t.classList.remove("active"), t.hidden = !0) : (t.classList.add("active"), t.hidden = !1);
+    }), this.element.style.height = "", this.element.classList.remove("is-transitioning"), this.activePanel = e;
+  }
+  _waitForTransition(e) {
+    return new Promise((t) => {
+      const s = getComputedStyle(e), i = parseFloat(s.transitionDuration) || 0, n = parseFloat(s.transitionDelay) || 0;
+      if (i + n === 0) {
+        t();
+        return;
+      }
+      const a = (o) => {
+        o.target === e && (e.removeEventListener("transitionend", a), t());
+      };
+      e.addEventListener("transitionend", a);
+    });
+  }
+  // Shared helper for open/close
+  _animateOpenClose(e, t) {
+    const s = e ? "opening" : "closing", n = `is-${e ? "closing" : "opening"}`, a = `is-${s}`;
+    this._log(e ? "Opening" : "Closing"), this._openCloseGeneration++;
+    const o = this._openCloseGeneration;
+    this.element.classList.contains(n) && this.element.classList.remove(n);
+    const l = e ? this._measureHeight(this.pendingPanel) : 0;
+    if (t && this.config.transitions) {
+      this.element.classList.add(a);
+      const c = this.element.offsetHeight;
+      this.element.style.height = `${c}px`, e && this.element.classList.remove("is-closed"), requestAnimationFrame(() => {
+        this.element.style.height = `${l}px`, this._waitForTransition(this.element).then(() => {
+          this._openCloseGeneration === o && (this.element.style.height = "", this.element.classList.remove(a), e || this.element.classList.add("is-closed"));
+        });
+      });
+    } else
+      e ? this.element.classList.remove("is-closed") : this.element.classList.add("is-closed"), this.element.style.height = "";
+  }
+  /**
+   * Get the ID of the currently active panel
+   * @returns Panel ID or null if no panel is active
+   */
+  getActive() {
+    return this.pendingPanel?.id || null;
+  }
+  /**
+   * Open a closable panelset
+   * @param withTransition - Whether to animate
+   */
+  open(e = !0) {
+    if (!this.config.closable) {
+      this._log("Cannot open: closable is false");
+      return;
+    }
+    const t = this.element.classList.contains("is-closed"), s = this.element.classList.contains("is-closing");
+    !t && !s || this._animateOpenClose(!0, e);
+  }
+  /**
+   * Close a closable panelset
+   * @param withTransition - Whether to animate
+   */
+  close(e = !0) {
+    if (!this.config.closable) {
+      this._log("Cannot close: closable is false");
+      return;
+    }
+    const t = this.element.classList.contains("is-closed"), s = this.element.classList.contains("is-opening");
+    t && !s || this._animateOpenClose(!1, e);
+  }
+  /**
+   * Toggle a closable panelset between open and closed
+   * @param withTransition - Whether to animate
+   */
+  toggle(e = !0) {
+    const t = this.element.classList.contains("is-closed"), s = this.element.classList.contains("is-closing");
+    t || s ? this.open(e) : this.close(e);
+  }
+  /**
+   * Register a handler for async content loading
+   * @param handler - Async content handler function
+   * @param options - Handler options (once: whether to load only once)
+   */
+  onBeforeActivate(e, t = {}) {
+    const s = t.once === !0;
+    this.element.addEventListener("ps:beforeactivate", (i) => {
+      const n = i, { targetPanel: a, signal: o } = n.detail;
+      if (s && a.dataset.loaded === "true") {
+        this.config.debug && this._log(`Skipping ${a.id} (already loaded)`);
+        return;
+      }
+      const l = e(a, o);
+      l && typeof l.then == "function" && (n.detail.promise = l.then(() => {
+        s && (a.dataset.loaded = "true");
+      }).catch((c) => {
+        throw c.name === "AbortError" ? (this.config.debug && this._log(`Load aborted: ${a.id}`), c) : (this._log(`Load failed: ${c.message}`), c);
+      }));
+    });
+  }
+  /* --- Main logic --- */
+  /**
+   * Show a panel by ID
+   * @param panelId - ID of the panel to show
+   * @param withTransition - Whether to animate the transition
+   * @param options - Additional options (trigger name)
+   */
+  async show(e, t = !0, s = {}) {
+    const i = this.panels.find((r) => r.id === e);
+    if (!i) {
+      this._log(`Panel not found: ${e}`);
+      return;
+    }
+    if (i === this.pendingPanel) return;
+    const n = this.pendingPanel, a = n?.id;
+    this.pendingPanel = i, this.element.classList.remove("is-loading"), n && n !== this.activePanel && n !== i && (n.classList.remove("incoming"), n.hidden || n.classList.remove("active"));
+    const o = this._isLoadingAsync;
+    this._currentAbortController && (this._currentAbortController.abort(), o && a && a !== e && this._dispatch("ps:activationaborted", {
+      panelId: a,
+      trigger: null
+    }));
+    const l = new AbortController();
+    this._currentAbortController = l, this._isLoadingAsync = !1, this._log(`${n?.id || "none"} → ${e}`);
+    const c = {
+      panelId: e,
+      targetPanel: i,
+      outgoingPanel: n,
+      signal: l.signal,
+      promise: null
+    }, P = new CustomEvent("ps:beforeactivate", {
+      detail: c,
+      bubbles: !0,
+      cancelable: !1
+    });
+    this.element.dispatchEvent(P);
+    const _ = c.promise;
+    if (_) {
+      this._isLoadingAsync = !0, this._log("Waiting for content...");
+      let r, g = !1;
+      if (this.config.loadingDelay > 0 ? r = setTimeout(() => {
+        this.element.classList.add("is-loading"), g = !0;
+      }, this.config.loadingDelay) : (this.element.classList.add("is-loading"), g = !0), !(this.activePanel && this.activePanel !== i)) {
+        const m = t !== !1 && this.config.transitions !== !1;
+        let u = m;
+        if (typeof this.config.transitions == "object" && (u = m && this.config.transitions.height !== !1), u) {
+          const C = this.element.offsetHeight;
+          this.element.style.height = `${C}px`, requestAnimationFrame(() => {
+            this.element.style.height = `${this.config.emptyPanelHeight}px`;
+          });
+        }
+      }
+      try {
+        if (await _, r && clearTimeout(r), l.signal.aborted) {
+          this._log(`Aborted during load: ${e}`), g && this.element.classList.remove("is-loading");
+          return;
+        }
+        this._log("Content loaded");
+      } catch (m) {
+        r && clearTimeout(r);
+        const u = m;
+        this._log(`Load failed: ${u.message}`), g && this.element.classList.remove("is-loading"), u.name !== "AbortError" && console.error("Panel load error:", m);
+        return;
+      }
+      g && this.element.classList.remove("is-loading");
+    }
+    if (l.signal.aborted) {
+      this._log(`Aborted: ${e}`);
+      return;
+    }
+    this._dispatch("ps:activationstart", {
+      panelId: e,
+      trigger: s.trigger || null
+    });
+    const p = t !== !1 && this.config.transitions !== !1;
+    let v = p, b = p;
+    typeof this.config.transitions == "object" && (v = p && this.config.transitions.panels !== !1, b = p && this.config.transitions.height !== !1), this.panels.forEach((r) => r.classList.toggle("fade", v));
+    const L = this.element.offsetHeight;
+    b && (this.element.style.height = `${L}px`);
+    const h = this.activePanel;
+    i.hidden = !1, i.classList.add("incoming"), v && this.element.classList.add("is-transitioning"), h && h !== i && (h.classList.remove("active", "incoming"), h.hidden = !1), requestAnimationFrame(() => {
+      i.classList.add("active"), h && h !== i && h.classList.remove("incoming");
+      const r = this._measureHeight(i), g = L !== r;
+      b && (this.element.style.height = `${r}px`);
+      const f = [];
+      v && f.push(this._waitForTransition(i)), b && g && f.push(this._waitForTransition(this.element)), f.length || f.push(Promise.resolve()), Promise.all(f).then(() => {
+        if (this.pendingPanel !== i) {
+          this._log(`Interrupted: ${e}`);
+          return;
+        }
+        this._cleanupPanels(i), this._log(`✓ ${e}`), this._dispatch("ps:activationcomplete", {
+          panelId: e,
+          trigger: s.trigger || null
+        });
+      });
+    });
+  }
+};
+d.defaults = {
+  transitions: !0,
+  closable: !1,
+  emptyPanelHeight: 200,
+  loadingDelay: 300,
+  debug: !1
+};
+let y = d;
+export {
+  y as PanelSet
+};
+//# sourceMappingURL=panelset.js.map

package/dist/panelset.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"panelset.js","sources":["../src/lib/index.ts"],"sourcesContent":["import './styles/panelset.scss';\n\n// Configuration types\nexport interface PanelSetConfig {\n\ttransitions?: boolean | {\n\t\tpanels?: boolean;\n\t\theight?: boolean;\n\t};\n\tclosable?: boolean;\n\temptyPanelHeight?: number;\n\tloadingDelay?: number;\n\tdebug?: boolean;\n\tselector?: string;\n}\n\n// Event detail types\nexport interface ReadyEventDetail {\n\tcontainer: HTMLElement;\n\tinstance: PanelSet;\n}\n\nexport interface BeforeActivateEventDetail {\n\tpanelId: string;\n\ttargetPanel: HTMLElement;\n\toutgoingPanel: HTMLElement | null;\n\tsignal: AbortSignal;\n\tpromise: Promise<void> | null;\n}\n\nexport interface ActivationEventDetail {\n\tpanelId: string;\n\ttrigger: string | null;\n}\n\nexport interface ActivationAbortedEventDetail {\n\tpanelId: string;\n\ttrigger: string | null;\n}\n\n// Handler options\nexport interface HandlerOptions {\n\tonce?: boolean;\n}\n\n// Show options\nexport interface ShowOptions {\n\ttrigger?: string;\n}\n\n// Async content handler type\nexport type AsyncContentHandler = (\n\ttargetPanel: HTMLElement,\n\tsignal: AbortSignal\n) => Promise<void> | void;\n\n// Extend HTMLElement to include panelSet property\ndeclare global {\n\tinterface HTMLElement {\n\t\tpanelSet?: PanelSet;\n\t}\n}\n\nexport class PanelSet {\n\t// Default configuration\n\tstatic defaults: Required<Omit<PanelSetConfig, 'selector'>> = {\n\t\ttransitions: true,\n\t\tclosable: false,\n\t\temptyPanelHeight: 200,\n\t\tloadingDelay: 300,\n\t\tdebug: false\n\t};\n\n\t// Instance properties\n\telement!: HTMLElement;\n\tconfig!: Required<Omit<PanelSetConfig, 'selector'>>;\n\tpanels!: HTMLElement[];\n\tactivePanel!: HTMLElement;\n\tpanelWrapper!: HTMLElement;\n\tpendingPanel!: HTMLElement;\n\n\tprivate _openCloseGeneration: number = 0;\n\tprivate _isLoadingAsync: boolean = false;\n\t// private _isTransitioning: boolean = false;\n\tprivate _currentAbortController?: AbortController;\n\n\t// Parse data attributes from element\n\tstatic _getDataConfig(element: HTMLElement): Partial<PanelSetConfig> {\n\t\tconst data = element.dataset;\n\t\tconst config: Partial<PanelSetConfig> = {};\n\n\t\t// Define attribute types\n\t\tconst attrs: Record<string, 'json' | 'boolean' | 'number'> = {\n\t\t\ttransitions: 'json',\n\t\t\tclosable: 'boolean',\n\t\t\temptyPanelHeight: 'number',\n\t\t\tloadingDelay: 'number',\n\t\t\tdebug: 'boolean'\n\t\t};\n\n\t\t// Parse each attribute\n\t\tfor (const [key, type] of Object.entries(attrs)) {\n\t\t\tif (!(key in data)) continue;\n\n\t\t\tconst value = data[key];\n\t\t\tif (value === undefined) continue;\n\n\t\t\tswitch (type) {\n\t\t\t\tcase 'boolean':\n\t\t\t\t\t(config as any)[key] = value !== 'false';\n\t\t\t\t\tbreak;\n\t\t\t\tcase 'number':\n\t\t\t\t\t(config as any)[key] = parseInt(value, 10);\n\t\t\t\t\tbreak;\n\t\t\t\tcase 'json':\n\t\t\t\t\ttry {\n\t\t\t\t\t\t(config as any)[key] = JSON.parse(value);\n\t\t\t\t\t} catch {\n\t\t\t\t\t\t// Fall back to boolean parsing\n\t\t\t\t\t\t(config as any)[key] = value !== 'false';\n\t\t\t\t\t}\n\t\t\t\t\tbreak;\n\t\t\t}\n\t\t}\n\n\t\treturn config;\n\t}\n\n\t// Merge configurations\n\tstatic _mergeConfig(\n\t\tdefaults: Required<Omit<PanelSetConfig, 'selector'>>,\n\t\tdataConfig: Partial<PanelSetConfig>,\n\t\toptions: Partial<PanelSetConfig>\n\t): Required<Omit<PanelSetConfig, 'selector'>> {\n\t\treturn {\n\t\t\t...defaults,\n\t\t\t...dataConfig,\n\t\t\t...options\n\t\t} as Required<Omit<PanelSetConfig, 'selector'>>;\n\t}\n\n\t/**\n\t * Initialize PanelSet instances\n\t * @param selectorOrOptions - CSS selector string or config object\n\t * @param options - Additional config options (when first param is selector)\n\t * @returns Array of PanelSet instances\n\t */\n\tstatic init(selectorOrOptions: string | PanelSetConfig = {}, options: PanelSetConfig = {}): PanelSet[] {\n\t\t// Handle different call signatures\n\t\tlet selector: string;\n\t\tlet config: PanelSetConfig;\n\n\t\tif (typeof selectorOrOptions === 'string') {\n\t\t\t// init('#demo') or init('#demo', {debug: true})\n\t\t\tselector = selectorOrOptions;\n\t\t\tconfig = options;\n\t\t} else {\n\t\t\t// init() or init({selector: '#demo', debug: true})\n\t\t\tconfig = selectorOrOptions;\n\t\t\tselector = config.selector || '[data-panelset]';\n\t\t}\n\n\t\tconst elements = document.querySelectorAll<HTMLElement>(selector);\n\t\tconst instances: PanelSet[] = [];\n\n\t\telements.forEach(el => {\n\t\t\t// Skip if already initialized\n\t\t\tif (el.panelSet || el.dataset.panelset === 'true') {\n\t\t\t\tif (el.panelSet) instances.push(el.panelSet);\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tconst instance = new PanelSet(el, config);\n\t\t\tinstances.push(instance);\n\t\t});\n\n\t\treturn instances;\n\t}\n\n\tconstructor(elementOrSelector: HTMLElement | string, options: PanelSetConfig = {}) {\n\t\t// Handle both element and selector\n\t\tlet element: HTMLElement | null;\n\t\tif (typeof elementOrSelector === 'string') {\n\t\t\telement = document.querySelector<HTMLElement>(elementOrSelector);\n\t\t\tif (!element) {\n\t\t\t\tthrow new Error(`PanelSet: No element found for selector \"${elementOrSelector}\"`);\n\t\t\t}\n\t\t} else {\n\t\t\telement = elementOrSelector;\n\t\t}\n\n\t\tthis.element = element;\n\n\t\t// Check if already initialized\n\t\tif (element.panelSet || element.dataset.panelset === 'true') {\n\t\t\tconsole.warn('PanelSet: Element already initialized, returning existing instance');\n\t\t\treturn element.panelSet!;\n\t\t}\n\n\t\t// Store instance on element\n\t\telement.panelSet = this;\n\n\t\tconst dataConfig = PanelSet._getDataConfig(element);\n\t\tthis.config = PanelSet._mergeConfig(\n\t\t\tPanelSet.defaults,\n\t\t\tdataConfig,\n\t\t\toptions\n\t\t);\n\n\t\tthis.panels = Array.from(element.querySelectorAll<HTMLElement>('[role=\"tabpanel\"]'));\n\t\tthis.activePanel =\n\t\t\tthis.panels.find(p => p.classList.contains('active')) || this.panels[0];\n\t\tthis.panelWrapper =\n\t\t\tthis.element.querySelector<HTMLElement>('.panel-wrapper') || this._autoWrapPanels();\n\n\t\tthis.pendingPanel = this.activePanel;\n\n\t\tthis._internalInit();\n\n\t\t// Mark as initialized, can be used in CSS selectors for visual confirmation\n\t\tthis.element.dataset.panelset = 'true';\n\n\t\tthis._log(`Initialized (${this.panels.length} panels)`);\n\t\tthis._dispatch<ReadyEventDetail>('ps:ready', { container: this.element, instance: this });\n\t}\n\n\t// Debug logging helper\n\tprivate _log(message: string): void {\n\t\tif (!this.config.debug) return;\n\t\tconst id = this.element.id || 'no id';\n\t\tconsole.log(`[PanelSet] - \"${id}\" -`, message);\n\t}\n\n\tprivate _autoWrapPanels(): HTMLElement {\n\t\tconst wrapper = document.createElement('div');\n\t\twrapper.className = 'panel-wrapper';\n\t\tthis.panels.forEach(panel => wrapper.appendChild(panel));\n\t\tthis.element.appendChild(wrapper);\n\t\treturn wrapper;\n\t}\n\n\tprivate _internalInit(): void {\n\t\tthis.panels.forEach(panel => {\n\t\t\tpanel.classList.remove('fade', 'incoming');\n\t\t\tif (panel !== this.activePanel) {\n\t\t\t\tpanel.hidden = true;\n\t\t\t\tpanel.classList.remove('active');\n\t\t\t} else {\n\t\t\t\tpanel.hidden = false;\n\t\t\t\tpanel.classList.add('active');\n\t\t\t}\n\t\t});\n\t\tthis.element.style.height = '';\n\t}\n\n\t// Dispatch custom event helper\n\tprivate _dispatch<T = unknown>(eventName: string, detail: T): void {\n\t\tthis.element.dispatchEvent(\n\t\t\tnew CustomEvent(eventName, {\n\t\t\t\tdetail,\n\t\t\t\tbubbles: true,\n\t\t\t\tcancelable: false\n\t\t\t})\n\t\t);\n\t}\n\n\t/* --- Modular helpers --- */\n\n\tprivate _getVerticalMetrics(el: HTMLElement | null): number {\n\t\tif (!el) return 0;\n\t\tconst s = getComputedStyle(el);\n\t\treturn ['paddingTop', 'paddingBottom', 'borderTopWidth', 'borderBottomWidth']\n\t\t\t.reduce((sum, prop) => sum + (parseFloat(s[prop as keyof CSSStyleDeclaration] as string) || 0), 0);\n\t}\n\n\tprivate _measureHeight(panel: HTMLElement): number {\n\t\tlet total = panel.offsetHeight;\n\t\ttotal += this._getVerticalMetrics(this.panelWrapper);\n\t\ttotal += this._getVerticalMetrics(this.element);\n\t\treturn total;\n\t}\n\n\tprivate _cleanupPanels(newPanel: HTMLElement): void {\n\t\tthis.panels.forEach(panel => {\n\t\t\tpanel.classList.remove('fade', 'incoming');\n\t\t\tif (panel !== newPanel) {\n\t\t\t\tpanel.classList.remove('active');\n\t\t\t\tpanel.hidden = true;\n\t\t\t} else {\n\t\t\t\tpanel.classList.add('active');\n\t\t\t\tpanel.hidden = false;\n\t\t\t}\n\t\t});\n\t\tthis.element.style.height = '';\n\t\tthis.element.classList.remove('is-transitioning');\n\t\tthis.activePanel = newPanel;\n\t}\n\n\tprivate _waitForTransition(element: HTMLElement): Promise<void> {\n\t\treturn new Promise(resolve => {\n\t\t\tconst styles = getComputedStyle(element);\n\t\t\tconst duration = parseFloat(styles.transitionDuration) || 0;\n\t\t\tconst delay = parseFloat(styles.transitionDelay) || 0;\n\t\t\tif (duration + delay === 0) {\n\t\t\t\tresolve();\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tconst handler = (e: TransitionEvent) => {\n\t\t\t\tif (e.target !== element) return;\n\t\t\t\telement.removeEventListener('transitionend', handler);\n\t\t\t\tresolve();\n\t\t\t};\n\t\t\telement.addEventListener('transitionend', handler);\n\t\t});\n\t}\n\n\t// Shared helper for open/close\n\tprivate _animateOpenClose(isOpening: boolean, withTransition: boolean): void {\n\t\tconst action = isOpening ? 'opening' : 'closing';\n\t\tconst oppositeAction = isOpening ? 'closing' : 'opening';\n\t\tconst oppositeClass = `is-${oppositeAction}`;\n\t\tconst actionClass = `is-${action}`;\n\n\t\tthis._log(isOpening ? 'Opening' : 'Closing');\n\n\t\tthis._openCloseGeneration++;\n\t\tconst myGeneration = this._openCloseGeneration;\n\n\t\t// Remove opposite state if interrupting\n\t\tif (this.element.classList.contains(oppositeClass)) {\n\t\t\tthis.element.classList.remove(oppositeClass);\n\t\t}\n\n\t\tconst targetHeight = isOpening ? this._measureHeight(this.pendingPanel) : 0;\n\n\t\tif (withTransition && this.config.transitions) {\n\t\t\tthis.element.classList.add(actionClass);\n\n\t\t\tconst currentHeight = this.element.offsetHeight;\n\t\t\tthis.element.style.height = `${currentHeight}px`;\n\n\t\t\tif (isOpening) this.element.classList.remove('is-closed');\n\n\t\t\trequestAnimationFrame(() => {\n\t\t\t\tthis.element.style.height = `${targetHeight}px`;\n\n\t\t\t\tthis._waitForTransition(this.element).then(() => {\n\t\t\t\t\tif (this._openCloseGeneration === myGeneration) {\n\t\t\t\t\t\tthis.element.style.height = '';\n\t\t\t\t\t\tthis.element.classList.remove(actionClass);\n\t\t\t\t\t\tif (!isOpening) this.element.classList.add('is-closed');\n\t\t\t\t\t}\n\t\t\t\t});\n\t\t\t});\n\t\t} else {\n\t\t\tif (isOpening) {\n\t\t\t\tthis.element.classList.remove('is-closed');\n\t\t\t} else {\n\t\t\t\tthis.element.classList.add('is-closed');\n\t\t\t}\n\t\t\tthis.element.style.height = '';\n\t\t}\n\t}\n\n\t/**\n\t * Get the ID of the currently active panel\n\t * @returns Panel ID or null if no panel is active\n\t */\n\tgetActive(): string | null {\n\t\treturn this.pendingPanel?.id || null;\n\t}\n\n\t/**\n\t * Open a closable panelset\n\t * @param withTransition - Whether to animate\n\t */\n\topen(withTransition: boolean = true): void {\n\t\tif (!this.config.closable) {\n\t\t\tthis._log('Cannot open: closable is false');\n\t\t\treturn;\n\t\t}\n\n\t\tconst isClosed = this.element.classList.contains('is-closed');\n\t\tconst isClosing = this.element.classList.contains('is-closing');\n\n\t\tif (!isClosed && !isClosing) return;\n\n\t\tthis._animateOpenClose(true, withTransition);\n\t}\n\n\t/**\n\t * Close a closable panelset\n\t * @param withTransition - Whether to animate\n\t */\n\tclose(withTransition: boolean = true): void {\n\t\tif (!this.config.closable) {\n\t\t\tthis._log('Cannot close: closable is false');\n\t\t\treturn;\n\t\t}\n\n\t\tconst isClosed = this.element.classList.contains('is-closed');\n\t\tconst isOpening = this.element.classList.contains('is-opening');\n\n\t\tif (isClosed && !isOpening) return;\n\n\t\tthis._animateOpenClose(false, withTransition);\n\t}\n\n\t/**\n\t * Toggle a closable panelset between open and closed\n\t * @param withTransition - Whether to animate\n\t */\n\ttoggle(withTransition: boolean = true): void {\n\t\tconst isClosed = this.element.classList.contains('is-closed');\n\t\tconst isClosing = this.element.classList.contains('is-closing');\n\n\t\t// If closed or closing, open it\n\t\tif (isClosed || isClosing) {\n\t\t\tthis.open(withTransition);\n\t\t} else {\n\t\t\tthis.close(withTransition);\n\t\t}\n\t}\n\n\t/**\n\t * Register a handler for async content loading\n\t * @param handler - Async content handler function\n\t * @param options - Handler options (once: whether to load only once)\n\t */\n\tonBeforeActivate(handler: AsyncContentHandler, options: HandlerOptions = {}): void {\n\t\tconst once = options.once === true; // Default: false (always reload)\n\n\t\tthis.element.addEventListener('ps:beforeactivate', (e) => {\n\t\t\tconst event = e as CustomEvent<BeforeActivateEventDetail>;\n\t\t\tconst { targetPanel, signal } = event.detail;\n\n\t\t\t// Skip if already loaded and once=true\n\t\t\tif (once && targetPanel.dataset.loaded === 'true') {\n\t\t\t\tif (this.config.debug) {\n\t\t\t\t\tthis._log(`Skipping ${targetPanel.id} (already loaded)`);\n\t\t\t\t}\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\t// Call user handler\n\t\t\tconst result = handler(targetPanel, signal);\n\n\t\t\t// If handler returns a promise, attach it to the event\n\t\t\tif (result && typeof result.then === 'function') {\n\t\t\t\tevent.detail.promise = result\n\t\t\t\t\t.then(() => {\n\t\t\t\t\t\t// Auto-mark as loaded on success if once=true\n\t\t\t\t\t\tif (once) {\n\t\t\t\t\t\t\ttargetPanel.dataset.loaded = 'true';\n\t\t\t\t\t\t}\n\t\t\t\t\t})\n\t\t\t\t\t.catch(error => {\n\t\t\t\t\t\tif (error.name === 'AbortError') {\n\t\t\t\t\t\t\tif (this.config.debug) {\n\t\t\t\t\t\t\t\tthis._log(`Load aborted: ${targetPanel.id}`);\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tthrow error;\n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\tthis._log(`Load failed: ${error.message}`);\n\t\t\t\t\t\t\tthrow error;\n\t\t\t\t\t\t}\n\t\t\t\t\t});\n\t\t\t}\n\t\t});\n\t}\n\n\t/* --- Main logic --- */\n\n\t/**\n\t * Show a panel by ID\n\t * @param panelId - ID of the panel to show\n\t * @param withTransition - Whether to animate the transition\n\t * @param options - Additional options (trigger name)\n\t */\n\tasync show(panelId: string, withTransition: boolean = true, options: ShowOptions = {}): Promise<void> {\n\t\tconst newPanel = this.panels.find(p => p.id === panelId);\n\n\t\tif (!newPanel) {\n\t\t\tthis._log(`Panel not found: ${panelId}`);\n\t\t\treturn;\n\t\t}\n\n\t\tif (newPanel === this.pendingPanel) return;\n\n\t\tconst prevPanel = this.pendingPanel;\n\t\tconst prevPanelId = prevPanel?.id;\n\t\tthis.pendingPanel = newPanel;\n\n\t\tthis.element.classList.remove('is-loading');\n\n\t\tif (prevPanel && prevPanel !== this.activePanel && prevPanel !== newPanel) {\n\t\t\tprevPanel.classList.remove('incoming');\n\t\t\tif (prevPanel.hidden) {\n\t\t\t\t// Was never visible, keep hidden\n\t\t\t} else {\n\t\t\t\tprevPanel.classList.remove('active');\n\t\t\t}\n\t\t}\n\n\t\tconst wasLoadingAsync = this._isLoadingAsync;\n\n\t\tif (this._currentAbortController) {\n\t\t\tthis._currentAbortController.abort();\n\n\t\t\t// Only fire abort if we're cancelling an async operation\n\t\t\tif (wasLoadingAsync && prevPanelId && prevPanelId !== panelId) {\n\t\t\t\tthis._dispatch<ActivationAbortedEventDetail>('ps:activationaborted', {\n\t\t\t\t\tpanelId: prevPanelId,\n\t\t\t\t\ttrigger: null\n\t\t\t\t});\n\t\t\t}\n\t\t}\n\n\t\tconst abortController = new AbortController();\n\t\tthis._currentAbortController = abortController;\n\t\tthis._isLoadingAsync = false;\n\n\t\tthis._log(`${prevPanel?.id || 'none'} → ${panelId}`);\n\n\t\tconst beforeActivateDetail: BeforeActivateEventDetail = {\n\t\t\tpanelId,\n\t\t\ttargetPanel: newPanel,\n\t\t\toutgoingPanel: prevPanel,\n\t\t\tsignal: abortController.signal,\n\t\t\tpromise: null\n\t\t};\n\n\t\tconst beforeActivateEvent = new CustomEvent('ps:beforeactivate', {\n\t\t\tdetail: beforeActivateDetail,\n\t\t\tbubbles: true,\n\t\t\tcancelable: false\n\t\t});\n\n\t\tthis.element.dispatchEvent(beforeActivateEvent);\n\n\t\tconst userPromise = beforeActivateDetail.promise;\n\n\t\tif (userPromise) {\n\t\t\tthis._isLoadingAsync = true;\n\t\t\tthis._log('Waiting for content...');\n\n\t\t\tlet spinnerTimeout: ReturnType<typeof setTimeout> | undefined;\n\t\t\tlet loadingShown = false;\n\n\t\t\tif (this.config.loadingDelay > 0) {\n\t\t\t\tspinnerTimeout = setTimeout(() => {\n\t\t\t\t\tthis.element.classList.add('is-loading');\n\t\t\t\t\tloadingShown = true;\n\t\t\t\t}, this.config.loadingDelay);\n\t\t\t} else {\n\t\t\t\tthis.element.classList.add('is-loading');\n\t\t\t\tloadingShown = true;\n\t\t\t}\n\n\t\t\tconst hasPreviousPanel = this.activePanel && this.activePanel !== newPanel;\n\n\t\t\tif (!hasPreviousPanel) {\n\t\t\t\tconst shouldTransition = withTransition !== false && this.config.transitions !== false;\n\t\t\t\tlet heightTransition = shouldTransition;\n\t\t\t\tif (typeof this.config.transitions === 'object') {\n\t\t\t\t\theightTransition = shouldTransition && this.config.transitions.height !== false;\n\t\t\t\t}\n\n\t\t\t\tif (heightTransition) {\n\t\t\t\t\tconst currentHeight = this.element.offsetHeight;\n\t\t\t\t\tthis.element.style.height = `${currentHeight}px`;\n\n\t\t\t\t\trequestAnimationFrame(() => {\n\t\t\t\t\t\tthis.element.style.height = `${this.config.emptyPanelHeight}px`;\n\t\t\t\t\t});\n\t\t\t\t}\n\t\t\t}\n\n\t\t\ttry {\n\t\t\t\tawait userPromise;\n\n\t\t\t\tif (spinnerTimeout) clearTimeout(spinnerTimeout);\n\n\t\t\t\tif (abortController.signal.aborted) {\n\t\t\t\t\tthis._log(`Aborted during load: ${panelId}`);\n\t\t\t\t\tif (loadingShown) this.element.classList.remove('is-loading');\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\tthis._log('Content loaded');\n\t\t\t} catch (error) {\n\t\t\t\tif (spinnerTimeout) clearTimeout(spinnerTimeout);\n\n\t\t\t\tconst err = error as Error;\n\t\t\t\tthis._log(`Load failed: ${err.message}`);\n\t\t\t\tif (loadingShown) this.element.classList.remove('is-loading');\n\n\t\t\t\tif (err.name !== 'AbortError') {\n\t\t\t\t\tconsole.error('Panel load error:', error);\n\t\t\t\t}\n\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tif (loadingShown) this.element.classList.remove('is-loading');\n\t\t}\n\n\t\tif (abortController.signal.aborted) {\n\t\t\tthis._log(`Aborted: ${panelId}`);\n\t\t\treturn;\n\t\t}\n\n\t\tthis._dispatch<ActivationEventDetail>('ps:activationstart', {\n\t\t\tpanelId,\n\t\t\ttrigger: options.trigger || null\n\t\t});\n\n\t\tconst shouldTransition = withTransition !== false && this.config.transitions !== false;\n\n\t\tlet panelTransition = shouldTransition;\n\t\tlet heightTransition = shouldTransition;\n\n\t\tif (typeof this.config.transitions === 'object') {\n\t\t\tpanelTransition = shouldTransition && this.config.transitions.panels !== false;\n\t\t\theightTransition = shouldTransition && this.config.transitions.height !== false;\n\t\t}\n\n\t\tthis.panels.forEach(panel => panel.classList.toggle('fade', panelTransition));\n\n\t\tconst startHeight = this.element.offsetHeight;\n\t\tif (heightTransition) {\n\t\t\tthis.element.style.height = `${startHeight}px`;\n\t\t}\n\n\t\tconst outgoingPanel = this.activePanel;\n\n\t\tnewPanel.hidden = false;\n\t\tnewPanel.classList.add('incoming');\n\t\tif (panelTransition) {\n\t\t\t// Apply general transitioning class for overflow: hidden\n\t\t\tthis.element.classList.add('is-transitioning');\n\t\t}\n\t\tif (outgoingPanel && outgoingPanel !== newPanel) {\n\t\t\toutgoingPanel.classList.remove('active', 'incoming');\n\t\t\toutgoingPanel.hidden = false;\n\t\t}\n\n\t\trequestAnimationFrame(() => {\n\t\t\tnewPanel.classList.add('active');\n\t\t\tif (outgoingPanel && outgoingPanel !== newPanel) {\n\t\t\t\toutgoingPanel.classList.remove('incoming');\n\t\t\t}\n\n\t\t\tconst targetHeight = this._measureHeight(newPanel);\n\t\t\tconst heightChanged = startHeight !== targetHeight;\n\n\t\t\tif (heightTransition) {\n\t\t\t\tthis.element.style.height = `${targetHeight}px`;\n\t\t\t}\n\n\t\t\tconst promises: Promise<void>[] = [];\n\t\t\tif (panelTransition) {\n\t\t\t\tpromises.push(this._waitForTransition(newPanel));\n\t\t\t}\n\t\t\tif (heightTransition && heightChanged) {\n\t\t\t\tpromises.push(this._waitForTransition(this.element));\n\t\t\t}\n\t\t\tif (!promises.length) promises.push(Promise.resolve());\n\n\t\t\tPromise.all(promises).then(() => {\n\t\t\t\t// Check if interrupted by another activation\n\t\t\t\tif (this.pendingPanel !== newPanel) {\n\t\t\t\t\tthis._log(`Interrupted: ${panelId}`);\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\tthis._cleanupPanels(newPanel);\n\t\t\t\tthis._log(`✓ ${panelId}`);\n\t\t\t\tthis._dispatch<ActivationEventDetail>('ps:activationcomplete', {\n\t\t\t\t\tpanelId,\n\t\t\t\t\ttrigger: options.trigger || null\n\t\t\t\t});\n\t\t\t});\n\t\t});\n\t}\n}"],"names":["_PanelSet","elementOrSelector","options","element","dataConfig","p","data","config","attrs","key","type","value","defaults","selectorOrOptions","selector","elements","instances","el","instance","message","id","wrapper","panel","eventName","detail","s","sum","prop","total","newPanel","resolve","styles","duration","delay","handler","e","isOpening","withTransition","action","oppositeClass","actionClass","myGeneration","targetHeight","currentHeight","isClosed","isClosing","once","event","targetPanel","signal","result","error","panelId","prevPanel","prevPanelId","wasLoadingAsync","abortController","beforeActivateDetail","beforeActivateEvent","userPromise","spinnerTimeout","loadingShown","shouldTransition","heightTransition","err","panelTransition","startHeight","outgoingPanel","heightChanged","promises","PanelSet"],"mappings":"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"}

package/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "panelset",
+  "version": "0.5.0",
+  "description": "Flexible panel management with smooth transitions",
+  "type": "module",
+  "main": "./dist/panelset.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/panelset.js"
+    },
+    "./dist/*.css": "./dist/*.css"
+  },
+  "files": [
+    "dist",
+    "src",
+    "README.md"
+  ],
+  "scripts": {
+    "start": "npm run dev",
+    "dev": "vite --config vite.config.docs.js",
+    "build": "npm run clean && npm run build:lib && npm run build:docs && npm run copy-lib",
+    "build:lib": "vite build",
+    "build:docs": "vite build --config vite.config.docs.js",
+    "copy-lib": "mkdir -p docs/lib && cp -r dist/* docs/lib/",
+    "preview:docs": "npm run build && vite preview --config vite.config.docs.js",
+    "clean": "rm -rf dist docs"
+  },
+  "keywords": [
+    "panels",
+    "tabs",
+    "accordion",
+    "transitions",
+    "ui-components"
+  ],
+  "author": "Martijn De Jongh",
+  "license": "MIT",
+  "devDependencies": {
+    "@vituum/vite-plugin-pug": "^1.1.0",
+    "fast-glob": "^3.3.3",
+    "sass": "latest",
+    "terser": "^5.44.1",
+    "typescript": "^5.3.0",
+    "vite": "^7.2.2",
+    "vite-plugin-dts": "^4.5.4",
+    "vituum": "^1.2.0"
+  }
+}

package/src/docs/assets/scripts/copybutton.js

@@ -0,0 +1,44 @@
+
+// Copy to clipboard functionality for code blocks
+document.addEventListener('click', async (e) => {
+	const button = e.target.closest('button.copy');
+	if (!button) return;
+
+	const demo = button.closest('.code-block');
+	if (!demo) return;
+
+	const codeContainer = demo.querySelector('pre code');
+	if (!codeContainer) return;
+
+	let content = null;
+
+	const hljsTable = codeContainer.querySelector("table.hljs-ln");
+	if (hljsTable) {
+		// Extract only code content, not line numbers
+		content = Array.from(hljsTable.querySelectorAll("td.hljs-ln-code"))
+			.map((cell) => cell.textContent)
+			.join("\n");
+	} else {
+		content = codeContainer.textContent.replace(/^\s+|\s+$/g, "");
+	}
+
+	const originalContent = button.innerHTML;
+	
+	try {
+		await navigator.clipboard.writeText(content);
+		
+		button.innerHTML = 'Copied!';
+		button.classList.add('copied');
+
+	} catch (err) {
+		console.error('Failed to copy text: ', err);
+		button.innerHTML = 'Failed!';
+		button.classList.add('error');
+
+	} finally {
+		setTimeout(() => {
+			button.innerHTML = originalContent;
+			button.classList.remove('copied', 'error');
+		}, 1000);
+	}
+});