baseline-foundry 0.1.3

package/dist/presets/prose/tokens.json

@@ -0,0 +1,221 @@
+{
+  "baselineUnit": "0.5rem",
+  "fontFiles": [
+    {
+      "family": "ubuntu-sans",
+      "path": "../../../assets/fonts/UbuntuSans[wdth,wght].ttf",
+      "cssFamily": "Ubuntu Sans",
+      "fontStyle": "normal",
+      "fontWeight": "100 800",
+      "fontStretch": "75% 100%",
+      "fontDisplay": "swap",
+      "emitFontFace": false
+    }
+  ],
+  "fontStacks": {
+    "ubuntu-sans": "\"Ubuntu Sans\", \"Segoe UI\", system-ui, sans-serif"
+  },
+  "roles": {
+    "body": {
+      "fontSize": "1rem",
+      "lineHeight": "1.5rem",
+      "fontFamily": "ubuntu-sans",
+      "fontWeight": 400,
+      "fontStyle": "normal",
+      "spaceAfter": "1rem",
+      "nudgeTop": "0.41rem",
+      "identifier": "body",
+      "fontStack": "\"Ubuntu Sans\", \"Segoe UI\", system-ui, sans-serif",
+      "marginBottom": "0.09rem"
+    },
+    "h1": {
+      "fontSize": "2.625rem",
+      "lineHeight": "3rem",
+      "fontFamily": "ubuntu-sans",
+      "fontWeight": 500,
+      "fontStyle": "normal",
+      "spaceAfter": "1rem",
+      "nudgeTop": "0.06881rem",
+      "identifier": "h1",
+      "fontStack": "\"Ubuntu Sans\", \"Segoe UI\", system-ui, sans-serif",
+      "marginBottom": "0.43119rem"
+    },
+    "h2": {
+      "fontSize": "2.625rem",
+      "lineHeight": "3rem",
+      "fontFamily": "ubuntu-sans",
+      "fontWeight": 200,
+      "fontStyle": "normal",
+      "spaceAfter": "1rem",
+      "nudgeTop": "0.06881rem",
+      "identifier": "h2",
+      "fontStack": "\"Ubuntu Sans\", \"Segoe UI\", system-ui, sans-serif",
+      "marginBottom": "0.43119rem"
+    },
+    "h3": {
+      "fontSize": "1.5rem",
+      "lineHeight": "2rem",
+      "fontFamily": "ubuntu-sans",
+      "fontWeight": 500,
+      "fontStyle": "normal",
+      "spaceAfter": "1rem",
+      "nudgeTop": "0.46917rem",
+      "identifier": "h3",
+      "fontStack": "\"Ubuntu Sans\", \"Segoe UI\", system-ui, sans-serif",
+      "marginBottom": "0.03083rem"
+    },
+    "h4": {
+      "fontSize": "1.5rem",
+      "lineHeight": "2rem",
+      "fontFamily": "ubuntu-sans",
+      "fontWeight": 300,
+      "fontStyle": "normal",
+      "spaceAfter": "1rem",
+      "nudgeTop": "0.46917rem",
+      "identifier": "h4",
+      "fontStack": "\"Ubuntu Sans\", \"Segoe UI\", system-ui, sans-serif",
+      "marginBottom": "0.03083rem"
+    },
+    "h5": {
+      "fontSize": "1rem",
+      "lineHeight": "1.5rem",
+      "fontFamily": "ubuntu-sans",
+      "fontWeight": 550,
+      "fontStyle": "normal",
+      "spaceAfter": "1rem",
+      "nudgeTop": "0.41rem",
+      "identifier": "h5",
+      "fontStack": "\"Ubuntu Sans\", \"Segoe UI\", system-ui, sans-serif",
+      "marginBottom": "0.09rem",
+      "fontVariantCaps": "all-small-caps",
+      "letterSpacing": "0.05em"
+    },
+    "h6": {
+      "fontSize": "1rem",
+      "lineHeight": "1.5rem",
+      "fontFamily": "ubuntu-sans",
+      "fontWeight": 550,
+      "fontStyle": "normal",
+      "spaceAfter": "1rem",
+      "nudgeTop": "0.41rem",
+      "identifier": "h6",
+      "fontStack": "\"Ubuntu Sans\", \"Segoe UI\", system-ui, sans-serif",
+      "marginBottom": "0.09rem"
+    }
+  },
+  "elements": {
+    "body": {
+      "fontSize": "1rem",
+      "lineHeight": "1.5rem",
+      "fontFamily": "ubuntu-sans",
+      "fontWeight": 400,
+      "fontStyle": "normal",
+      "spaceAfter": "1rem",
+      "nudgeTop": "0.41rem",
+      "identifier": "body",
+      "fontStack": "\"Ubuntu Sans\", \"Segoe UI\", system-ui, sans-serif",
+      "marginBottom": "0.09rem"
+    },
+    "h6": {
+      "fontSize": "1rem",
+      "lineHeight": "1.5rem",
+      "fontFamily": "ubuntu-sans",
+      "fontWeight": 550,
+      "fontStyle": "normal",
+      "spaceAfter": "1rem",
+      "nudgeTop": "0.41rem",
+      "identifier": "h6",
+      "fontStack": "\"Ubuntu Sans\", \"Segoe UI\", system-ui, sans-serif",
+      "marginBottom": "0.09rem"
+    },
+    "h5": {
+      "fontSize": "1rem",
+      "lineHeight": "1.5rem",
+      "fontFamily": "ubuntu-sans",
+      "fontWeight": 550,
+      "fontStyle": "normal",
+      "spaceAfter": "1rem",
+      "nudgeTop": "0.41rem",
+      "identifier": "h5",
+      "fontStack": "\"Ubuntu Sans\", \"Segoe UI\", system-ui, sans-serif",
+      "marginBottom": "0.09rem",
+      "fontVariantCaps": "all-small-caps",
+      "letterSpacing": "0.05em"
+    },
+    "h4": {
+      "fontSize": "1.5rem",
+      "lineHeight": "2rem",
+      "fontFamily": "ubuntu-sans",
+      "fontWeight": 300,
+      "fontStyle": "normal",
+      "spaceAfter": "1rem",
+      "nudgeTop": "0.46917rem",
+      "identifier": "h4",
+      "fontStack": "\"Ubuntu Sans\", \"Segoe UI\", system-ui, sans-serif",
+      "marginBottom": "0.03083rem"
+    },
+    "h3": {
+      "fontSize": "1.5rem",
+      "lineHeight": "2rem",
+      "fontFamily": "ubuntu-sans",
+      "fontWeight": 500,
+      "fontStyle": "normal",
+      "spaceAfter": "1rem",
+      "nudgeTop": "0.46917rem",
+      "identifier": "h3",
+      "fontStack": "\"Ubuntu Sans\", \"Segoe UI\", system-ui, sans-serif",
+      "marginBottom": "0.03083rem"
+    },
+    "h2": {
+      "fontSize": "2.625rem",
+      "lineHeight": "3rem",
+      "fontFamily": "ubuntu-sans",
+      "fontWeight": 200,
+      "fontStyle": "normal",
+      "spaceAfter": "1rem",
+      "nudgeTop": "0.06881rem",
+      "identifier": "h2",
+      "fontStack": "\"Ubuntu Sans\", \"Segoe UI\", system-ui, sans-serif",
+      "marginBottom": "0.43119rem"
+    },
+    "h1": {
+      "fontSize": "2.625rem",
+      "lineHeight": "3rem",
+      "fontFamily": "ubuntu-sans",
+      "fontWeight": 500,
+      "fontStyle": "normal",
+      "spaceAfter": "1rem",
+      "nudgeTop": "0.06881rem",
+      "identifier": "h1",
+      "fontStack": "\"Ubuntu Sans\", \"Segoe UI\", system-ui, sans-serif",
+      "marginBottom": "0.43119rem"
+    }
+  },
+  "layout": {
+    "contentMaxWidth": "90rem",
+    "contentPaddingInline": "1rem",
+    "measure": "40rem",
+    "sectionSpace": "4rem",
+    "sectionSpaceShallow": "1.5rem",
+    "sectionSpaceDeep": "8rem",
+    "stripSpace": "4rem",
+    "gridGapInline": "1rem",
+    "gridGapBlock": "1rem",
+    "pageMargin": "1rem"
+  },
+  "components": {
+    "borderWidth": "1px",
+    "barThickness": "0.1875rem",
+    "radius": "0rem",
+    "controlBlockPadding": "0.5rem",
+    "controlCompactBlockPadding": "0.25rem",
+    "controlInlinePadding": "1rem",
+    "controlInlinePaddingAction": "1rem",
+    "controlInlinePaddingField": "0.5rem",
+    "controlVisualSize": "1rem",
+    "fieldGap": "0.5rem",
+    "panelPaddingInline": "1rem",
+    "panelPaddingBlock": "1rem",
+    "accordionIndent": "1.5rem"
+  }
+}

