@marcwiest/midday.js 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Marc Wiest
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,423 @@
+# midday.js
+
+[![npm version](https://img.shields.io/npm/v/@marcwiest/midday.js)](https://www.npmjs.com/package/@marcwiest/midday.js)
+[![npm bundle size](https://img.shields.io/bundlephobia/minzip/@marcwiest/midday.js)](https://bundlephobia.com/package/@marcwiest/midday.js)
+[![CI](https://github.com/marcwiest/midday.js/actions/workflows/ci.yml/badge.svg)](https://github.com/marcwiest/midday.js/actions/workflows/ci.yml)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+
+A modern, zero-dependency vanilla JS plugin for fixed headers that change style as you scroll through page sections. The spiritual successor to [midnight.js](https://github.com/Aerolab/midnight.js).
+
+**~1 kB gzipped** (auto mode) | TypeScript | Framework adapters (React, Vue, Svelte, Solid) included
+
+**[Live Demo](https://marcwiest.github.io/midday.js/)**
+
+## Background
+
+[midnight.js](https://aerolab.github.io/midnight.js/) (2014) introduced a great UI pattern: a fixed header that smoothly transitions between visual styles as page sections scroll beneath it. The transition is a pixel-perfect wipe that follows the section boundary, not an abrupt class swap. midday.js implements the same effect using the browser APIs available today:
+
+- **`clip-path: inset()`** for GPU-composited clipping (replaces the nested `overflow: hidden` + opposing `translateY` technique)
+- **`ResizeObserver`** to track section dimensions reactively (replaces interval-based polling)
+- **Scroll-triggered `requestAnimationFrame`** that idles when the user isn't scrolling
+- **`aria-hidden` + `inert`** on cloned variants for screen reader and keyboard accessibility
+- Full **`destroy()` / `refresh()`** lifecycle for clean teardown and dynamic content
+- Zero dependencies, ~1 kB gzipped, TypeScript, framework adapters for React / Vue / Svelte / Solid
+
+## Install
+
+```bash
+npm install @marcwiest/midday.js
+```
+
+Or via CDN (UMD):
+
+```html
+<script src="https://unpkg.com/@marcwiest/midday.js/dist/midday.umd.js"></script>
+```
+
+## Quick Start
+
+### 1. Write one header, mark your sections
+
+You write a single header. Each section declares which header style it wants via `data-midday-section`:
+
+```html
+<header data-midday>
+  <nav>
+    <a href="/" class="logo">Logo</a>
+    <a href="/about">About</a>
+    <a href="/contact">Contact</a>
+  </nav>
+</header>
+
+<section data-midday-section="dark">
+  <!-- Dark hero — header should have white text here -->
+</section>
+
+<section>
+  <!-- No attribute — header uses its default style -->
+</section>
+
+<section data-midday-section="accent">
+  <!-- Purple section — header should match -->
+</section>
+```
+
+### 2. Initialize
+
+```js
+import { midday } from '@marcwiest/midday.js';
+
+const instance = midday(document.querySelector('[data-midday]'));
+```
+
+### 3. What happens next
+
+The plugin reads every unique `data-midday-section` value on the page (`"dark"`, `"accent"`) and clones your header once per variant. Each clone is wrapped in a container with a `data-midday-variant` attribute. Your original HTML stays as-is — the clones are created at runtime:
+
+```
+<header data-midday>                               ← your element (position: fixed)
+  <div data-midday-variant="default">              ← default style (original content)
+    <nav>Logo, About, Contact</nav>
+  </div>
+  <div data-midday-variant="dark">                 ← clone for "dark" sections
+    <nav>Logo, About, Contact</nav>
+  </div>
+  <div data-midday-variant="accent">               ← clone for "accent" sections
+    <nav>Logo, About, Contact</nav>
+  </div>
+</header>
+```
+
+As you scroll, the plugin shows and hides portions of each clone using `clip-path`, creating a smooth wipe transition at every section boundary.
+
+### 4. Style each variant
+
+Target variant wrappers with `[data-midday-variant="..."]`. Style them however you want:
+
+```css
+header {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 100;
+}
+
+/* Shown over sections without data-midday-section */
+[data-midday-variant="default"] {
+  background: white;
+  color: #111;
+}
+
+/* Shown over data-midday-section="dark" */
+[data-midday-variant="dark"] {
+  background: #111;
+  color: white;
+}
+
+/* Shown over data-midday-section="accent" */
+[data-midday-variant="accent"] {
+  background: linear-gradient(135deg, #667eea, #764ba2);
+  color: white;
+}
+```
+
+That's it. Scroll through your sections and the header transitions smoothly from one section to another.
+
+## API
+
+### `midday(header, options?)` — Auto mode
+
+Clones your header content once per variant and manages everything. Sections are discovered automatically via `data-midday-section` attributes.
+
+```js
+const instance = midday(document.querySelector('[data-midday]'));
+
+// With optional onChange callback:
+const instance = midday(document.querySelector('[data-midday]'), {
+  onChange: (variants) => console.log(variants),
+});
+```
+
+### `middayHeadless(options)` — Headless mode
+
+You provide pre-rendered variant elements. The plugin only manages `clip-path` values. No DOM cloning. Use this when you need **different markup** (not just different styles) per variant.
+
+```js
+import { middayHeadless } from '@marcwiest/midday.js';
+
+const instance = middayHeadless({
+  header: document.querySelector('header'),
+  variants: {
+    default: document.querySelector('.header-default'),
+    dark: document.querySelector('.header-dark'),
+  },
+  defaultVariant: 'default',  // Which key in `variants` is the fallback (optional, defaults to 'default')
+  onChange: (variants) => {},  // Optional
+});
+```
+
+### Instance methods
+
+Both modes return the same instance:
+
+```js
+instance.refresh();  // Re-scan sections and recalculate (call after DOM changes)
+instance.destroy();  // Full teardown — removes clones, listeners, observers
+```
+
+### `onChange` callback
+
+Fires whenever the set of visible variants changes:
+
+```js
+midday(header, {
+  onChange: (variants) => {
+    // variants: Array<{ name: string, progress: number }>
+    // progress: 0–1, how much of the header this variant covers
+    console.log(variants);
+    // e.g. [{ name: 'dark', progress: 0.7 }, { name: 'default', progress: 0.3 }]
+  },
+});
+```
+
+## Framework Adapters
+
+Each adapter is a separate tree-shakable entry point (~0.2 kB gzipped). Import only the one you need — the others are never bundled.
+
+The adapters wrap **auto mode** — your component renders a single header element, and cloning happens client-side on mount. This means your server-rendered HTML always contains just one header, keeping SEO clean (see [SSR & SEO](#ssr--seo) below).
+
+### React
+
+```jsx
+import { useRef } from 'react';
+import { useMidday } from '@marcwiest/midday.js/react';
+
+function Header() {
+  const headerRef = useRef(null);
+  useMidday(headerRef);
+
+  return (
+    <header ref={headerRef} style={{ position: 'fixed', top: 0, left: 0, right: 0 }}>
+      <Nav />
+    </header>
+  );
+}
+```
+
+### Vue
+
+Composable:
+
+```html
+<script setup>
+import { ref } from 'vue';
+import { useMidday } from '@marcwiest/midday.js/vue';
+
+const headerRef = ref(null);
+useMidday(headerRef);
+</script>
+
+<template>
+  <header ref="headerRef">
+    <Nav />
+  </header>
+</template>
+```
+
+Or as a directive (import as `vMidday` for auto-registration in `<script setup>`):
+
+```html
+<script setup>
+import { vMidday } from '@marcwiest/midday.js/vue';
+</script>
+
+<template>
+  <header v-midday>
+    <Nav />
+  </header>
+</template>
+```
+
+### Svelte
+
+```html
+<script>
+  import { midday } from '@marcwiest/midday.js/svelte';
+</script>
+
+<header use:midday>
+  <Nav />
+</header>
+```
+
+### Solid
+
+Primitive:
+
+```jsx
+import { createMidday } from '@marcwiest/midday.js/solid';
+
+function Header() {
+  let headerEl;
+  createMidday(() => headerEl);
+
+  return (
+    <header ref={headerEl} style={{ position: 'fixed', top: '0', left: '0', right: '0' }}>
+      <Nav />
+    </header>
+  );
+}
+```
+
+Or as a directive:
+
+```jsx
+import { midday } from '@marcwiest/midday.js/solid';
+
+function Header() {
+  return (
+    <header use:midday style={{ position: 'fixed', top: '0', left: '0', right: '0' }}>
+      <Nav />
+    </header>
+  );
+}
+```
+
+### Passing options
+
+All adapters accept `onChange`:
+
+```jsx
+// React
+useMidday(headerRef, { onChange: (v) => console.log(v) });
+
+// Vue (composable)
+useMidday(headerRef, { onChange: (v) => console.log(v) });
+
+// Vue (directive)
+<header v-midday="{ onChange: (v) => console.log(v) }"></header>
+
+// Svelte
+<header use:midday={{ onChange: (v) => console.log(v) }}></header>
+
+// Solid (primitive)
+createMidday(() => headerEl, { onChange: (v) => console.log(v) });
+
+// Solid (directive)
+<header use:midday={{ onChange: (v) => console.log(v) }}></header>
+```
+
+## Multiple Instances
+
+midday.js supports multiple independent fixed elements on the same page (e.g., a top header and a bottom app-bar). Name each instance via the `data-midday` attribute and use `data-midday-target` on sections to control which instance they affect.
+
+```html
+<header data-midday="top">...</header>
+<nav class="app-bar" data-midday="bottom">...</nav>
+
+<!-- Targets only the top header -->
+<section data-midday-section="accent" data-midday-target="top">...</section>
+
+<!-- Targets both (space-separated) -->
+<section data-midday-section="inverted" data-midday-target="top bottom">...</section>
+
+<!-- No target — applies to ALL instances -->
+<section data-midday-section="dark">...</section>
+```
+
+```js
+import { midday } from '@marcwiest/midday.js';
+
+const top = midday(document.querySelector('[data-midday="top"]'));
+const bottom = midday(document.querySelector('[data-midday="bottom"]'));
+```
+
+Each instance runs its own engine and only reacts to its own sections. The instance name defaults to the element's `data-midday` attribute value, or you can set it explicitly via `options.name`.
+
+## SSR & SEO
+
+midday.js is designed to be SSR-safe by default.
+
+**Auto mode** (including all framework adapters) clones header content client-side on mount. The server-rendered HTML always contains a single, clean header element — no duplicate navigation links, no hidden clones. Search engine crawlers see exactly one header with one set of nav links.
+
+After hydration, the plugin creates variant clones in the browser. These clones are marked with `aria-hidden="true"` and `inert`, so they're invisible to screen readers and excluded from keyboard navigation. The original header content remains the accessible version.
+
+**Headless mode** is different — since you provide the variant elements yourself, they exist in your markup. If you're using headless mode with SSR, render non-default variants client-side only to avoid duplicate content in the server HTML:
+
+```jsx
+// React (headless + SSR)
+import { useState, useEffect } from 'react';
+import { middayHeadless } from '@marcwiest/midday.js';
+
+function Header() {
+  const [mounted, setMounted] = useState(false);
+  const headerRef = useRef(null);
+  const defaultRef = useRef(null);
+  const darkRef = useRef(null);
+
+  useEffect(() => setMounted(true), []);
+
+  useEffect(() => {
+    if (!mounted || !headerRef.current) return;
+    const instance = middayHeadless({
+      header: headerRef.current,
+      variants: { default: defaultRef.current, dark: darkRef.current },
+    });
+    return () => instance.destroy();
+  }, [mounted]);
+
+  return (
+    <header ref={headerRef}>
+      <div ref={defaultRef} className="header-default"><Nav /></div>
+      {mounted && (
+        <div ref={darkRef} className="header-dark" aria-hidden="true" inert="">
+          <Nav />
+        </div>
+      )}
+    </header>
+  );
+}
+```
+
+For most use cases, the framework adapters (which use auto mode) are simpler and SSR-safe without any extra work.
+
+## How It Works
+
+midday.js uses `clip-path: inset()` to reveal and hide variant header elements as sections scroll past.
+
+1. **Auto mode** clones the header content once per unique variant found in `data-midday-section` attributes. Each clone is wrapped in an absolutely-positioned container inside the header element.
+
+2. On each scroll frame, the plugin calculates which sections overlap the header's viewport position and by how many pixels.
+
+3. Each variant's container gets a `clip-path: inset(topPx 0 bottomPx 0)` that reveals exactly the portion corresponding to its section's overlap with the header. Every variant — including the default — is clipped to only its own region. Nothing is used as a backdrop, so transparent backgrounds work fine.
+
+The result is a pixel-perfect wipe transition at every section boundary.
+
+## Styling Guide
+
+- The header element should be `position: fixed` or `position: sticky`
+- In auto mode, variant wrappers get `data-midday-variant="<name>"` — target them with `[data-midday-variant="dark"]` or however you prefer
+- Transparent variant backgrounds work — each variant is clipped independently, so page content shows through where intended
+- In headless mode, you're responsible for positioning variant elements absolutely within the header and setting `aria-hidden`/`inert` on non-default variants
+- In headless mode, variant elements can have different heights than the header. The clip-path will track section boundaries exactly, with extra height revealing only when the section extends past the header edge
+
+## Browser Support
+
+Requires `clip-path: inset()` (97%+ global support), `ResizeObserver` (97%+), and `requestAnimationFrame`. Works in all modern browsers. No IE support.
+
+## Development
+
+```bash
+pnpm install          # Install dependencies
+pnpm dev              # Vite dev server (serves demo/ with HMR)
+pnpm build            # Full build: ESM + UMD + .d.ts
+pnpm test             # Run tests once
+pnpm test:watch       # Watch mode
+```
+
+Tests use [Vitest](https://vitest.dev/) + [happy-dom](https://github.com/nicedayfor/happy-dom). Global mocks for `ResizeObserver` and `requestAnimationFrame` are in `tests/setup.ts` — see the comments there for details on the mock strategy.
+
+## License
+
+MIT

package/dist/core.d.ts

@@ -0,0 +1,2 @@
+import type { MiddayOptions, MiddayInstance } from './types';
+export declare function createMidday(header: HTMLElement, options?: MiddayOptions): MiddayInstance;

package/dist/core.mjs

@@ -0,0 +1,194 @@
+function k(t) {
+  const i = t.getBoundingClientRect();
+  return {
+    top: i.top + window.scrollY,
+    height: i.height
+  };
+}
+function z(t) {
+  const i = t.getBoundingClientRect();
+  return {
+    top: i.top,
+    height: i.height
+  };
+}
+function P(t) {
+  for (const i of t) {
+    const l = k(i.el);
+    i.top = l.top, i.height = l.height;
+  }
+}
+const G = "[data-midday-section]", K = "data-midday-section", J = "data-midday-target";
+function Y(t) {
+  const i = document.querySelectorAll(G), l = [];
+  for (const s of i) {
+    const d = s.getAttribute(K);
+    if (!d) continue;
+    const v = s.getAttribute(J);
+    v && (!t || !v.split(" ").includes(t)) || l.push({ el: s, variant: d, top: 0, height: 0 });
+  }
+  return P(l), l;
+}
+function Q(t) {
+  let { header: i, variants: l, sections: s } = t;
+  const { defaultName: d, onChange: v } = t;
+  let a = null, p = !1, E = "", c = null;
+  function L() {
+    g();
+  }
+  function S() {
+    P(s), g();
+  }
+  function g() {
+    p || (p = !0, a = requestAnimationFrame(r));
+  }
+  function r() {
+    p = !1, h();
+  }
+  function h() {
+    const C = z(i), o = C.height;
+    if (o <= 0) return;
+    const W = window.scrollY, F = C.top, q = F + o, R = [], _ = /* @__PURE__ */ new Map();
+    let N = o, $ = 0, j = 0;
+    const U = /* @__PURE__ */ new Map();
+    for (const e of s) {
+      const T = e.top - W, m = T + e.height, M = Math.max(F, T), u = Math.min(q, m), B = Math.max(0, u - M);
+      if (B > 0) {
+        j += B;
+        const A = M - F, x = q - u;
+        N = Math.min(N, A), $ = Math.max($, o - x);
+        const I = _.get(e.variant);
+        I ? (I.topInset = Math.min(I.topInset, A), I.bottomInset = Math.min(I.bottomInset, x)) : _.set(e.variant, { topInset: A, bottomInset: x });
+      }
+      let f = U.get(e.variant);
+      f || (f = [], U.set(e.variant, f)), f.push({ viewTop: T, viewBottom: m });
+    }
+    let b = null;
+    for (const e of l) {
+      if (e.name === d) {
+        b = e.wrapper;
+        continue;
+      }
+      const T = U.get(e.name);
+      if (!T) {
+        e.wrapper.style.clipPath = "inset(0 0 100% 0)";
+        continue;
+      }
+      const m = e.wrapper.getBoundingClientRect(), M = m.height || o;
+      let u = M, B = M;
+      for (const f of T) {
+        const A = Math.max(m.top, f.viewTop), x = Math.min(m.bottom, f.viewBottom);
+        x <= A || (u = Math.min(u, A - m.top), B = Math.min(B, m.bottom - x));
+      }
+      if (u + B < M) {
+        e.wrapper.style.clipPath = `inset(${u}px 0 ${B}px 0)`;
+        const f = _.get(e.name), A = f ? (o - f.topInset - f.bottomInset) / o : 0;
+        R.push({ name: e.name, progress: A });
+      } else
+        e.wrapper.style.clipPath = "inset(0 0 100% 0)";
+    }
+    if (b) {
+      const e = b.getBoundingClientRect().height || o;
+      if (j >= o)
+        b.style.clipPath = "inset(0 0 100% 0)";
+      else if (j <= 0)
+        b.style.clipPath = "inset(0)", R.unshift({
+          name: d,
+          progress: 1
+        });
+      else {
+        const T = N;
+        if (o - $ >= T) {
+          const u = e * ($ / o);
+          b.style.clipPath = `inset(${u}px 0 0 0)`;
+        } else {
+          const u = e * ((o - N) / o);
+          b.style.clipPath = `inset(0 0 ${u}px 0)`;
+        }
+        const M = o - j;
+        R.unshift({
+          name: d,
+          progress: M / o
+        });
+      }
+    }
+    const D = R.map((e) => `${e.name}:${e.progress.toFixed(3)}`).join("|");
+    D !== E && (E = D, v == null || v(R));
+  }
+  function w() {
+    c == null || c.disconnect(), c = new ResizeObserver(() => {
+      P(s), g();
+    });
+    for (const C of s)
+      c.observe(C.el);
+  }
+  function n() {
+    window.addEventListener("scroll", L, { passive: !0 }), window.addEventListener("resize", S, { passive: !0 }), w(), g();
+  }
+  function V() {
+    P(s), g();
+  }
+  function H(C, o) {
+    l = C, s = o, P(s), w(), g();
+  }
+  function y() {
+    a !== null && cancelAnimationFrame(a), window.removeEventListener("scroll", L), window.removeEventListener("resize", S), c == null || c.disconnect(), c = null;
+  }
+  return n(), { recalculate: V, update: H, destroy: y };
+}
+const X = "data-midday-variant", O = "default";
+function Z(t, i = {}) {
+  const { onChange: l } = i, s = i.name ?? (t.getAttribute("data-midday") || void 0), d = t.innerHTML, v = t.style.overflow;
+  let a = null, p = [];
+  function E() {
+    const r = Y(s), h = /* @__PURE__ */ new Set();
+    for (const y of r)
+      h.add(y.variant);
+    t.style.overflow = "visible";
+    const w = document.createDocumentFragment();
+    for (; t.firstChild; )
+      w.appendChild(t.firstChild);
+    const n = [];
+    for (const y of h)
+      n.push(c(y, w, !0));
+    const V = c(O, w, !1);
+    t.appendChild(V.wrapper);
+    const H = [V];
+    for (const y of n)
+      t.appendChild(y.wrapper), H.push(y);
+    return H;
+  }
+  function c(r, h, w) {
+    const n = document.createElement("div");
+    return n.setAttribute(X, r), n.style.position = "absolute", n.style.top = "0", n.style.left = "0", n.style.right = "0", n.style.bottom = "0", n.style.willChange = "clip-path", n.style.clipPath = "inset(0 0 100% 0)", w ? (n.setAttribute("aria-hidden", "true"), n.setAttribute("inert", ""), n.style.pointerEvents = "none", n.appendChild(h.cloneNode(!0))) : n.appendChild(h), { wrapper: n, name: r };
+  }
+  function L() {
+    const r = Y(s);
+    p = E(), a = Q({
+      header: t,
+      variants: p,
+      defaultName: O,
+      sections: r,
+      onChange: l
+    });
+  }
+  function S() {
+    for (const h of p)
+      h.wrapper.remove();
+    t.innerHTML = d;
+    const r = Y(s);
+    p = E(), a == null || a.update(p, r);
+  }
+  function g() {
+    a == null || a.destroy(), a = null;
+    for (const r of p)
+      r.wrapper.remove();
+    p = [], t.innerHTML = d, t.style.overflow = v;
+  }
+  return L(), { refresh: S, destroy: g };
+}
+export {
+  Z as a,
+  Q as c,
+  Y as s
+};

package/dist/engine.d.ts

@@ -0,0 +1,2 @@
+import type { EngineConfig, Engine } from './types';
+export declare function createEngine(config: EngineConfig): Engine;

package/dist/headless.d.ts

@@ -0,0 +1,2 @@
+import type { MiddayHeadlessOptions, MiddayInstance } from './types';
+export declare function createMiddayHeadless(options: MiddayHeadlessOptions): MiddayInstance;

package/dist/index.d.ts

@@ -0,0 +1,24 @@
+import type { MiddayOptions, MiddayHeadlessOptions, MiddayInstance, ActiveVariant } from './types';
+/**
+ * Auto mode — Initialize midday.js on a fixed header element.
+ * Automatically clones header content for each variant and manages the DOM.
+ *
+ * @param header - The fixed/sticky header element
+ * @param options - Optional configuration
+ * @returns Instance with refresh() and destroy() methods
+ *
+ * @example
+ * ```js
+ * const instance = midday(document.querySelector('[data-midday]'));
+ * ```
+ */
+export declare function midday(header: HTMLElement, options?: MiddayOptions): MiddayInstance;
+/**
+ * Headless mode — Bring your own variant elements.
+ * Manages only clip-paths on pre-rendered elements. No DOM cloning.
+ *
+ * @param options - Header, variant elements, and optional config
+ * @returns Instance with refresh() and destroy() methods
+ */
+export declare function middayHeadless(options: MiddayHeadlessOptions): MiddayInstance;
+export type { MiddayOptions, MiddayHeadlessOptions, MiddayInstance, ActiveVariant };

package/dist/midday.mjs

@@ -0,0 +1,45 @@
+import { s as i, c as y, a as p } from "./core.mjs";
+function h(a) {
+  const {
+    header: e,
+    variants: c,
+    defaultVariant: o = "default",
+    name: r,
+    onChange: d
+  } = a;
+  let t = null;
+  function s() {
+    return Object.entries(c).map(([n, m]) => ({
+      name: n,
+      wrapper: m
+    }));
+  }
+  function u() {
+    const n = i(r);
+    t = y({
+      header: e,
+      variants: s(),
+      defaultName: o,
+      sections: n,
+      onChange: d
+    });
+  }
+  function f() {
+    const n = i(r);
+    t == null || t.update(s(), n);
+  }
+  function l() {
+    t == null || t.destroy(), t = null;
+  }
+  return u(), { refresh: f, destroy: l };
+}
+function M(a, e) {
+  return p(a, e);
+}
+function H(a) {
+  return h(a);
+}
+export {
+  M as midday,
+  H as middayHeadless
+};

package/dist/midday.umd.js

@@ -0,0 +1 @@
+(function(C,I){typeof exports=="object"&&typeof module<"u"?I(exports):typeof define=="function"&&define.amd?define(["exports"],I):(C=typeof globalThis<"u"?globalThis:C||self,I(C.midday={}))})(this,(function(C){"use strict";function I(t){const o=t.getBoundingClientRect();return{top:o.top+window.scrollY,height:o.height}}function G(t){const o=t.getBoundingClientRect();return{top:o.top,height:o.height}}function V(t){for(const o of t){const l=I(o.el);o.top=l.top,o.height=l.height}}const K="[data-midday-section]",J="data-midday-section",Q="data-midday-target";function H(t){const o=document.querySelectorAll(K),l=[];for(const s of o){const u=s.getAttribute(J);if(!u)continue;const m=s.getAttribute(Q);m&&(!t||!m.split(" ").includes(t))||l.push({el:s,variant:u,top:0,height:0})}return V(l),l}function D(t){let{header:o,variants:l,sections:s}=t;const{defaultName:u,onChange:m}=t;let n=null,c=!1,B="",r=null;function R(){v()}function h(){V(s),v()}function v(){c||(c=!0,n=requestAnimationFrame(d))}function d(){c=!1,g()}function g(){const P=G(o),a=P.height;if(a<=0)return;const ot=window.scrollY,U=P.top,k=U+a,L=[],Y=new Map;let F=a,_=0,O=0;const q=new Map;for(const e of s){const M=e.top-ot,w=M+e.height,b=Math.max(U,M),p=Math.min(k,w),E=Math.max(0,p-b);if(E>0){O+=E;const A=b-U,S=k-p;F=Math.min(F,A),_=Math.max(_,a-S);const N=Y.get(e.variant);N?(N.topInset=Math.min(N.topInset,A),N.bottomInset=Math.min(N.bottomInset,S)):Y.set(e.variant,{topInset:A,bottomInset:S})}let f=q.get(e.variant);f||(f=[],q.set(e.variant,f)),f.push({viewTop:M,viewBottom:w})}let x=null;for(const e of l){if(e.name===u){x=e.wrapper;continue}const M=q.get(e.name);if(!M){e.wrapper.style.clipPath="inset(0 0 100% 0)";continue}const w=e.wrapper.getBoundingClientRect(),b=w.height||a;let p=b,E=b;for(const f of M){const A=Math.max(w.top,f.viewTop),S=Math.min(w.bottom,f.viewBottom);S<=A||(p=Math.min(p,A-w.top),E=Math.min(E,w.bottom-S))}if(p+E<b){e.wrapper.style.clipPath=`inset(${p}px 0 ${E}px 0)`;const f=Y.get(e.name),A=f?(a-f.topInset-f.bottomInset)/a:0;L.push({name:e.name,progress:A})}else e.wrapper.style.clipPath="inset(0 0 100% 0)"}if(x){const e=x.getBoundingClientRect().height||a;if(O>=a)x.style.clipPath="inset(0 0 100% 0)";else if(O<=0)x.style.clipPath="inset(0)",L.unshift({name:u,progress:1});else{const M=F;if(a-_>=M){const p=e*(_/a);x.style.clipPath=`inset(${p}px 0 0 0)`}else{const p=e*((a-F)/a);x.style.clipPath=`inset(0 0 ${p}px 0)`}const b=a-O;L.unshift({name:u,progress:b/a})}}const z=L.map(e=>`${e.name}:${e.progress.toFixed(3)}`).join("|");z!==B&&(B=z,m==null||m(L))}function y(){r==null||r.disconnect(),r=new ResizeObserver(()=>{V(s),v()});for(const P of s)r.observe(P.el)}function i(){window.addEventListener("scroll",R,{passive:!0}),window.addEventListener("resize",h,{passive:!0}),y(),v()}function j(){V(s),v()}function $(P,a){l=P,s=a,V(s),y(),v()}function T(){n!==null&&cancelAnimationFrame(n),window.removeEventListener("scroll",R),window.removeEventListener("resize",h),r==null||r.disconnect(),r=null}return i(),{recalculate:j,update:$,destroy:T}}const X="data-midday-variant",W="default";function Z(t,o={}){const{onChange:l}=o,s=o.name??(t.getAttribute("data-midday")||void 0),u=t.innerHTML,m=t.style.overflow;let n=null,c=[];function B(){const d=H(s),g=new Set;for(const T of d)g.add(T.variant);t.style.overflow="visible";const y=document.createDocumentFragment();for(;t.firstChild;)y.appendChild(t.firstChild);const i=[];for(const T of g)i.push(r(T,y,!0));const j=r(W,y,!1);t.appendChild(j.wrapper);const $=[j];for(const T of i)t.appendChild(T.wrapper),$.push(T);return $}function r(d,g,y){const i=document.createElement("div");return i.setAttribute(X,d),i.style.position="absolute",i.style.top="0",i.style.left="0",i.style.right="0",i.style.bottom="0",i.style.willChange="clip-path",i.style.clipPath="inset(0 0 100% 0)",y?(i.setAttribute("aria-hidden","true"),i.setAttribute("inert",""),i.style.pointerEvents="none",i.appendChild(g.cloneNode(!0))):i.appendChild(g),{wrapper:i,name:d}}function R(){const d=H(s);c=B(),n=D({header:t,variants:c,defaultName:W,sections:d,onChange:l})}function h(){for(const g of c)g.wrapper.remove();t.innerHTML=u;const d=H(s);c=B(),n==null||n.update(c,d)}function v(){n==null||n.destroy(),n=null;for(const d of c)d.wrapper.remove();c=[],t.innerHTML=u,t.style.overflow=m}return R(),{refresh:h,destroy:v}}function tt(t){const{header:o,variants:l,defaultVariant:s="default",name:u,onChange:m}=t;let n=null;function c(){return Object.entries(l).map(([h,v])=>({name:h,wrapper:v}))}function B(){const h=H(u);n=D({header:o,variants:c(),defaultName:s,sections:h,onChange:m})}function r(){const h=H(u);n==null||n.update(c(),h)}function R(){n==null||n.destroy(),n=null}return B(),{refresh:r,destroy:R}}function et(t,o){return Z(t,o)}function nt(t){return tt(t)}C.midday=et,C.middayHeadless=nt,Object.defineProperty(C,Symbol.toStringTag,{value:"Module"})}));

package/dist/react.d.ts

@@ -0,0 +1,7 @@
+import type { MiddayOptions, MiddayInstance } from './types';
+/**
+ * React hook for midday.js (auto mode).
+ * Initializes on mount, destroys on unmount.
+ * Cloning happens client-side — safe for SSR.
+ */
+export declare function useMidday(headerRef: React.RefObject<HTMLElement | null>, options?: MiddayOptions): React.RefObject<MiddayInstance | null>;

package/dist/react.mjs

@@ -0,0 +1,15 @@
+import { useRef as u, useEffect as c } from "react";
+import { a as o } from "./core.mjs";
+function s(t, n) {
+  const r = u(null);
+  return c(() => {
+    if (t.current)
+      return r.current = o(t.current, n), () => {
+        var e;
+        (e = r.current) == null || e.destroy(), r.current = null;
+      };
+  }, []), r;
+}
+export {
+  s as useMidday
+};

package/dist/solid.d.ts

@@ -0,0 +1,21 @@
+import type { MiddayOptions, MiddayInstance } from './types';
+/**
+ * Solid primitive for midday.js (auto mode).
+ * Initializes on mount, cleans up on disposal.
+ * Cloning happens client-side — safe for SSR.
+ */
+export declare function createMidday(headerAccessor: () => HTMLElement | null, options?: MiddayOptions): () => MiddayInstance | null;
+/**
+ * Solid directive for midday.js (auto mode).
+ * Usage: <header use:midday> or <header use:midday={{ onChange }}>
+ *
+ * TypeScript: extend JSX.DirectiveFunctions in your app:
+ *   declare module "solid-js" {
+ *     namespace JSX {
+ *       interface DirectiveFunctions {
+ *         midday: typeof import('midday.js/solid').midday;
+ *       }
+ *     }
+ *   }
+ */
+export declare function midday(el: HTMLElement, accessor: () => MiddayOptions | undefined): void;

package/dist/solid.mjs

@@ -0,0 +1,21 @@
+import { onMount as d, onCleanup as e } from "solid-js";
+import { a } from "./core.mjs";
+function c(n, o) {
+  let t = null;
+  return d(() => {
+    const r = n();
+    r && (t = a(r, o));
+  }), e(() => {
+    t == null || t.destroy(), t = null;
+  }), () => t;
+}
+function l(n, o) {
+  const t = a(n, o());
+  e(() => {
+    t.destroy();
+  });
+}
+export {
+  c as createMidday,
+  l as midday
+};

package/dist/svelte.d.ts

@@ -0,0 +1,12 @@
+import type { MiddayOptions } from './types';
+/**
+ * Svelte action for midday.js (auto mode).
+ * Initializes when the element mounts, destroys when it unmounts.
+ * Cloning happens client-side — safe for SSR.
+ *
+ * Usage: <header use:midday> or <header use:midday={{ onChange }}>
+ */
+export declare function midday(node: HTMLElement, options?: MiddayOptions): {
+    update: (opts?: MiddayOptions) => void;
+    destroy: () => void;
+};

package/dist/svelte.mjs

@@ -0,0 +1,15 @@
+import { a as t } from "./core.mjs";
+function u(d, o) {
+  let r = t(d, o);
+  return {
+    update(e) {
+      r == null || r.destroy(), r = t(d, e);
+    },
+    destroy() {
+      r == null || r.destroy(), r = null;
+    }
+  };
+}
+export {
+  u as midday
+};

package/dist/types.d.ts

@@ -0,0 +1,52 @@
+export interface ActiveVariant {
+    /** The variant name (from data-midday-section value) */
+    name: string;
+    /** How much of the header this variant covers (0 to 1) */
+    progress: number;
+}
+export interface MiddayInstance {
+    /** Re-scan sections and recalculate positions. Call after DOM changes. */
+    refresh: () => void;
+    /** Full teardown: remove clones, observers, listeners, restore original DOM. */
+    destroy: () => void;
+}
+export interface SectionData {
+    el: Element;
+    variant: string;
+    top: number;
+    height: number;
+}
+export interface VariantState {
+    wrapper: HTMLElement;
+    name: string;
+}
+export interface MiddayOptions {
+    /** Instance name for multi-instance scoping. Sections with a matching data-midday-target will be claimed by this instance. Defaults to the header's data-midday attribute value. */
+    name?: string;
+    /** Called when the set of visible variants changes */
+    onChange?: ((variants: ActiveVariant[]) => void) | null;
+}
+export interface MiddayHeadlessOptions {
+    /** The fixed/sticky header element (used for position calculations) */
+    header: HTMLElement;
+    /** Map of variant name to wrapper element. The plugin manages clip-paths on these. */
+    variants: Record<string, HTMLElement>;
+    /** Which key in `variants` is the default (shown where no section overlaps). Defaults to 'default'. */
+    defaultVariant?: string;
+    /** Instance name for multi-instance scoping. Sections with a matching data-midday-target will be claimed by this instance. */
+    name?: string;
+    /** Called when the set of visible variants changes */
+    onChange?: ((variants: ActiveVariant[]) => void) | null;
+}
+export interface EngineConfig {
+    header: HTMLElement;
+    variants: VariantState[];
+    defaultName: string;
+    sections: SectionData[];
+    onChange?: ((variants: ActiveVariant[]) => void) | null;
+}
+export interface Engine {
+    recalculate: () => void;
+    update: (variants: VariantState[], sections: SectionData[]) => void;
+    destroy: () => void;
+}

package/dist/utils.d.ts

@@ -0,0 +1,27 @@
+import type { SectionData } from './types';
+/**
+ * Get a section's position relative to the document.
+ * Uses getBoundingClientRect + scrollY for accuracy.
+ */
+export declare function getSectionBounds(el: Element): {
+    top: number;
+    height: number;
+};
+/**
+ * Get the header's current viewport-relative bounding rect.
+ * This accounts for CSS transforms, sticky offsets, etc.
+ */
+export declare function getHeaderBounds(el: HTMLElement): {
+    top: number;
+    height: number;
+};
+/**
+ * Calculate cached bounds for all tracked sections.
+ */
+export declare function cacheSectionBounds(sections: SectionData[]): void;
+/**
+ * Scan the document for sections, optionally filtered by instance name.
+ * - Sections without data-midday-target apply to ALL instances.
+ * - Sections with data-midday-target apply only to the listed instance(s) (space-separated).
+ */
+export declare function scanSections(instanceName?: string): SectionData[];

package/dist/vue.d.ts

@@ -0,0 +1,14 @@
+import { type Ref, type ObjectDirective } from 'vue';
+import type { MiddayOptions, MiddayInstance } from './types';
+/**
+ * Vue composable for midday.js (auto mode).
+ * Initializes on mount, destroys on unmount.
+ * Cloning happens client-side — safe for SSR.
+ */
+export declare function useMidday(headerRef: Ref<HTMLElement | null>, options?: MiddayOptions): Ref<MiddayInstance | null>;
+/**
+ * Vue custom directive for midday.js (auto mode).
+ * Usage: <header v-midday> or <header v-midday="{ onChange }">
+ * In <script setup>, import as `vMidday` for auto-registration.
+ */
+export declare const vMidday: ObjectDirective<HTMLElement, MiddayOptions | undefined>;

package/dist/vue.mjs

@@ -0,0 +1,25 @@
+import { shallowRef as o, onMounted as u, onUnmounted as s } from "vue";
+import { a as d } from "./core.mjs";
+function r(n, e) {
+  const t = o(null);
+  return u(() => {
+    n.value && (t.value = d(n.value, e));
+  }), s(() => {
+    var a;
+    (a = t.value) == null || a.destroy(), t.value = null;
+  }), t;
+}
+const c = {
+  mounted(n, e) {
+    const t = d(n, e.value);
+    n.__middayInstance = t;
+  },
+  unmounted(n) {
+    var e;
+    (e = n.__middayInstance) == null || e.destroy(), delete n.__middayInstance;
+  }
+};
+export {
+  r as useMidday,
+  c as vMidday
+};

package/package.json

@@ -0,0 +1,95 @@
+{
+  "name": "@marcwiest/midday.js",
+  "version": "0.1.0",
+  "description": "A modern vanilla JS plugin for fixed headers that change style as you scroll through sections. Zero dependencies. The spiritual successor to midnight.js.",
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/marcwiest/midday.js.git"
+  },
+  "homepage": "https://github.com/marcwiest/midday.js#readme",
+  "bugs": {
+    "url": "https://github.com/marcwiest/midday.js/issues"
+  },
+  "type": "module",
+  "main": "./dist/midday.umd.js",
+  "module": "./dist/midday.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/midday.mjs",
+      "require": "./dist/midday.umd.js"
+    },
+    "./react": {
+      "types": "./dist/react.d.ts",
+      "import": "./dist/react.mjs"
+    },
+    "./vue": {
+      "types": "./dist/vue.d.ts",
+      "import": "./dist/vue.mjs"
+    },
+    "./svelte": {
+      "types": "./dist/svelte.d.ts",
+      "import": "./dist/svelte.mjs"
+    },
+    "./solid": {
+      "types": "./dist/solid.d.ts",
+      "import": "./dist/solid.mjs"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build && vite build --config vite.config.umd.ts && tsc --emitDeclarationOnly",
+    "preview": "vite preview",
+    "build:demo": "vite build --config vite.config.demo.ts",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "prepublishOnly": "pnpm build && pnpm test"
+  },
+  "keywords": [
+    "header",
+    "fixed-header",
+    "scroll",
+    "clip-path",
+    "navigation",
+    "midnight.js",
+    "vanilla-js",
+    "no-dependencies",
+    "react",
+    "vue",
+    "svelte",
+    "solid"
+  ],
+  "license": "MIT",
+  "peerDependencies": {
+    "react": ">=18",
+    "solid-js": ">=1",
+    "vue": ">=3"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    },
+    "vue": {
+      "optional": true
+    },
+    "solid-js": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@types/react": "^19.2.14",
+    "happy-dom": "^20.6.3",
+    "solid-js": "^1.9.11",
+    "typescript": "^5.7.0",
+    "vite": "^6.1.0",
+    "vitest": "^4.0.18",
+    "vue": "^3.5.28"
+  }
+}