@navette-js/support 0.0.0-stage → 1.0.0-beta.2

package/lib/index.js

@@ -0,0 +1,514 @@
+import { AsyncLocalStorage } from 'node:async_hooks';
+// @navette-js/support — shared building blocks: escaping, attribute bags, JS serialization, lazy evaluation, colors, icons,
+// namespaced EJS views.
+import ejs from 'ejs';
+import { existsSync, readFileSync } from 'node:fs';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+// ------------------------------------------------------------------ escaping
+/** Escapes `&`, `<`, `>`, `"` and `'` for HTML. */
+export function e(value) {
+    return String(value ?? '').replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;').replace(/'/g, '&#039;');
+}
+/** Trusted HTML string: views do not escape it again. */
+export class HtmlString {
+    html;
+    constructor(html) { this.html = html; }
+    toString() { return this.html; }
+}
+export const raw = (html) => new HtmlString(html);
+// ------------------------------------------------------------------ JS serialization
+// Quotes, `<`, `>` and `&` are written as `\uXXXX` so the output is safe inside HTML attributes and `<script>`.
+const BS = String.fromCharCode(92);
+const HEX = { '"': 'u0022', "'": 'u0027', '<': 'u003C', '>': 'u003E', '&': 'u0026', '/': '/' };
+function phpString(value) {
+    let out = '';
+    for (const ch of value) {
+        if (ch in HEX)
+            out += BS + HEX[ch];
+        else if (ch === BS)
+            out += BS + BS;
+        else if (ch < ' ')
+            out += JSON.stringify(ch).slice(1, -1);
+        else
+            out += ch;
+    }
+    return out;
+}
+/** JSON where `'`, `"`, `<`, `>` and `&` inside strings become `\uXXXX` (structural quotes are kept) and `/` is escaped. */
+function phpJson(value) {
+    const json = JSON.stringify(value);
+    const HEX = { "'": BS + 'u0027', '<': BS + 'u003C', '>': BS + 'u003E', '&': BS + 'u0026', '/': BS + '/' };
+    let out = '';
+    for (let i = 0; i < json.length; i++) {
+        const c = json[i];
+        if (c === BS) {
+            const next = json[++i];
+            out += next === '"' ? BS + 'u0022' : BS + next;
+            continue;
+        }
+        out += HEX[c] ?? c;
+    }
+    return out;
+}
+/** Serializes a value into a JavaScript expression that is safe to embed in HTML. */
+export function js(value) {
+    if (value === null || value === undefined)
+        return 'null';
+    if (typeof value === 'string')
+        return "'" + phpString(value) + "'";
+    if (typeof value === 'number' || typeof value === 'boolean')
+        return String(value);
+    return "JSON.parse('" + phpString(phpJson(value)) + "')";
+}
+export function cls(list) {
+    const out = [];
+    const items = Array.isArray(list) ? list : [list];
+    for (const item of items) {
+        if (!item)
+            continue;
+        if (typeof item === 'string')
+            out.push(item);
+        else
+            for (const [k, on] of Object.entries(item))
+                if (on)
+                    out.push(k);
+    }
+    return out.join(' ');
+}
+export class Attributes {
+    map = new Map();
+    constructor(initial = {}) { for (const [k, v] of Object.entries(initial))
+        this.map.set(k, v); }
+    get(key) { return this.map.get(key); }
+    has(key) { return this.map.has(key); }
+    /** Defaults come first, then existing attributes (`class` and `style` are concatenated); null/false defaults are skipped. */
+    merge(defaults) {
+        const out = new Attributes();
+        for (const [k, v] of Object.entries(defaults)) {
+            if (v === null || v === undefined || v === false)
+                continue;
+            out.map.set(k, v);
+        }
+        for (const [k, v] of this.map) {
+            const merged = (k === 'class' || k === 'style') && out.map.has(k) ? [out.map.get(k), v].filter((x) => x !== '' && x != null).join(' ') : v;
+            out.map.delete(k);
+            out.map.set(k, merged);
+        }
+        return out;
+    }
+    /** Adds (or replaces) an attribute at the end. */
+    set(key, value) { const out = this.clone(); out.map.delete(key); out.map.set(key, value); return out; }
+    clone() { const out = new Attributes(); for (const [k, v] of this.map)
+        out.map.set(k, v); return out; }
+    /** Appends classes after the existing ones; the attribute keeps its position, or goes last. */
+    class(list) {
+        const out = this.clone();
+        out.map.set('class', [out.map.get('class'), cls(list)].filter((x) => x !== '' && x != null).join(' '));
+        return out;
+    }
+    style(list) {
+        const added = list.filter(Boolean).join('; ');
+        if (!added)
+            return this;
+        const out = this.clone();
+        const existing = String(out.map.get('style') ?? '').replace(/;+$/, '');
+        out.map.set('style', [existing, added].filter(Boolean).join('; ') + ';');
+        return out;
+    }
+    when(condition, fn) { return condition ? fn(this) : this; }
+    /** Grid container: `fi-grid` classes and `--cols-*` variables per breakpoint. */
+    grid(columns = {}) {
+        const cols = typeof columns === 'number' ? { lg: columns } : { ...(columns ?? {}) };
+        for (const k of Object.keys(cols))
+            if (!cols[k])
+                delete cols[k];
+        cols.default ??= 1;
+        const v = (bp) => bp.replace(/@/g, 'c').replace(/!/g, 'n');
+        return this
+            .class(['fi-grid', ...Object.keys(cols).map((bp) => (bp === 'default' ? (cols[bp] > 1 ? 'fi-grid-cols' : '') : `${bp}:fi-grid-cols`))])
+            .style(Object.entries(cols).map(([bp, n]) => `--cols-${v(bp)}: repeat(${n}, minmax(0, 1fr))`));
+    }
+    /** Grid column: `fi-grid-col` classes and `--col-span-*` variables per breakpoint. */
+    gridColumn(span = {}, isHidden = false) {
+        const s = span !== null && typeof span === 'object' ? { ...span } : span ? { lg: span } : {};
+        for (const k of Object.keys(s))
+            if (!s[k])
+                delete s[k];
+        const v = (bp) => bp.replace(/@/g, 'c').replace(/!/g, 'n');
+        return this
+            .class(['fi-grid-col', { 'fi-hidden': isHidden || s.default === 'hidden' }, ...Object.keys(s).map((bp) => (bp === 'default' ? '' : `${bp}:fi-grid-col-span`))])
+            .style(Object.entries(s).map(([bp, n]) => `--col-span-${v(bp)}: ${n === 'full' ? '1 / -1' : `span ${n} / span ${n}`}`));
+    }
+    /** Renders `key="value"` pairs; `true` becomes `key="key"` (or `""` for x-data and wire:*). Values are not escaped again, except `"`. */
+    toHtml() {
+        const parts = [];
+        for (const [k, v] of this.map) {
+            if (v === false || v === null || v === undefined)
+                continue;
+            const value = v === true ? (k === 'x-data' || k.startsWith('wire:') ? '' : k) : String(v);
+            parts.push(`${k}="${value.replace(/"/g, '&quot;')}"`);
+        }
+        return parts.join(' ');
+    }
+    toString() { return this.toHtml(); }
+}
+export const attrs = (initial = {}) => new Attributes(initial);
+export async function evaluate(value, ctx) {
+    return typeof value === 'function' ? await value(ctx) : value;
+}
+// ------------------------------------------------------------------ colors
+const here = (p) => fileURLToPath(new URL(p, import.meta.url));
+export const Color = JSON.parse(readFileSync(here('../data/palettes.json'), 'utf8'));
+export const WCAG_AA_TEXT = 4.5;
+/** Converts `#rrggbb`, `rgb(r, g, b)` or `r, g, b` to `oklch(L C h)`, rounded to three decimals. */
+export function convertToOklch(color) {
+    if (color.startsWith('oklch('))
+        return color;
+    const compact = color.replace(/\s+/g, '');
+    const [r, g, b] = (compact.startsWith('#') ? convertToRgb(compact) : compact.replace(/^rgb\(|\)$/g, '').split(',').map(Number)).map((channel) => {
+        const c = channel / 255;
+        return c <= 0.04045 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;
+    });
+    if (![r, g, b].every(Number.isFinite))
+        throw new Error(`Unsupported color: ${color}`);
+    const l = Math.cbrt(0.4122214708 * r + 0.5363325363 * g + 0.0514459929 * b), m = Math.cbrt(0.2119034982 * r + 0.6806995451 * g + 0.1073969566 * b), s = Math.cbrt(0.0883024619 * r + 0.2817188376 * g + 0.6299787005 * b);
+    const lightness = 0.2104542553 * l + 0.793617785 * m - 0.0040720468 * s;
+    const a = 1.9779984951 * l - 2.428592205 * m + 0.4505937099 * s, bb = 0.0259040371 * l + 0.7827717662 * m - 0.808675766 * s;
+    let hue = (Math.atan2(bb, a) * 180) / Math.PI;
+    if (hue < 0)
+        hue += 360;
+    const round = (n) => String(Math.round(n * 1000) / 1000);
+    return `oklch(${round(lightness)} ${round(Math.sqrt(a * a + bb * bb))} ${round(hue)})`;
+}
+/** Lightness and chroma of each shade of a generated palette. */
+const GENERATED_SHADES = [
+    [50, '0.97717647058824', '0.01395454545455'], [100, '0.95035294117647', '0.03272727272727'], [200, '0.90547058823529', '0.06318181818182'],
+    [300, '0.84047058823529', '0.10604545454546'], [400, '0.75352941176471', '0.15027272727273'], [500, '0.68270588235294', '0.17009090909091'],
+    [600, '0.59782352941176', '0.16913636363636'], [700, '0.51494117647059', '0.14940909090909'], [800, '0.44611764705882', '0.12331818181818'],
+    [900, '0.39458823529412', '0.09963636363636'], [950, '0.27788235294118', '0.07136363636364'],
+];
+/** Builds an eleven-shade palette from a single color, keeping its hue. */
+export function generatePalette(color) {
+    const [, , chroma, hue] = /^oklch\(([\d.]+) ([\d.]+) ([\d.]+)\)$/.exec(convertToOklch(color)).map(Number);
+    const achromatic = chroma < 0.03;
+    return Object.fromEntries(GENERATED_SHADES.map(([shade, lightness, saturation]) => [shade, `oklch(${lightness} ${achromatic ? '0' : saturation} ${hue})`]));
+}
+const toPalette = (color) => (typeof color === 'string' ? generatePalette(color) : color);
+export function convertToRgb(color) {
+    const rgb = /^rgb\((\d+),\s*(\d+),\s*(\d+)\)/.exec(color);
+    if (rgb)
+        return [+rgb[1], +rgb[2], +rgb[3]];
+    if (color.startsWith('#')) {
+        const hex = color.length === 4 ? color.replace(/[0-9a-f]/gi, (c) => c + c) : color;
+        return [1, 3, 5].map((i) => parseInt(hex.slice(i, i + 2), 16));
+    }
+    const m = /^oklch\(([\d.]+)\s+([\d.]+)(?:\s+([\d.]+))?\)/.exec(color);
+    if (!m)
+        throw new Error(`Unsupported color: ${color}`);
+    const L = +m[1], C = +m[2], h = ((+m[3] || 0) * Math.PI) / 180;
+    const a = C * Math.cos(h), b = C * Math.sin(h);
+    const l = (L + 0.3963377774 * a + 0.2158037573 * b) ** 3, md = (L - 0.1055613458 * a - 0.0638541728 * b) ** 3, s = (L - 0.0894841775 * a - 1.291485548 * b) ** 3;
+    const lin = [4.0767416621 * l - 3.3077115913 * md + 0.2309699292 * s, -1.2684380046 * l + 2.6097574011 * md - 0.3413193965 * s, -0.0041960863 * l - 0.7034186147 * md + 1.707614701 * s];
+    return lin.map((x) => Math.max(0, Math.min(255, Math.round((x <= 0.0031308 ? 12.92 * x : 1.055 * x ** (1 / 2.4) - 0.055) * 255))));
+}
+/** Contrast ratio with luminance approximated by a 2.2 gamma (intentionally not the exact WCAG formula; shade choices depend on it). */
+export function calculateContrastRatio(c1, c2) {
+    const lum = (c) => { const [r, g, b] = convertToRgb(c); return 0.2126 * (r / 255) ** 2.2 + 0.7152 * (g / 255) ** 2.2 + 0.0722 * (b / 255) ** 2.2; };
+    const a = lum(c1), b = lum(c2);
+    return (Math.max(a, b) + 0.05) / (Math.min(a, b) + 0.05);
+}
+export function isLight(color) {
+    const m = /^oklch\(([\d.]+)/.exec(color);
+    if (!m)
+        throw new Error(`isLight: only oklch colors are supported (${color})`);
+    return +m[1] >= 0.65;
+}
+/** Picks accessible background and text shades for a filled button. */
+export function buttonColorMap(palette, minRatio = WCAG_AA_TEXT) {
+    const light = [{ bg: 600, hover: 500, alternateHover: null }, { bg: 400, hover: 300, alternateHover: 500 }];
+    const dark = [{ bg: 600, hover: 500, alternateHover: 700 }];
+    const shades = Object.keys(palette).map(Number).sort((a, b) => a - b);
+    const textForBg = {};
+    const possibleDark = shades.slice(1);
+    let fallbackOk = true;
+    outer: for (const bg of shades) {
+        while (possibleDark.length) {
+            const t = possibleDark[0];
+            if (t >= 800 && calculateContrastRatio(palette[bg], palette[t]) >= minRatio) {
+                textForBg[bg] = t;
+                continue outer;
+            }
+            possibleDark.shift();
+        }
+        if (fallbackOk && palette[50] !== undefined) {
+            if (calculateContrastRatio(palette[bg], palette[50]) >= minRatio) {
+                textForBg[bg] = 50;
+                continue;
+            }
+            fallbackOk = false;
+        }
+        textForBg[bg] = 0;
+    }
+    const lightness = {};
+    for (const c of [...light, ...dark])
+        for (const s of [c.bg, c.hover, c.alternateHover]) {
+            if (s === null)
+                continue;
+            const t = textForBg[s] ?? 0;
+            lightness[s] = t === 0 || isLight(palette[t] ?? 'oklch(1 0 0)');
+        }
+    const pick = (cands) => {
+        for (const c of cands) {
+            if (!lightness[c.bg])
+                continue;
+            if (lightness[c.hover])
+                return [c.bg, c.hover];
+            if (c.alternateHover !== null && lightness[c.alternateHover])
+                return [c.bg, c.alternateHover];
+        }
+        const f = cands[cands.length - 1];
+        return [f.bg, lightness[f.bg] === lightness[f.hover] ? f.hover : (f.alternateHover ?? f.hover)];
+    };
+    const [bg, hoverBg] = pick(light), [darkBg, darkHoverBg] = pick(dark);
+    return { bg, 'hover:bg': hoverBg, 'dark:bg': darkBg, 'dark:hover:bg': darkHoverBg, text: textForBg[bg] ?? 0, 'hover:text': textForBg[hoverBg] ?? 0, 'dark:text': textForBg[darkBg] ?? 0, 'dark:hover:text': textForBg[darkHoverBg] ?? 0 };
+}
+/** First shade of the palette with enough contrast against a surface. */
+export function findShade(palette, surface, options = {}) {
+    const shades = Object.keys(palette).map(Number).sort((a, b) => (options.fromDarkest ? b - a : a - b));
+    for (const shade of shades) {
+        if (options.maxShade !== undefined && shade > options.maxShade)
+            continue;
+        if (options.minShade !== undefined && shade < options.minShade)
+            continue;
+        if (calculateContrastRatio(surface, palette[shade]) >= (options.minRatio ?? WCAG_AA_TEXT))
+            return shade;
+    }
+    return null;
+}
+/** Color map of badges. */
+export function badgeColorMap(palette, gray) {
+    return { text: findShade(palette, palette[50]) ?? 900, 'dark:text': findShade(palette, gray[600], { maxShade: 500, fromDarkest: true }) ?? 200 };
+}
+/** Color map of dropdown items. */
+export function dropdownItemColorMap(palette, gray) {
+    return {
+        text: findShade(palette, 'oklch(1 0 0)', { minShade: 600 }) ?? 950,
+        'hover:text': findShade(palette, palette[50], { minShade: 600 }) ?? 950,
+        'dark:text': findShade(palette, gray[900], { maxShade: 400, fromDarkest: true }) ?? 200,
+        'dark:hover:text': findShade(palette, palette[950], { maxShade: 400, fromDarkest: true }) ?? 100,
+    };
+}
+/** Color map of icon columns (non-text contrast, 3:1). */
+export function iconColumnColorMap(palette, gray) {
+    return { text: findShade(palette, 'oklch(1 0 0)', { minRatio: 3 }) ?? 900, 'dark:text': findShade(palette, gray[800], { minRatio: 3, maxShade: 600, fromDarkest: true }) ?? 200 };
+}
+/** Color map of icon buttons (non-text contrast 3:1 on gray-50 / gray-700). */
+export function iconButtonColorMap(palette, gray) {
+    const light = findShade(palette, gray[50], { minRatio: 3 });
+    const dark = findShade(palette, gray[700], { minRatio: 3, maxShade: 500, fromDarkest: true });
+    // Above 500 the shade is already dark: hover darkens it instead of lightening it.
+    const [text, hoverText] = light === null ? [900, 800] : light > 500 ? [light, light + 100] : [light + 100, light];
+    return { text, 'hover:text': hoverText, 'dark:text': dark ?? 200, 'dark:hover:text': dark === null ? 100 : dark - 100 };
+}
+/** Color map of toggles (non-text contrast, 3:1). */
+export function toggleColorMap(palette, gray) {
+    return { bg: findShade(palette, gray[50], { minRatio: 3 }) ?? 900, text: findShade(palette, 'oklch(1 0 0)', { minRatio: 3 }) ?? 900, 'dark:bg': findShade(palette, gray[700], { minRatio: 3, fromDarkest: true }) ?? 200 };
+}
+export function linkColorMap(palette, gray) {
+    return { text: findShade(palette, gray[50]) ?? 900, 'dark:text': findShade(palette, gray[700], { maxShade: 400, fromDarkest: true }) ?? 200 };
+}
+/** Outlined button: only the text color depends on the palette. */
+export function outlinedButtonColorMap(palette, gray) {
+    return { text: findShade(palette, gray[50]) ?? 900, 'dark:text': findShade(palette, gray[700], { maxShade: 500, fromDarkest: true }) ?? 200 };
+}
+/** Color map of each colored component. */
+const COMPONENT_COLOR_MAPS = {
+    button: (palette) => buttonColorMap(palette),
+    'button-outlined': outlinedButtonColorMap,
+    badge: badgeColorMap,
+    link: linkColorMap,
+    'dropdown-item': dropdownItemColorMap,
+    'icon-column': iconColumnColorMap,
+    'icon-button': iconButtonColorMap,
+    toggle: toggleColorMap,
+    // Stat description and stat chart (the chart only gets `fi-color`).
+    'stat-description': (palette, gray) => ({ text: findShade(palette, 'oklch(1 0 0)', { minShade: 600 }) ?? 950, 'dark:text': findShade(palette, gray[900], { maxShade: 400, fromDarkest: true }) ?? 200 }),
+    'stat-chart': () => ({}),
+    // Colored text of a column or entry: fixed 500 / 400 for gray, otherwise the same contrast search as stat descriptions.
+    text: (palette, gray) => (palette === gray ? { text: 500, 'dark:text': 400 } : { text: findShade(palette, 'oklch(1 0 0)', { minShade: 600 }) ?? 950, 'dark:text': findShade(palette, gray[900], { maxShade: 400, fromDarkest: true }) ?? 50 }),
+};
+const CLASS_FOR = {
+    bg: (s) => `fi-bg-color-${s}`, 'hover:bg': (s) => `hover:fi-bg-color-${s}`, 'dark:bg': (s) => `dark:fi-bg-color-${s}`, 'dark:hover:bg': (s) => `dark:hover:fi-bg-color-${s}`,
+    text: (s) => `fi-text-color-${s}`, 'hover:text': (s) => `hover:fi-text-color-${s}`, 'dark:text': (s) => `dark:fi-text-color-${s}`, 'dark:hover:text': (s) => `dark:hover:fi-text-color-${s}`,
+};
+/** Registers named palettes and computes the color classes of components. */
+export class ColorManager {
+    static DEFAULT_COLORS = { danger: Color.Red, gray: Color.Zinc, info: Color.Blue, primary: Color.Amber, success: Color.Green, warning: Color.Amber };
+    colors = { ...ColorManager.DEFAULT_COLORS };
+    cache = new Map();
+    /** Per-request colors (theme picked by the user); they take precedence over the panel's colors. */
+    scope = new AsyncLocalStorage();
+    register(colors) { for (const [name, color] of Object.entries(colors))
+        this.colors[name] = toPalette(color); this.cache.clear(); return this; }
+    /** Runs `fn` with colors that only apply to this request; `key` identifies the color set for caching. */
+    runWith(key, colors, fn) {
+        return this.scope.run({ key, colors: Object.fromEntries(Object.entries(colors).map(([name, color]) => [name, toPalette(color)])) }, fn);
+    }
+    getColors() { return { ...this.colors, ...(this.scope.getStore()?.colors ?? {}) }; }
+    getColor(name) { return this.scope.getStore()?.colors[name] ?? this.colors[name]; }
+    /** Color classes of a colored component. */
+    getComponentClasses(component, color) {
+        if (!color)
+            return [];
+        const key = `${this.scope.getStore()?.key ?? ''}:${component}:${color}`;
+        const hit = this.cache.get(key);
+        if (hit)
+            return hit;
+        let classes = [];
+        // Gray is the button's default color and gets no color classes; other components still get them.
+        if (color !== 'gray' || component !== 'button') {
+            classes = ['fi-color', 'fi-color-' + color.replace(/[^a-zA-Z0-9_-]/g, '')];
+            const palette = this.getColor(color);
+            if (palette) {
+                const gray = this.getColor('gray');
+                const map = COMPONENT_COLOR_MAPS[component](palette, gray);
+                classes.push(...Object.entries(map).map(([k, shade]) => CLASS_FOR[k](shade)));
+            }
+        }
+        this.cache.set(key, classes);
+        return classes;
+    }
+    /** `<style>` block defining the `--<color>-<shade>` variables, injected into `<head>`. */
+    renderCssVariables() {
+        const vars = Object.entries(this.getColors()).map(([name, palette]) => Object.entries(palette).map(([shade, value]) => ` --${name}-${shade}:${value}; `).join('')).join('');
+        return `<style>\n    :root {\n        ${vars}}\n</style>`;
+    }
+}
+// ------------------------------------------------------------------ icons
+const iconCache = new Map();
+/** Heroicons icon (`m-eye`, `o-user`, `s-…`, `c-…`) with the `fi-icon fi-size-<size>` classes. */
+export function icon(name, options = {}) {
+    let svg = iconCache.get(name);
+    if (svg === undefined) {
+        const file = here(`../icons/heroicons/${name.replace(/^heroicon-/, '')}.svg`);
+        if (!existsSync(file))
+            throw new Error(`Icon not found: ${name}`);
+        svg = readFileSync(file, 'utf8').trim();
+        iconCache.set(name, svg);
+    }
+    const a = (options.attributes ?? new Attributes()).class(['fi-icon', `fi-size-${options.size ?? 'md'}`]);
+    return svg.replace(/^<svg/, `<svg ${a.toHtml()}`);
+}
+/** Registers a non-Heroicons icon (brand logo, custom glyph): a full `<svg>` supplied by the application, never by end users (it is not sanitized). */
+export function registerIcon(name, svg) {
+    if (!/^<svg[\s>]/.test(svg.trim()))
+        throw new Error(`registerIcon(${name}) expects an <svg> element.`);
+    iconCache.set(name, svg.trim());
+}
+/** Loading spinner SVG. */
+export function loadingIndicator(attributes = new Attributes(), size = 'md') {
+    const a = attributes.class(['fi-icon fi-loading-indicator', `fi-size-${size}`]);
+    return `<svg fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" ${a.toHtml()}><path clip-rule="evenodd" d="M12 19C15.866 19 19 15.866 19 12C19 8.13401 15.866 5 12 5C8.13401 5 5 8.13401 5 12C5 15.866 8.13401 19 12 19ZM12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" fill-rule="evenodd" fill="currentColor" opacity="0.2"></path><path d="M2 12C2 6.47715 6.47715 2 12 2V5C8.13401 5 5 8.13401 5 12H2Z" fill="currentColor"></path></svg>`;
+}
+// ------------------------------------------------------------------ namespaced, overridable EJS views
+/** View registry: `filament-forms::components.text-input` resolves to an EJS file; override directories are checked first. */
+export class ViewRegistry {
+    namespaces = new Map();
+    overrides = [];
+    compiled = new Map();
+    shared = {};
+    namespace(name, dir) { this.namespaces.set(name, dir); return this; }
+    /** Application override directory: `<dir>/<namespace>/<path>.ejs` replaces the package view. */
+    overrideFrom(dir) { this.overrides.unshift(dir); this.compiled.clear(); return this; }
+    share(data) { Object.assign(this.shared, data); return this; }
+    resolve(view) {
+        const [ns, name] = view.split('::');
+        const rel = name.replace(/\./g, '/') + '.ejs';
+        for (const dir of this.overrides) {
+            const f = path.join(dir, ns, rel);
+            if (existsSync(f))
+                return f;
+        }
+        const base = this.namespaces.get(ns);
+        if (!base)
+            throw new Error(`Unknown view namespace: ${ns}`);
+        return path.join(base, rel);
+    }
+    render(view, data = {}) {
+        let fn = this.compiled.get(view);
+        if (!fn) {
+            const file = this.resolve(view);
+            fn = ejs.compile(readFileSync(file, 'utf8'), { filename: file });
+            this.compiled.set(view, fn);
+        }
+        return fn({ e, js, cls, attrs, icon, loadingIndicator, view: (v, d) => this.render(v, d), ...this.shared, ...data });
+    }
+}
+export const views = new ViewRegistry();
+// ------------------------------------------------------------------ global configuration
+const configurators = new Map();
+/** Registers a callback applied to every instance of the class (and its subclasses) created afterwards by `make()`. */
+export function configureUsing(cls, configure) {
+    configurators.set(cls, [...(configurators.get(cls) ?? []), configure]);
+}
+/** Applies the global callbacks to a new instance, from the most general class to the most specific. */
+export function configured(instance) {
+    if (!configurators.size)
+        return instance;
+    const chain = [];
+    for (let cls = instance.constructor; cls && cls !== Object && cls !== Function.prototype; cls = Object.getPrototypeOf(cls))
+        chain.unshift(cls);
+    for (const cls of chain)
+        for (const configure of configurators.get(cls) ?? [])
+            configure(instance);
+    return instance;
+}
+/** Forgets all global callbacks (for tests). */
+export function resetConfigurators() { configurators.clear(); }
+const UNSCOPED = Symbol('unscoped');
+/** Render hook registry. Unscoped hooks render everywhere; scoped hooks only when the call carries one of their scopes. */
+export class RenderHookRegistry {
+    hooks = new Map();
+    register(name, hook, scopes = null) {
+        const byScope = this.hooks.get(name) ?? new Map();
+        this.hooks.set(name, byScope);
+        const list = scopes === null || scopes === undefined ? [UNSCOPED] : Array.isArray(scopes) ? scopes : [scopes];
+        for (const scope of list)
+            byScope.set(scope, [...(byScope.get(scope) ?? []), hook]);
+        return this;
+    }
+    /** Hooks to render for a call: unscoped first, then scope by scope, each hook once. */
+    collect(name, scopes) {
+        const byScope = this.hooks.get(name);
+        if (!byScope)
+            return [];
+        const found = [];
+        for (const scope of [UNSCOPED, ...scopes])
+            for (const hook of byScope.get(scope) ?? [])
+                if (!found.includes(hook))
+                    found.push(hook);
+        return found;
+    }
+    has(name, scopes = null) { return this.collect(name, toScopes(scopes)).length > 0; }
+    render(name, scopes = null, data = {}) {
+        const list = toScopes(scopes);
+        return this.collect(name, list).map((hook) => hook({ scopes: list, data }) ?? '').join('');
+    }
+    clear() { this.hooks.clear(); }
+}
+const toScopes = (scopes) => (scopes === null || scopes === undefined ? [] : Array.isArray(scopes) ? scopes : [scopes]);
+/** Process-wide hooks (all panels). */
+export const renderHooks = new RenderHookRegistry();
+const renderHookScope = new AsyncLocalStorage();
+/** Renders with an extra registry (the request panel's) on top of the process-wide hooks. */
+export function runWithRenderHooks(registry, fn) { return renderHookScope.run(registry, fn); }
+const activeRegistries = () => { const own = renderHookScope.getStore(); return own && own !== renderHooks ? [renderHooks, own] : [renderHooks]; };
+/** Renders a slot: process-wide hooks, then the current panel's hooks. */
+export function renderHook(name, scopes = null, data = {}) {
+    return activeRegistries().map((registry) => registry.render(name, scopes, data)).join('');
+}
+export function hasRenderHook(name, scopes = null) {
+    return activeRegistries().some((registry) => registry.has(name, scopes));
+}
+views.share({ renderHook, hasRenderHook });