package/dist/presets.d.ts

@@ -0,0 +1,6 @@
+import { type BuiltInThemeName, type PresetName, type TierName } from "./tier-registry.js";
+export { isPresetName, isTierName, normalizeBuiltInThemeName, presetDescriptions, presetNames, tierDescriptions, tierNames } from "./tier-registry.js";
+export type { BuiltInThemeName, PresetName, TierName } from "./tier-registry.js";
+export declare function resolveTierPath(name: TierName): string;
+export declare function resolvePresetPath(name: PresetName): string;
+export declare function resolveBuiltInThemePath(name: BuiltInThemeName): string;

package/dist/presets.js

@@ -0,0 +1,27 @@
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+import { isTierName } from "./tier-registry.js";
+export { isPresetName, isTierName, normalizeBuiltInThemeName, presetDescriptions, presetNames, tierDescriptions, tierNames } from "./tier-registry.js";
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const tierConfigPaths = {
+    editorial: path.resolve(__dirname, "..", "config", "tiers", "editorial.json"),
+    documentation: path.resolve(__dirname, "..", "config", "tiers", "documentation.json"),
+    app: path.resolve(__dirname, "..", "config", "tiers", "app.json"),
+    os: path.resolve(__dirname, "..", "config", "tiers", "os.json")
+};
+const presetConfigPaths = {
+    prose: tierConfigPaths.editorial,
+    "app-tier": tierConfigPaths.app
+};
+export function resolveTierPath(name) {
+    return tierConfigPaths[name];
+}
+export function resolvePresetPath(name) {
+    return presetConfigPaths[name];
+}
+export function resolveBuiltInThemePath(name) {
+    if (isTierName(name)) {
+        return resolveTierPath(name);
+    }
+    return resolvePresetPath(name);
+}

