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

package/THIRD-PARTY-NOTICES.md

@@ -4,7 +4,7 @@ Navette is an independent project, not affiliated with or endorsed by the Filame
 
 | Work | Used for | License | License file |
 |---|---|---|---|
-| [Filament](https://github.com/filamentphp/filament) © Filament | HTML markup derived from its Blade views, compiled CSS and JavaScript (`@navette-js/panels/dist/filament`), English translations (`@navette-js/support/data`) | MIT | `packages/panels/dist/FILAMENT-LICENSE.md` |
+| [Filament](https://github.com/filamentphp/filament) © Filament | HTML markup derived from its Blade views, compiled CSS and JavaScript (`@navette-js/panels/dist/filament`), English translations (`@navette-js/support/data`), image editor icons (`@navette-js/support/icons/filament`) | MIT | `packages/panels/dist/FILAMENT-LICENSE.md`, `packages/support/icons/filament/LICENSE.md` |
 | [Livewire](https://github.com/livewire/livewire) © Caleb Porzio | Client script `livewire.js` (`@navette-js/wire/vendor`); the server runtime follows its protocol | MIT | `packages/wire/vendor/LIVEWIRE-LICENSE.md` |
 | [Heroicons](https://github.com/tailwindlabs/heroicons) | SVG icons (`@navette-js/support/icons`) | MIT | `packages/support/icons/HEROICONS-LICENSE.md` |
 | [Inter](https://github.com/rsms/inter) © The Inter Project Authors | Default font files (`@navette-js/panels/dist/filament/fonts`) | SIL Open Font License 1.1 | `packages/panels/dist/filament/fonts/INTER-LICENSE.txt` |

package/icons/filament/LICENSE.md

@@ -0,0 +1,21 @@
+# MIT License
+
+Copyright (c) Filament
+
+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/icons/filament/o-arrows-move.svg

@@ -0,0 +1,11 @@
+<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 stroke="none" d="M0 0h24v24H0z" fill="none"/>
+    <path d="M18 9l3 3l-3 3" />
+    <path d="M15 12h6" />
+    <path d="M6 9l-3 3l3 3" />
+    <path d="M3 12h6" />
+    <path d="M9 18l3 3l3 -3" />
+    <path d="M12 15v6" />
+    <path d="M15 6l-3 -3l-3 3" />
+    <path d="M12 3v6" />
+</svg>

package/icons/filament/o-crop.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 stroke="none" d="M0 0h24v24H0z" fill="none"/>
+    <path d="M8 5v10a1 1 0 0 0 1 1h10" />
+    <path d="M5 8h10a1 1 0 0 1 1 1v10" />
+</svg>

package/icons/filament/o-flip-horizontal.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon">
+    <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m3 7l5 5l-5 5V7m18 0l-5 5l5 5V7m-9 13v2m0-8v2m0-8v2m0-8v2"/>
+</svg>

package/icons/filament/o-flip-vertical.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon">
+    <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m17 3l-5 5l-5-5h10m0 18l-5-5l-5 5h10M4 12H2m8 0H8m8 0h-2m8 0h-2"/>
+</svg>

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

@@ -162,4 +162,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

@@ -391,7 +391,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();
@@ -512,3 +513,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/package.json

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