@navette-js/support 1.0.0-beta.3 → 1.0.0-beta.5

package/icons/filament/o-table-merge-cells.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" data-slot="icon">
+    <path d="M12 21v-6"/>
+    <path d="M12 9V3"/>
+    <path d="M3 15h18"/>
+    <path d="M3 9h18"/>
+    <rect width="18" height="18" x="3" y="3" rx="2"/>
+</svg>

package/icons/filament/o-table-split-cell.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" data-slot="icon">
+    <path d="M12 15V9"/>
+    <path d="M3 15h18"/>
+    <path d="M3 9h18"/>
+    <rect width="18" height="18" x="3" y="3" rx="2"/>
+</svg>

package/icons/filament/o-table-toggle-header-cell.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" data-slot="icon">
+    <path d="M12 3v17a1 1 0 0 1-1 1H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v6a1 1 0 0 1-1 1H3"/>
+    <path d="m16 19 2 2 4-4"/>
+</svg>

package/icons/filament/o-table-toggle-header-row.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" data-slot="icon">
+    <rect width="18" height="18" x="3" y="3" rx="2"/>
+    <path d="M14 9h1"/>
+    <path d="M19 9h2"/>
+    <path d="M3 9h2"/>
+    <path d="M9 9h1"/>
+</svg>

package/icons/filament/o-table.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" data-slot="icon">
+    <path d="M3 5a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v14a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-14z"/>
+    <path d="M3 10h18"/>
+    <path d="M10 3v18"/>
+</svg>

package/lib/components.d.ts

@@ -0,0 +1,6 @@
+/** Rewrites component tags to EJS. Templates without `<x-` are returned unchanged. */
+export declare function compileComponentTags(source: string, file?: string): string;
+/** Attribute names that go to the component's attribute bag instead of its props (HTML, Alpine and Livewire attributes). */
+export declare const isHtmlAttribute: (name: string) => boolean;
+/** `icon-position` → `iconPosition`. */
+export declare const camel: (name: string) => string;

package/lib/components.js