package/dist/range-controls.d.ts

@@ -0,0 +1,9 @@
+export interface RangeControlsInitOptions {
+    root?: ParentNode;
+    rangeSelector?: string;
+    numberSelector?: string;
+    wrapperSelector?: string;
+}
+export declare function updateRangeFill(range: HTMLInputElement): void;
+export declare function setupRangeControl(range: HTMLInputElement, options?: RangeControlsInitOptions): void;
+export declare function initRangeControls(options?: RangeControlsInitOptions): void;

package/dist/range-controls.js

@@ -0,0 +1,73 @@
+const DEFAULT_RANGE_SELECTOR = "input[type='range']";
+const DEFAULT_NUMBER_SELECTOR = ".bf-slider-input";
+const DEFAULT_WRAPPER_SELECTOR = ".bf-slider";
+function clamp(value, min, max) {
+    return Math.min(Math.max(value, min), max);
+}
+function getBounds(input) {
+    const min = Number(input.min || 0);
+    const max = Number(input.max || 100);
+    if (Number.isNaN(min) || Number.isNaN(max) || min === max) {
+        return { min: 0, max: 100 };
+    }
+    return { min, max };
+}
+export function updateRangeFill(range) {
+    const { min, max } = getBounds(range);
+    const value = Number(range.value || min);
+    const percent = ((clamp(value, min, max) - min) / (max - min)) * 100;
+    range.style.setProperty("--bf-slider-fill-percent", `${percent}%`);
+}
+function findPairedNumberInput(range, options) {
+    const wrapperSelector = options.wrapperSelector ?? DEFAULT_WRAPPER_SELECTOR;
+    const numberSelector = options.numberSelector ?? DEFAULT_NUMBER_SELECTOR;
+    const wrapper = range.closest(wrapperSelector);
+    if (!wrapper) {
+        return null;
+    }
+    return wrapper.querySelector(numberSelector);
+}
+export function setupRangeControl(range, options = {}) {
+    if (range.dataset.bfRangeInitialized === "true") {
+        updateRangeFill(range);
+        return;
+    }
+    const pairedNumberInput = findPairedNumberInput(range, options);
+    updateRangeFill(range);
+    if (pairedNumberInput) {
+        pairedNumberInput.value = range.value;
+        const syncFromNumberInput = () => {
+            const { min, max } = getBounds(range);
+            const numericValue = Number(pairedNumberInput.value || range.value);
+            const nextValue = clamp(Number.isNaN(numericValue) ? Number(range.value) : numericValue, min, max);
+            range.value = String(nextValue);
+            pairedNumberInput.value = String(nextValue);
+            updateRangeFill(range);
+        };
+        pairedNumberInput.addEventListener("input", syncFromNumberInput);
+        pairedNumberInput.addEventListener("change", syncFromNumberInput);
+    }
+    range.addEventListener("input", () => {
+        updateRangeFill(range);
+        if (pairedNumberInput) {
+            pairedNumberInput.value = range.value;
+        }
+    });
+    range.addEventListener("change", () => {
+        updateRangeFill(range);
+        if (pairedNumberInput) {
+            pairedNumberInput.value = range.value;
+        }
+    });
+    range.dataset.bfRangeInitialized = "true";
+}
+export function initRangeControls(options = {}) {
+    const root = options.root ?? document;
+    const rangeSelector = options.rangeSelector ?? DEFAULT_RANGE_SELECTOR;
+    const ranges = root.querySelectorAll(rangeSelector);
+    ranges.forEach(range => {
+        if (range.type === "range") {
+            setupRangeControl(range, options);
+        }
+    });
+}