@@ -0,0 +1,130 @@
+// Component tags in EJS views: `<x-name …>…</x-name>`, `<x-name … />` and named slots (`<x-slot name="footer">` or `<x-slot:footer>`),
+// compiled to plain EJS before the template itself is compiled.
+//
+// A component's content is captured from the template's output buffer (`__output`, EJS's own variable): the
+// generated code remembers where the content starts, cuts it out once it is rendered, and passes it as the slot.
+const NAME = /^[A-Za-z0-9_.:-]+/;
+/** Escapes a string for a JavaScript string literal placed inside an EJS tag. */
+const literal = (value) => JSON.stringify(value).replace(/%>/g, '%\\x3e');
+function parseAttributes(source, tag) {
+    const attributes = [];
+    let rest = source.trim();
+    while (rest) {
+        const match = /^(:?)([A-Za-z_@][\w.:@-]*)(?:\s*=\s*("([^"]*)"|'([^']*)'))?/.exec(rest);
+        if (!match)
+            throw new Error(`Invalid attribute in <x-${tag}>: ${rest.slice(0, 40)}`);
+        const [whole, bound, name, quoted, double, single] = match;
+        const value = double ?? single ?? '';
+        attributes.push({ name, value, kind: bound ? 'expression' : quoted === undefined ? 'flag' : 'string' });
+        rest = rest.slice(whole.length).trim();
+    }
+    return attributes;
+}
+/** JavaScript object literal of a tag's attributes, evaluated in the template's scope. */
+function propsExpression(attributes) {
+    return `{ ${attributes.map((attribute) => `${literal(attribute.name)}: ${attribute.kind === 'expression' ? `(${attribute.value})` : attribute.kind === 'flag' ? 'true' : literal(attribute.value)}`).join(', ')} }`;
+}
+/** Finds the `>` that ends a tag, skipping quoted attribute values. */
+function tagEnd(source, from) {
+    let quote = null;
+    for (let index = from; index < source.length; index++) {
+        const char = source[index];
+        if (quote) {
+            if (char === quote)
+                quote = null;
+        }
+        else if (char === '"' || char === "'")
+            quote = char;
+        else if (char === '>')
+            return index;
+    }
+    return -1;
+}
+/** Rewrites component tags to EJS. Templates without `<x-` are returned unchanged. */
+export function compileComponentTags(source, file = 'template') {
+    if (!source.includes('<x-'))
+        return source;
+    let out = '<% var __xs = [], __xn = []; %>';
+    const open = [];
+    let index = 0;
+    const capture = '<% __xs.push(__output.length); %>';
+    const cut = 'const __s = __output.slice(__xs.pop()); __output = __output.slice(0, __output.length - __s.length);';
+    while (index < source.length) {
+        const next = source.indexOf('<', index);
+        if (next === -1) {
+            out += source.slice(index);
+            break;
+        }
+        out += source.slice(index, next);
+        // EJS tags (code, output, comments) are copied as they are: a tag quoted in a comment is not a component.
+        if (source.startsWith('<%', next)) {
+            const ejsEnd = source.indexOf('%>', next + 2);
+            if (ejsEnd === -1) {
+                out += source.slice(next);
+                break;
+            }
+            out += source.slice(next, ejsEnd + 2);
+            index = ejsEnd + 2;
+            continue;
+        }
+        const closing = source.startsWith('</x-', next);
+        if (!closing && !source.startsWith('<x-', next)) {
+            out += '<';
+            index = next + 1;
+            continue;
+        }
+        const nameStart = next + (closing ? 4 : 3);
+        const name = NAME.exec(source.slice(nameStart))?.[0];
+        if (!name) {
+            out += '<';
+            index = next + 1;
+            continue;
+        }
+        const end = tagEnd(source, nameStart + name.length);
+        if (end === -1)
+            throw new Error(`${file}: unclosed tag <x-${name}`);
+        const body = source.slice(nameStart + name.length, end);
+        index = end + 1;
+        if (closing) {
+            const current = open.pop();
+            const closesSlot = name === 'slot' && current?.name.startsWith('slot');
+            if (!current || (current.name !== name && !closesSlot))
+                throw new Error(`${file}: </x-${name}> does not close ${current ? `<x-${current.name}>` : 'any tag'}`);
+            if (name === 'slot' || name.startsWith('slot:'))
+                out += `<% { ${cut} __xn[__xn.length - 1][${current.props}] = __s; } %>`;
+            else
+                out += `<% { ${cut} const __n = __xn.pop(); %><%- __component(${literal(name)}, ${current.props}, __s, __n) %><% } %>`;
+            continue;
+        }
+        const selfClosing = body.trimEnd().endsWith('/');
+        const attributes = parseAttributes(selfClosing ? body.trimEnd().slice(0, -1) : body, name);
+        if (name === 'slot' || name.startsWith('slot:')) {
+            const slotName = name.startsWith('slot:') ? name.slice(5) : attributes.find((attribute) => attribute.name === 'name')?.value;
+            if (!slotName)
+                throw new Error(`${file}: <x-slot> needs a name`);
+            if (!open.length)
+                throw new Error(`${file}: <x-slot name="${slotName}"> must be inside a component`);
+            if (selfClosing) {
+                out += `<% __xn[__xn.length - 1][${literal(slotName)}] = ''; %>`;
+                continue;
+            }
+            open.push({ name, props: literal(slotName) });
+            out += capture;
+            continue;
+        }
+        const props = propsExpression(attributes);
+        if (selfClosing) {
+            out += `<%- __component(${literal(name)}, ${props}, '', {}) %>`;
+            continue;
+        }
+        open.push({ name, props });
+        out += `<% __xn.push({}); %>${capture}`;
+    }
+    if (open.length)
+        throw new Error(`${file}: <x-${open[open.length - 1].name}> is never closed`);
+    return out;
+}
+/** Attribute names that go to the component's attribute bag instead of its props (HTML, Alpine and Livewire attributes). */
+export const isHtmlAttribute = (name) => /^(class|style|id)$/.test(name) || /^(x-|data-|aria-|wire:|@)/.test(name) || name.includes(':');
+/** `icon-position` → `iconPosition`. */
+export const camel = (name) => name.replace(/-([a-z0-9])/g, (_match, char) => char.toUpperCase());

package/lib/html.d.ts

@@ -0,0 +1,12 @@
+/** Link targets: http(s), mailto, site paths, anchors and relative paths; never `javascript:`, `data:` or another scheme. */
+export declare function isSafeUrl(value: string): boolean;
+/**
+ * Removes everything but a small set of formatting elements (paragraphs, emphasis, lists, links, headings, code...) and
+ * their safe attributes. No `style`, `class`, event handler, image or form survives, and links only keep safe URLs.
+ */
+export declare function sanitizeHtml(html: string): string;
+/**
+ * Renders Markdown (paragraphs, headings, lists, quotes, code blocks, emphasis, links). Raw HTML is never passed through:
+ * it is shown as text. Links only keep safe URLs.
+ */
+export declare function markdownToHtml(markdown: string): string;