package/dist/resizable-aside.d.ts

@@ -0,0 +1,4 @@
+export interface ResizableAsideInitOptions {
+    root?: ParentNode;
+}
+export declare function initResizableAsides(options?: ResizableAsideInitOptions): () => void;

package/dist/resizable-aside.js

@@ -0,0 +1,328 @@
+const APPLICATION_SELECTOR = ".bf-application";
+const PINNED_ASIDE_SELECTOR = ".bf-aside.is-pinned";
+const HANDLE_SELECTOR = ".bf-application-aside-resize-handle";
+const DEFAULT_STEP_PX = 16;
+const DEFAULT_STORAGE_PREFIX = "baseline-foundry-aside-width";
+const RESIZING_CLASS = "is-resizing-aside";
+function queryAllWithinRoot(root, selector) {
+    const elements = Array.from(root.querySelectorAll(selector));
+    if (root instanceof Element && root.matches(selector)) {
+        elements.unshift(root);
+    }
+    return elements;
+}
+function getApplications(root) {
+    return queryAllWithinRoot(root, APPLICATION_SELECTOR);
+}
+function resolveCssLengthPx(context, cssValue, fallbackPx) {
+    const trimmedValue = cssValue.trim();
+    if (!trimmedValue) {
+        return fallbackPx;
+    }
+    const probe = document.createElement("div");
+    probe.style.border = "0";
+    probe.style.inlineSize = trimmedValue;
+    probe.style.margin = "0";
+    probe.style.opacity = "0";
+    probe.style.padding = "0";
+    probe.style.pointerEvents = "none";
+    probe.style.position = "absolute";
+    probe.style.visibility = "hidden";
+    context.appendChild(probe);
+    const resolvedPx = probe.getBoundingClientRect().width;
+    probe.remove();
+    return Number.isFinite(resolvedPx) && resolvedPx > 0 ? resolvedPx : fallbackPx;
+}
+function resolveNumericDatasetValue(...values) {
+    for (const value of values) {
+        if (!value) {
+            continue;
+        }
+        const parsed = Number.parseFloat(value);
+        if (Number.isFinite(parsed) && parsed > 0) {
+            return parsed;
+        }
+    }
+    return null;
+}
+function getPinnedAside(application) {
+    return Array.from(application.children).find((child) => {
+        return child instanceof HTMLElement && child.matches(PINNED_ASIDE_SELECTOR);
+    }) ?? application.querySelector(PINNED_ASIDE_SELECTOR);
+}
+function getResizeHandle(application, aside) {
+    return aside?.querySelector(HANDLE_SELECTOR)
+        ?? application.querySelector(HANDLE_SELECTOR)
+        ?? null;
+}
+function isPinnedResizableAside(aside) {
+    return Boolean(aside
+        && aside.classList.contains("is-pinned")
+        && !aside.classList.contains("is-overlay")
+        && !aside.classList.contains("is-drawer")
+        && !aside.classList.contains("is-collapsed"));
+}
+function getStorageKey(application, aside, handle) {
+    const configuredKey = handle.dataset.asideResizeStorageKey
+        ?? aside.dataset.asideResizeStorageKey
+        ?? application.dataset.asideResizeStorageKey;
+    if (configuredKey === "") {
+        return null;
+    }
+    if (configuredKey) {
+        return configuredKey;
+    }
+    const identity = aside.id || application.id;
+    if (!identity) {
+        return null;
+    }
+    return `${DEFAULT_STORAGE_PREFIX}:${location.pathname}:${identity}`;
+}
+function getStepPx(application, aside, handle) {
+    return resolveNumericDatasetValue(handle.dataset.asideResizeStep, aside.dataset.asideResizeStep, application.dataset.asideResizeStep) ?? DEFAULT_STEP_PX;
+}
+function getWidthBounds(application, aside, handle) {
+    const computedStyle = getComputedStyle(application);
+    const minFromDataset = handle.dataset.asideResizeMin
+        ?? aside.dataset.asideResizeMin
+        ?? application.dataset.asideResizeMin;
+    const maxFromDataset = handle.dataset.asideResizeMax
+        ?? aside.dataset.asideResizeMax
+        ?? application.dataset.asideResizeMax;
+    const minValue = minFromDataset
+        ?? computedStyle.getPropertyValue("--bf-app-aside-width-min")
+        ?? computedStyle.getPropertyValue("--bf-application-aside-width-min")
+        ?? computedStyle.getPropertyValue("--bf-app-drawer-width-small")
+        ?? computedStyle.getPropertyValue("--bf-application-drawer-width-small");
+    const maxValue = maxFromDataset
+        ?? computedStyle.getPropertyValue("--bf-app-aside-width-max")
+        ?? computedStyle.getPropertyValue("--bf-application-aside-width-max")
+        ?? computedStyle.getPropertyValue("--bf-app-drawer-width-medium-max")
+        ?? computedStyle.getPropertyValue("--bf-application-drawer-width-medium-max");
+    const minPx = resolveCssLengthPx(application, minValue, 240);
+    const maxPx = resolveCssLengthPx(application, maxValue, 640);
+    return {
+        minPx,
+        maxPx: Math.max(minPx, maxPx)
+    };
+}
+function getCurrentWidthPx(application, aside) {
+    const measuredWidth = aside.getBoundingClientRect().width;
+    if (measuredWidth > 0) {
+        return measuredWidth;
+    }
+    const computedStyle = getComputedStyle(application);
+    return resolveCssLengthPx(application, computedStyle.getPropertyValue("--bf-app-aside-width")
+        || computedStyle.getPropertyValue("--bf-application-aside-width"), 465);
+}
+function clamp(value, minPx, maxPx) {
+    return Math.max(minPx, Math.min(maxPx, value));
+}
+function setHandleInteractivity(handle, enabled) {
+    handle.setAttribute("aria-disabled", String(!enabled));
+    handle.tabIndex = enabled ? 0 : -1;
+}
+function updateHandleA11y(application, aside, handle, widthPx = getCurrentWidthPx(application, aside)) {
+    if (!handle.hasAttribute("role")) {
+        handle.setAttribute("role", "separator");
+    }
+    if (!handle.hasAttribute("aria-orientation")) {
+        handle.setAttribute("aria-orientation", "vertical");
+    }
+    if (!handle.hasAttribute("aria-label")) {
+        handle.setAttribute("aria-label", "Resize panel");
+    }
+    if (aside.id && !handle.hasAttribute("aria-controls")) {
+        handle.setAttribute("aria-controls", aside.id);
+    }
+    const enabled = isPinnedResizableAside(aside);
+    setHandleInteractivity(handle, enabled);
+    if (!enabled) {
+        return;
+    }
+    const { minPx, maxPx } = getWidthBounds(application, aside, handle);
+    handle.setAttribute("aria-valuemin", String(Math.round(minPx)));
+    handle.setAttribute("aria-valuemax", String(Math.round(maxPx)));
+    handle.setAttribute("aria-valuenow", String(Math.round(clamp(widthPx, minPx, maxPx))));
+}
+function readPersistedWidth(storageKey) {
+    if (!storageKey) {
+        return null;
+    }
+    try {
+        const rawWidth = localStorage.getItem(storageKey);
+        if (!rawWidth) {
+            return null;
+        }
+        const parsedWidth = Number.parseFloat(rawWidth);
+        return Number.isFinite(parsedWidth) ? parsedWidth : null;
+    }
+    catch {
+        return null;
+    }
+}
+function writePersistedWidth(storageKey, widthPx) {
+    if (!storageKey) {
+        return;
+    }
+    try {
+        localStorage.setItem(storageKey, String(Math.round(widthPx)));
+    }
+    catch {
+        // Ignore storage failures so the shell still works in restricted environments.
+    }
+}
+function clearPersistedWidth(storageKey) {
+    if (!storageKey) {
+        return;
+    }
+    try {
+        localStorage.removeItem(storageKey);
+    }
+    catch {
+        // Ignore storage failures so reset still works visually.
+    }
+}
+function applyWidth(application, aside, handle, storageKey, widthPx, persist) {
+    const { minPx, maxPx } = getWidthBounds(application, aside, handle);
+    const nextWidthPx = clamp(widthPx, minPx, maxPx);
+    application.style.setProperty("--bf-app-aside-width", `${nextWidthPx}px`);
+    application.style.setProperty("--bf-application-aside-width", `${nextWidthPx}px`);
+    updateHandleA11y(application, aside, handle, nextWidthPx);
+    if (persist) {
+        writePersistedWidth(storageKey, nextWidthPx);
+    }
+    return nextWidthPx;
+}
+function resetWidth(application, aside, handle, storageKey) {
+    clearPersistedWidth(storageKey);
+    application.style.removeProperty("--bf-app-aside-width");
+    application.style.removeProperty("--bf-application-aside-width");
+    updateHandleA11y(application, aside, handle);
+}
+function syncHandleToRenderedWidth(application, aside, handle) {
+    updateHandleA11y(application, aside, handle, getCurrentWidthPx(application, aside));
+}
+function setupApplication(application) {
+    const aside = getPinnedAside(application);
+    const handle = getResizeHandle(application, aside);
+    if (!aside || !handle) {
+        return () => { };
+    }
+    const storageKey = getStorageKey(application, aside, handle);
+    const stepPx = getStepPx(application, aside, handle);
+    const persistedWidth = readPersistedWidth(storageKey);
+    if (persistedWidth !== null) {
+        applyWidth(application, aside, handle, storageKey, persistedWidth, false);
+    }
+    else {
+        updateHandleA11y(application, aside, handle);
+    }
+    let initialSyncFrameId = 0;
+    const onWindowLoad = () => {
+        syncHandleToRenderedWidth(application, aside, handle);
+    };
+    initialSyncFrameId = window.requestAnimationFrame(() => {
+        syncHandleToRenderedWidth(application, aside, handle);
+    });
+    window.addEventListener("load", onWindowLoad, { once: true });
+    const onDoubleClick = () => {
+        resetWidth(application, aside, handle, storageKey);
+    };
+    const onKeyDown = (event) => {
+        if (!isPinnedResizableAside(aside)) {
+            return;
+        }
+        const currentWidthPx = getCurrentWidthPx(application, aside);
+        const { minPx, maxPx } = getWidthBounds(application, aside, handle);
+        const adjustedStepPx = event.shiftKey ? stepPx * 3 : stepPx;
+        if (event.key === "ArrowLeft") {
+            applyWidth(application, aside, handle, storageKey, currentWidthPx + adjustedStepPx, true);
+            event.preventDefault();
+            return;
+        }
+        if (event.key === "ArrowRight") {
+            applyWidth(application, aside, handle, storageKey, currentWidthPx - adjustedStepPx, true);
+            event.preventDefault();
+            return;
+        }
+        if (event.key === "Home") {
+            applyWidth(application, aside, handle, storageKey, minPx, true);
+            event.preventDefault();
+            return;
+        }
+        if (event.key === "End") {
+            applyWidth(application, aside, handle, storageKey, maxPx, true);
+            event.preventDefault();
+        }
+    };
+    const onPointerDown = (event) => {
+        if (event.button !== 0 || !isPinnedResizableAside(aside)) {
+            return;
+        }
+        event.preventDefault();
+        const shellRect = application.getBoundingClientRect();
+        application.classList.add(RESIZING_CLASS);
+        handle.setPointerCapture(event.pointerId);
+        let finished = false;
+        const onPointerMove = (moveEvent) => {
+            const nextWidthPx = shellRect.right - moveEvent.clientX;
+            applyWidth(application, aside, handle, storageKey, nextWidthPx, false);
+        };
+        const finishResize = () => {
+            if (finished) {
+                return;
+            }
+            finished = true;
+            application.classList.remove(RESIZING_CLASS);
+            applyWidth(application, aside, handle, storageKey, getCurrentWidthPx(application, aside), true);
+            handle.removeEventListener("pointermove", onPointerMove);
+            handle.removeEventListener("pointerup", finishResize);
+            handle.removeEventListener("pointercancel", finishResize);
+            handle.removeEventListener("lostpointercapture", finishResize);
+            window.removeEventListener("pointermove", onPointerMove);
+            window.removeEventListener("pointerup", finishResize);
+            window.removeEventListener("pointercancel", finishResize);
+            if (handle.hasPointerCapture(event.pointerId)) {
+                handle.releasePointerCapture(event.pointerId);
+            }
+        };
+        handle.addEventListener("pointermove", onPointerMove);
+        handle.addEventListener("pointerup", finishResize, { once: true });
+        handle.addEventListener("pointercancel", finishResize, { once: true });
+        handle.addEventListener("lostpointercapture", finishResize, { once: true });
+        window.addEventListener("pointermove", onPointerMove);
+        window.addEventListener("pointerup", finishResize, { once: true });
+        window.addEventListener("pointercancel", finishResize, { once: true });
+    };
+    const onWindowResize = () => {
+        if (isPinnedResizableAside(aside)) {
+            applyWidth(application, aside, handle, storageKey, getCurrentWidthPx(application, aside), false);
+            return;
+        }
+        updateHandleA11y(application, aside, handle);
+    };
+    handle.addEventListener("dblclick", onDoubleClick);
+    handle.addEventListener("keydown", onKeyDown);
+    handle.addEventListener("pointerdown", onPointerDown);
+    window.addEventListener("resize", onWindowResize);
+    return () => {
+        if (initialSyncFrameId !== 0) {
+            window.cancelAnimationFrame(initialSyncFrameId);
+        }
+        window.removeEventListener("load", onWindowLoad);
+        handle.removeEventListener("dblclick", onDoubleClick);
+        handle.removeEventListener("keydown", onKeyDown);
+        handle.removeEventListener("pointerdown", onPointerDown);
+        window.removeEventListener("resize", onWindowResize);
+    };
+}
+export function initResizableAsides(options = {}) {
+    const root = options.root ?? document;
+    const cleanups = getApplications(root).map(setupApplication);
+    return () => {
+        for (const cleanup of cleanups) {
+            cleanup();
+        }
+    };
+}

package/dist/side-navigation.d.ts

@@ -0,0 +1,4 @@
+export interface SideNavigationInitOptions {
+    root?: ParentNode;
+}
+export declare function initSideNavigations(options?: SideNavigationInitOptions): () => void;