package/lib/html.js

@@ -0,0 +1,180 @@
+// HTML from application data: an allowlist sanitizer, and a small Markdown renderer whose output is safe by construction.
+/** Allowed elements and, for each one, its allowed attributes. Everything else is removed (the text inside is kept). */
+const ALLOWED = {
+    a: ['href', 'title'], abbr: ['title'], b: [], blockquote: [], br: [], code: [], del: [], div: [], em: [], h1: [], h2: [], h3: [], h4: [], h5: [], h6: [],
+    hr: [], i: [], kbd: [], li: [], mark: [], ol: ['start'], p: [], pre: [], s: [], small: [], span: [], strong: [], sub: [], sup: [], u: [], ul: [],
+};
+const VOID = new Set(['br', 'hr']);
+/** Elements removed together with their content. */
+const DROPPED = new Set(['script', 'style', 'iframe', 'object', 'embed', 'template', 'textarea', 'title', 'noscript', 'svg', 'math', 'select', 'head', 'frame', 'frameset', 'applet', 'noembed', 'xmp', 'plaintext']);
+const escapeAttribute = (value) => value.replace(/&/g, '&amp;').replace(/"/g, '&quot;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+/** Text between tags: entities are kept, anything else that could start markup is escaped. */
+const escapeText = (text) => text.replace(/&(?!(?:#\d{1,7}|#x[0-9a-fA-F]{1,6}|[a-zA-Z][a-zA-Z0-9]{1,31});)/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+const decodeEntities = (value) => value
+    .replace(/&#x([0-9a-f]+);?/gi, (_, hex) => String.fromCodePoint(Math.min(Number.parseInt(hex, 16), 0x10ffff)))
+    .replace(/&#(\d+);?/g, (_, dec) => String.fromCodePoint(Math.min(Number(dec), 0x10ffff)))
+    .replace(/&colon;/gi, ':').replace(/&tab;/gi, '\t').replace(/&newline;/gi, '\n').replace(/&amp;/gi, '&');
+/** Link targets: http(s), mailto, site paths, anchors and relative paths; never `javascript:`, `data:` or another scheme. */
+export function isSafeUrl(value) {
+    const url = decodeEntities(value).replace(/[\u0000- \u007f-\u009f]/g, '');
+    if (/^(https?:|mailto:)/i.test(url))
+        return true;
+    if (url.startsWith('//'))
+        return false;
+    // No scheme at all: a colon may only appear after a `/`, `?` or `#`.
+    return !/^[^/?#]*:/.test(url);
+}
+/**
+ * Removes everything but a small set of formatting elements (paragraphs, emphasis, lists, links, headings, code...) and
+ * their safe attributes. No `style`, `class`, event handler, image or form survives, and links only keep safe URLs.
+ */
+export function sanitizeHtml(html) {
+    const out = [];
+    const open = [];
+    const source = String(html ?? '');
+    let position = 0;
+    while (position < source.length) {
+        const next = source.indexOf('<', position);
+        if (next < 0) {
+            out.push(escapeText(source.slice(position)));
+            break;
+        }
+        out.push(escapeText(source.slice(position, next)));
+        position = next;
+        const rest = source.slice(position);
+        if (rest.startsWith('<!--')) {
+            const end = source.indexOf('-->', position + 4);
+            position = end < 0 ? source.length : end + 3;
+            continue;
+        }
+        const tag = /^<(\/?)([a-zA-Z][a-zA-Z0-9]*)((?:[^<>"']|"[^"]*"|'[^']*')*)>/.exec(rest);
+        if (!tag) {
+            out.push('&lt;');
+            position++;
+            continue;
+        }
+        position += tag[0].length;
+        const [, closing, rawName, rawAttributes] = tag;
+        const name = rawName.toLowerCase();
+        if (DROPPED.has(name)) {
+            if (!closing) {
+                const end = source.toLowerCase().indexOf(`</${name}`, position);
+                position = end < 0 ? source.length : (source.indexOf('>', end) < 0 ? source.length : source.indexOf('>', end) + 1);
+            }
+            continue;
+        }
+        if (!Object.hasOwn(ALLOWED, name))
+            continue;
+        if (closing) {
+            const index = open.lastIndexOf(name);
+            if (index >= 0)
+                while (open.length > index)
+                    out.push(`</${open.pop()}>`);
+            continue;
+        }
+        const attributes = [];
+        for (const match of rawAttributes.matchAll(/([^\s"'<>\/=]+)(?:\s*=\s*(?:"([^"]*)"|'([^']*)'|([^\s"'<>]+)))?/g)) {
+            const attribute = match[1].toLowerCase();
+            const value = match[2] ?? match[3] ?? match[4] ?? '';
+            if (!ALLOWED[name].includes(attribute) || attributes.some((existing) => existing.startsWith(`${attribute}=`)))
+                continue;
+            if (attribute === 'href' && !isSafeUrl(value))
+                continue;
+            if (attribute === 'start' && !/^\d{1,9}$/.test(value))
+                continue;
+            attributes.push(`${attribute}="${escapeAttribute(decodeEntities(value))}"`);
+        }
+        if (name === 'a' && attributes.some((attribute) => attribute.startsWith('href=')))
+            attributes.push('rel="noopener noreferrer nofollow"');
+        out.push(`<${name}${attributes.length ? ` ${attributes.join(' ')}` : ''}>`);
+        if (!VOID.has(name))
+            open.push(name);
+    }
+    while (open.length)
+        out.push(`</${open.pop()}>`);
+    return out.join('');
+}
+// ------------------------------------------------------------------ Markdown
+const escapeHtml = (value) => value.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+/** Inline Markdown: code spans, links, bold, italic, strikethrough and hard line breaks. The text is escaped first. */
+function inlineMarkdown(source) {
+    const codes = [];
+    let text = source.replace(/`([^`]+)`/g, (_, code) => `\u0000${codes.push(`<code>${escapeHtml(code)}</code>`) - 1}\u0000`);
+    text = escapeHtml(text);
+    text = text.replace(/\[([^\]]+)\]\(([^)\s]+)(?:\s+&quot;([^&]*)&quot;)?\)/g, (_, label, href, title) => {
+        const url = href.replace(/&amp;/g, '&');
+        if (!isSafeUrl(url))
+            return label;
+        return `<a href="${escapeHtml(url)}"${title ? ` title="${title}"` : ''} rel="noopener noreferrer nofollow">${label}</a>`;
+    });
+    // Bare URLs become links; they stop before an escaped quote or angle bracket.
+    text = text.replace(/(^|[\s(])(https?:\/\/(?:(?!&quot;|&lt;|&gt;)[^\s<])*(?:(?!&quot;|&lt;|&gt;)[^\s<.,;:!?)]))/g, (_, before, url) => `${before}<a href="${url}" rel="noopener noreferrer nofollow">${url}</a>`);
+    text = text.replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>').replace(/__([^_]+)__/g, '<strong>$1</strong>')
+        .replace(/(^|[^\w*])\*([^*\s][^*]*)\*/g, '$1<em>$2</em>').replace(/(^|[^\w])_([^_\s][^_]*)_(?=[^\w]|$)/g, '$1<em>$2</em>')
+        .replace(/~~([^~]+)~~/g, '<del>$1</del>').replace(/(?: {2,}|\\)\n/g, '<br>\n');
+    return text.replace(/\u0000(\d+)\u0000/g, (_, index) => codes[Number(index)]);
+}
+/**
+ * Renders Markdown (paragraphs, headings, lists, quotes, code blocks, emphasis, links). Raw HTML is never passed through:
+ * it is shown as text. Links only keep safe URLs.
+ */
+export function markdownToHtml(markdown) {
+    const lines = String(markdown ?? '').replace(/\r\n?/g, '\n').split('\n');
+    const out = [];
+    let index = 0;
+    const isBlockStart = (line) => /^(#{1,6}\s|>\s?|```|\s*([-*+]|\d{1,9}[.)])\s+|\s*([-*_])(\s*\3){2,}\s*$)/.test(line);
+    while (index < lines.length) {
+        const line = lines[index];
+        if (line.trim() === '') {
+            index++;
+            continue;
+        }
+        if (line.startsWith('```')) {
+            const code = [];
+            index++;
+            while (index < lines.length && !lines[index].startsWith('```'))
+                code.push(lines[index++]);
+            index++;
+            out.push(`<pre><code>${escapeHtml(code.join('\n'))}</code></pre>`);
+            continue;
+        }
+        const heading = /^(#{1,6})\s+(.*?)\s*#*\s*$/.exec(line);
+        if (heading) {
+            out.push(`<h${heading[1].length}>${inlineMarkdown(heading[2])}</h${heading[1].length}>`);
+            index++;
+            continue;
+        }
+        if (/^\s*([-*_])(\s*\1){2,}\s*$/.test(line)) {
+            out.push('<hr>');
+            index++;
+            continue;
+        }
+        if (/^>\s?/.test(line)) {
+            const quote = [];
+            while (index < lines.length && /^>\s?/.test(lines[index]))
+                quote.push(lines[index++].replace(/^>\s?/, ''));
+            out.push(`<blockquote>${markdownToHtml(quote.join('\n'))}</blockquote>`);
+            continue;
+        }
+        const listItem = /^\s*([-*+]|(\d{1,9})[.)])\s+(.*)$/.exec(line);
+        if (listItem) {
+            const ordered = listItem[2] !== undefined;
+            const items = [];
+            while (index < lines.length) {
+                const match = /^\s*([-*+]|(\d{1,9})[.)])\s+(.*)$/.exec(lines[index]);
+                if (!match || (match[2] !== undefined) !== ordered)
+                    break;
+                items.push(`<li>${inlineMarkdown(match[3])}</li>`);
+                index++;
+            }
+            const start = ordered && listItem[2] !== '1' ? ` start="${Number(listItem[2])}"` : '';
+            out.push(ordered ? `<ol${start}>${items.join('')}</ol>` : `<ul>${items.join('')}</ul>`);
+            continue;
+        }
+        const paragraph = [];
+        while (index < lines.length && lines[index].trim() !== '' && (paragraph.length === 0 || !isBlockStart(lines[index])))
+            paragraph.push(lines[index++]);
+        out.push(`<p>${inlineMarkdown(paragraph.join('\n'))}</p>`);
+    }
+    return out.join('');
+}

package/lib/index.d.ts

@@ -119,18 +119,42 @@ export declare function icon(name: string, options?: {
 export declare function registerIcon(name: string, svg: string): void;
 /** Loading spinner SVG. */
 export declare function loadingIndicator(attributes?: Attributes, size?: string): string;
-/** View registry: `filament-forms::components.text-input` resolves to an EJS file; override directories are checked first. */
+/** Renders a component from its props (camelCased, named slots included), its attribute bag and its default slot (HTML). */
+export type ComponentRenderer = (props: Record<string, any> & {
+    attributes: Record<string, any>;
+}, slot: string) => string;
+/**
+ * View registry: `filament-forms::components.text-input` resolves to an EJS file; override directories are checked first.
+ * Views may use component tags (`<x-section heading="Orders">…</x-section>`): built-in components, components registered with
+ * `component()`, and EJS files of the directories given to `components()`.
+ */
 export declare class ViewRegistry {
     private namespaces;
     private overrides;
     private compiled;
     private shared;
+    private componentRenderers;
+    private componentDirectories;
+    /** Registers a component rendered by a function: `<x-name>` in any view. Registering an existing name replaces it. */
+    component(name: string, renderer: ComponentRenderer): this;
+    /**
+     * Directory of EJS components: `<x-card>` renders `<dir>/card.ejs`, `<x-forms.field>` renders `<dir>/forms/field.ejs`.
+     * The view receives its props, `slot` (the content, already rendered), `slots` (named slots) and `attributes` (HTML attributes).
+     * Directories registered later win, and files win over components registered with `component()`.
+     */
+    components(directory: string | URL): this;
+    hasComponent(name: string): boolean;
+    private componentFile;
+    /** Renders a component tag. HTML, Alpine and Livewire attributes go to the attribute bag; the others become camelCased props. */
+    renderComponent(name: string, raw: Record<string, unknown>, slot?: string, slots?: Record<string, string>): string;
     namespace(name: string, dir: string): this;
     /** Application override directory: `<dir>/<namespace>/<path>.ejs` replaces the package view. */
     overrideFrom(dir: string): this;
     share(data: Record<string, unknown>): this;
     resolve(view: string): string;
     render(view: string, data?: Record<string, unknown>): string;
+    /** Renders an EJS file directly (component files, page views given by path). */
+    renderFile(file: string, data?: Record<string, unknown>, cacheKey?: string): string;
 }
 export declare const views: ViewRegistry;
 /** Registers a callback applied to every instance of the class (and its subclasses) created afterwards by `make()`. */
@@ -162,4 +186,4 @@ export declare function runWithRenderHooks<T>(registry: RenderHookRegistry, fn:
 /** Renders a slot: process-wide hooks, then the current panel's hooks. */
 export declare function renderHook(name: string, scopes?: unknown | unknown[] | null, data?: Record<string, any>): string;
 export declare function hasRenderHook(name: string, scopes?: unknown | unknown[] | null): boolean;
-export {};
+export { isSafeUrl, markdownToHtml, sanitizeHtml } from './html.ts';

package/lib/index.js

@@ -1,4 +1,5 @@
 import { AsyncLocalStorage } from 'node:async_hooks';
+import { camel, compileComponentTags, isHtmlAttribute } from "./components.js";
 // @navette-js/support — shared building blocks: escaping, attribute bags, JS serialization, lazy evaluation, colors, icons,
 // namespaced EJS views.
 import ejs from 'ejs';
@@ -391,7 +392,8 @@ const iconCache = new Map();
 export function icon(name, options = {}) {
     let svg = iconCache.get(name);
     if (svg === undefined) {
-        const file = here(`../icons/heroicons/${name.replace(/^heroicon-/, '')}.svg`);
+        // `fi-o-crop`: Filament's own icons (MIT), shipped next to Heroicons.
+        const file = name.startsWith('fi-') ? here(`../icons/filament/${name.slice(3).replace(/[^a-z0-9-]/g, '')}.svg`) : here(`../icons/heroicons/${name.replace(/^heroicon-/, '').replace(/[^a-z0-9-]/g, '')}.svg`);
         if (!existsSync(file))
             throw new Error(`Icon not found: ${name}`);
         svg = readFileSync(file, 'utf8').trim();
@@ -411,13 +413,68 @@ 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. */
+/**
+ * View registry: `filament-forms::components.text-input` resolves to an EJS file; override directories are checked first.
+ * Views may use component tags (`<x-section heading="Orders">…</x-section>`): built-in components, components registered with
+ * `component()`, and EJS files of the directories given to `components()`.
+ */
 export class ViewRegistry {
     namespaces = new Map();
     overrides = [];
     compiled = new Map();
     shared = {};
+    componentRenderers = new Map();
+    componentDirectories = [];
+    /** Registers a component rendered by a function: `<x-name>` in any view. Registering an existing name replaces it. */
+    component(name, renderer) {
+        if (!/^[A-Za-z0-9_.-]+$/.test(name))
+            throw new Error(`Invalid component name: ${name}`);
+        this.componentRenderers.set(name, renderer);
+        return this;
+    }
+    /**
+     * Directory of EJS components: `<x-card>` renders `<dir>/card.ejs`, `<x-forms.field>` renders `<dir>/forms/field.ejs`.
+     * The view receives its props, `slot` (the content, already rendered), `slots` (named slots) and `attributes` (HTML attributes).
+     * Directories registered later win, and files win over components registered with `component()`.
+     */
+    components(directory) {
+        this.componentDirectories.unshift(directory instanceof URL ? fileURLToPath(directory) : directory);
+        return this;
+    }
+    hasComponent(name) { return this.componentRenderers.has(name) || this.componentFile(name) !== null; }
+    componentFile(name) {
+        if (!/^[A-Za-z0-9_-]+(\.[A-Za-z0-9_-]+)*$/.test(name))
+            return null;
+        for (const dir of this.componentDirectories) {
+            const file = path.join(dir, ...name.split('.')) + '.ejs';
+            if (existsSync(file))
+                return file;
+        }
+        return null;
+    }
+    /** Renders a component tag. HTML, Alpine and Livewire attributes go to the attribute bag; the others become camelCased props. */
+    renderComponent(name, raw, slot = '', slots = {}) {
+        const props = {};
+        const attributes = {};
+        for (const [key, value] of Object.entries(raw)) {
+            if (isHtmlAttribute(key))
+                attributes[key] = value;
+            else
+                props[camel(key)] = value;
+        }
+        // A slot made of whitespace only (line breaks around named slots) counts as empty.
+        for (const [key, value] of Object.entries(slots))
+            props[camel(key)] = value.trim() === '' ? '' : value;
+        if (slot.trim() === '')
+            slot = '';
+        const file = this.componentFile(name);
+        if (file)
+            return this.renderFile(file, { ...props, slot, slots, attributes: new Attributes(attributes) });
+        const renderer = this.componentRenderers.get(name);
+        if (!renderer)
+            throw new Error(`Unknown component <x-${name}>: register it with views.component() or views.components(directory).`);
+        return renderer({ ...props, attributes }, slot);
+    }
     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; }
@@ -435,14 +492,15 @@ export class ViewRegistry {
             throw new Error(`Unknown view namespace: ${ns}`);
         return path.join(base, rel);
     }
-    render(view, data = {}) {
-        let fn = this.compiled.get(view);
+    render(view, data = {}) { return this.renderFile(this.resolve(view), data, view); }
+    /** Renders an EJS file directly (component files, page views given by path). */
+    renderFile(file, data = {}, cacheKey = file) {
+        let fn = this.compiled.get(cacheKey);
         if (!fn) {
-            const file = this.resolve(view);
-            fn = ejs.compile(readFileSync(file, 'utf8'), { filename: file });
-            this.compiled.set(view, fn);
+            fn = ejs.compile(compileComponentTags(readFileSync(file, 'utf8'), file), { filename: file });
+            this.compiled.set(cacheKey, fn);
         }
-        return fn({ e, js, cls, attrs, icon, loadingIndicator, view: (v, d) => this.render(v, d), ...this.shared, ...data });
+        return fn({ e, js, cls, attrs, icon, loadingIndicator, view: (v, d) => this.render(v, d), __component: (name, props, slot, slots) => this.renderComponent(name, props, slot, slots), ...this.shared, ...data });
     }
 }
 export const views = new ViewRegistry();
@@ -512,3 +570,4 @@ export function hasRenderHook(name, scopes = null) {
     return activeRegistries().some((registry) => registry.has(name, scopes));
 }
 views.share({ renderHook, hasRenderHook });
+export { isSafeUrl, markdownToHtml, sanitizeHtml } from "./html.js";

package/lib/ui.d.ts

@@ -196,6 +196,8 @@ export type DropdownItem = {
     href?: string | null;
     disabled?: boolean;
     attributes?: Attrs;
+    /** Label as HTML already escaped (the content of a `<x-dropdown-item>` tag), used instead of `label`. */
+    labelHtml?: string | null;
 };
 /** Dropdown menu item. */
 export declare function dropdownItem(item: DropdownItem): string;

package/lib/ui.js

@@ -211,7 +211,7 @@ export function dropdownItem(item) {
     const iconColor = item.iconColor ?? (color !== 'gray' ? color : null);
     const lead = item.icon ? icon(item.icon, { attributes: new Attributes().class(colorMark(iconColor)) }) : item.image ? `<div class="fi-dropdown-list-item-image" style="background-image: url('${e(item.image)}')"></div>` : '';
     const badgeHtml = item.badge !== null && item.badge !== undefined ? `<span class="${cls([...colorsOf('badge', item.badgeColor ?? 'primary'), 'fi-badge'])}">${e(String(item.badge))}</span>` : '';
-    return `<${tag} ${attributes.toHtml()}>${lead}<span class="fi-dropdown-list-item-label">${e(item.label)}</span>${badgeHtml}</${tag}>`;
+    return `<${tag} ${attributes.toHtml()}>${lead}<span class="fi-dropdown-list-item-label">${item.labelHtml ?? e(item.label)}</span>${badgeHtml}</${tag}>`;
 }
 /** List of dropdown menu items. */
 export function dropdownList(items) { return `<div class="fi-dropdown-list">${items.map(dropdownItem).join('')}</div>`; }
@@ -250,5 +250,36 @@ export function modal(props, slot = '') {
         .class(['fi-modal', { 'fi-absolute-positioning-context': !props.slideOver, 'fi-modal-slide-over': props.slideOver === true, 'fi-modal-has-sticky-header': props.stickyHeader === true, 'fi-modal-has-sticky-footer': props.stickyFooter === true }]);
     return `<div ${outer.toHtml()}><div aria-hidden="true" x-show="isOpen" x-transition.duration.300ms.opacity class="fi-modal-close-overlay"></div><div${trapOnWindow ? '' : ' tabindex="-1"'}${closeByClickingAway ? ` x-on:click.self="${e(close)}"` : ''}${trapOnWindow ? '' : ' x-trap.noreturn="isTrapActive"'} class="${cls(['fi-modal-window-ctn', { 'fi-clickable': closeByClickingAway }])}"><div${closeByEscaping ? ` x-on:keydown.window.escape="if (isTopmost()) ${e(close)}"` : ''} x-show="isWindowVisible" x-transition:enter="fi-transition-enter" x-transition:leave="fi-transition-leave" x-transition:enter-start="fi-transition-enter-start" x-transition:enter-end="fi-transition-enter-end" x-transition:leave-start="fi-transition-leave-start" x-transition:leave-end="fi-transition-leave-end" wire:key="${e(key('window'))}"${trapOnWindow ? ' x-trap.noreturn="isTrapActive" tabindex="0"' : ''} class="${windowClasses}">${header}${content}${footer}</div></div></div>`;
 }
+// ------------------------------------------------------------------ component tags
+// Built-in components for EJS views: `<x-button color="danger">Delete</x-button>`, `<x-section heading="Orders">…</x-section>`.
+// The default slot is HTML already rendered by the template; props from `name="text"` are plain strings and are escaped by the components.
+const withSlot = (render) => (props, slot) => render(props, slot);
+views
+    .component('avatar', (props) => avatar(props))
+    // A badge rendered as a link takes its `href` from the tag.
+    .component('badge', (props, slot) => badge({ ...props, attributes: { ...props.attributes, href: props.href ?? props.attributes?.href } }, slot))
+    .component('breadcrumbs', (props) => breadcrumbs(props.items ?? [], props.label))
+    .component('button', withSlot(button))
+    .component('callout', (props, slot) => callout({ ...props, footer: props.footer ?? (slot || null) }))
+    // Every prop other than `checked` and `valid` is an attribute of the input (`name`, `value`, `disabled`…).
+    .component('checkbox', ({ checked, valid, attributes, ...rest }) => checkbox({ checked, valid, attributes: { ...rest, ...attributes } }))
+    .component('dropdown', withSlot(dropdown))
+    .component('dropdown-list', (props, slot) => (props.items ? dropdownList(props.items) : `<div class="fi-dropdown-list">${slot}</div>`))
+    .component('dropdown-item', (props, slot) => dropdownItem({ ...props, label: props.label ?? '', labelHtml: props.label === undefined ? slot.trim() : null }))
+    .component('empty-state', (props, slot) => emptyState({ ...props, footer: props.footer ?? (slot || null) }))
+    .component('fieldset', withSlot(fieldset))
+    .component('icon', (props) => icon(props.name ?? props.icon, { size: props.size, attributes: new Attributes(props.attributes) }))
+    .component('icon-button', (props) => iconButton(props))
+    .component('input', (props) => input({ ...props.attributes, ...Object.fromEntries(Object.entries(props).filter(([key]) => key !== 'attributes')) }))
+    .component('input-wrapper', withSlot(inputWrapper))
+    .component('link', withSlot(link))
+    .component('loading-indicator', (props) => loadingIndicator(new Attributes(props.attributes), props.size))
+    // `id` is an HTML attribute name, so it lands in the attribute bag: these two components need it as a prop.
+    .component('modal', (props, slot) => modal({ ...props, id: props.id ?? props.attributes?.id }, slot))
+    .component('pagination', (props) => pagination({ ...props, id: props.id ?? props.attributes?.id }))
+    .component('section', withSlot(section))
+    .component('select', (props, slot) => select({ ...props.attributes, ...Object.fromEntries(Object.entries(props).filter(([key]) => key !== 'attributes')) }, slot))
+    .component('spinner', (props) => spinner(props.attributes))
+    .component('tabs', (props) => tabs(props, props.items ?? []));
 export const ui = { avatar, badge, breadcrumbs, button, callout, checkbox, dropdown, dropdownItem, dropdownList, emptyState, fieldset, iconButton, input, inputWrapper, link, modal, pagination, section, select, spinner, tabs };
 export { cls, e, js, loadingIndicator };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navette-js/support",
-  "version": "1.0.0-beta.3",
+  "version": "1.0.0-beta.5",
   "description": "Shared utilities, colors, icons, views and translations for Navette.",
   "license": "MIT",
   "type": "module",