@joewinke/jatui 0.17.0 → 0.17.1

package/dist/components/ChipInput.svelte

@@ -26,7 +26,7 @@
 		displayText: string;
 		/** Data attributes to set on the chip element */
 		dataAttrs: Record<string, string>;
-		/** Optional HTML content (overrides displayText) */
+		/** Optional HTML content (overrides displayText). TRUSTED markup, rendered unescaped — never pass user-authored data. */
 		html?: string;
 		/** If true, insert as plain text instead of a chip element */
 		insertAsText?: boolean;

package/dist/components/ChipInput.svelte.d.ts

@@ -20,7 +20,7 @@ export interface ChipInfo {
     displayText: string;
     /** Data attributes to set on the chip element */
     dataAttrs: Record<string, string>;
-    /** Optional HTML content (overrides displayText) */
+    /** Optional HTML content (overrides displayText). TRUSTED markup, rendered unescaped — never pass user-authored data. */
     html?: string;
     /** If true, insert as plain text instead of a chip element */
     insertAsText?: boolean;

package/dist/components/CommentThread.svelte

@@ -21,6 +21,7 @@
 	import { untrack } from 'svelte'
 	import UserAvatar from './UserAvatar.svelte'
 	import { formatRelativeTime, formatFullDate } from '../utils/dateFormatters'
+	import { renderCommentBody } from '../utils/commentBody'
 	import type {
 		Comment,
 		CommentCallbacks,
@@ -130,36 +131,8 @@
 		return !!c.deleted_at || c.body === '[deleted]'
 	}
 
-	// ── Body rendering: escape → @mention highlight → newlines ────────────
-	// Mention rule mirrors the server's parseMentions regex exactly, so what
-	// the UI highlights == what the server notifies. Email addresses
-	// (`foo@bar.com`) are not mentions because `@` follows a word char.
-	function escapeHtml(s: string): string {
-		return s
-			.replace(/&/g, '&')
-			.replace(/</g, '&lt;')
-			.replace(/>/g, '&gt;')
-			.replace(/"/g, '&quot;')
-			.replace(/'/g, '&#039;')
-	}
-
-	function renderBody(body: string): string {
-		const re = /(^|[^\w@])@([a-zA-Z0-9_.-]+)/g
-		let out = ''
-		let last = 0
-		let m: RegExpExecArray | null
-		while ((m = re.exec(body)) !== null) {
-			const handle = m[2].replace(/[.\-_]+$/, '')
-			if (!handle) continue
-			out += escapeHtml(body.slice(last, m.index))
-			out += escapeHtml(m[1])
-			out += `<span class="text-primary font-medium">@${escapeHtml(handle)}</span>`
-			out += escapeHtml(m[2].slice(handle.length))
-			last = m.index + m[0].length
-		}
-		out += escapeHtml(body.slice(last))
-		return out.replace(/\n/g, '<br>')
-	}
+	// Body rendering (escape → @mention → <br>) lives in utils/commentBody so
+	// its XSS contract is unit-tested — the result goes into {@html}.
 
 	function findTop(id: string): Comment | undefined {
 		return items.find((c) => c.id === id)
@@ -705,10 +678,10 @@
 			{:else if isDeleted(c)}
 				<p class="text-base-content/40 mt-0.5 text-sm italic">[deleted]</p>
 			{:else}
-				<!-- Body is escaped in renderBody() before interpolation. -->
+				<!-- Body is escaped in renderCommentBody() before interpolation. -->
 				<!-- eslint-disable-next-line svelte/no-at-html-tags -->
 				<div class="mt-0.5 text-sm break-words whitespace-pre-wrap">
-					{@html renderBody(c.body)}
+					{@html renderCommentBody(c.body)}
 				</div>
 			{/if}
 

package/dist/components/FloatingActionBar.svelte

@@ -20,7 +20,7 @@
 		id: string;
 		/** Button label */
 		label: string;
-		/** SVG path string for a 24×24 icon (optional) */
+		/** SVG path string for a 24×24 icon (optional). TRUSTED markup, rendered unescaped — never pass user-authored data. */
 		icon?: string;
 		/** Color variant */
 		variant?: 'default' | 'primary' | 'danger' | 'warning' | 'success';
@@ -44,7 +44,7 @@
 		id: string;
 		/** Button label */
 		label: string;
-		/** SVG path string for a 24×24 icon (optional) */
+		/** SVG path string for a 24×24 icon (optional). TRUSTED markup, rendered unescaped — never pass user-authored data. */
 		icon?: string;
 		/** Color variant */
 		variant?: 'default' | 'primary' | 'info' | 'purple';

package/dist/components/FloatingActionBar.svelte.d.ts

@@ -3,7 +3,7 @@ export interface ActionButton {
     id: string;
     /** Button label */
     label: string;
-    /** SVG path string for a 24×24 icon (optional) */
+    /** SVG path string for a 24×24 icon (optional). TRUSTED markup, rendered unescaped — never pass user-authored data. */
     icon?: string;
     /** Color variant */
     variant?: 'default' | 'primary' | 'danger' | 'warning' | 'success';
@@ -25,7 +25,7 @@ export interface ActionDropdown {
     id: string;
     /** Button label */
     label: string;
-    /** SVG path string for a 24×24 icon (optional) */
+    /** SVG path string for a 24×24 icon (optional). TRUSTED markup, rendered unescaped — never pass user-authored data. */
     icon?: string;
     /** Color variant */
     variant?: 'default' | 'primary' | 'info' | 'purple';

package/dist/components/MapView.svelte

@@ -23,6 +23,8 @@
 	import { loadGoogleMapsAPI, isGoogleMapsLoaded } from '../utils/googleMapsLoader';
 	import UserAvatar from './UserAvatar.svelte';
 	import type { MapJob, MapAgent } from '../types/maps';
+	// InfoWindow content is parsed as HTML — the builders escape every field (mos-qqyy6).
+	import { STATUS_COLORS, buildJobInfo, buildAgentInfo } from '../utils/mapInfo';
 
 	export type { MapJob, MapAgent };
 
@@ -47,15 +49,6 @@
 		onAgentClick
 	}: Props = $props();
 
-	// Job status → hex color (hardcoded by design — not themed, maps sit outside DaisyUI theming)
-	const STATUS_COLORS: Record<string, string> = {
-		pending: '#f59e0b',
-		scheduled: '#3b82f6',
-		in_progress: '#10b981',
-		completed: '#6b7280',
-		cancelled: '#ef4444'
-	};
-
 	let mapContainer: HTMLElement;
 	let map: google.maps.Map;
 	let jobMarkers: any[] = [];
@@ -234,39 +227,6 @@
 		});
 	}
 
-	function buildJobInfo(job: MapJob): string {
-		const statusBadge = `<span class="badge badge-sm" style="background:${STATUS_COLORS[job.status] ?? '#888'};color:#fff">${job.status.replace(/_/g, ' ')}</span>`;
-		const priority =
-			job.priority === 'urgent'
-				? `<span class="badge badge-error badge-sm">urgent</span>`
-				: '';
-		return `<div style="padding:8px;min-width:180px;font-family:sans-serif;font-size:13px">
-      <div style="display:flex;align-items:center;gap:6px;margin-bottom:6px;font-weight:600">
-        ${job.customer?.name ?? 'Unknown Customer'} ${statusBadge}
-      </div>
-      ${job.type ? `<div><b>Service:</b> ${job.type.replace(/_/g, ' ')}</div>` : ''}
-      ${job.customer?.phone ? `<div><b>Phone:</b> ${job.customer.phone}</div>` : ''}
-      ${job.location?.address ? `<div><b>Address:</b> ${job.location.address}</div>` : ''}
-      ${job.scheduled_at ? `<div><b>Scheduled:</b> ${new Date(job.scheduled_at).toLocaleString()}</div>` : ''}
-      ${priority}
-      ${job.description ? `<div style="margin-top:4px"><b>Notes:</b> ${job.description}</div>` : ''}
-    </div>`;
-	}
-
-	function buildAgentInfo(agent: MapAgent): string {
-		const gpsAge = agent.location?.age_seconds ?? 0;
-		const gpsMins = Math.floor(gpsAge / 60);
-		const hasGps = !!(agent.location?.latitude && agent.location?.longitude);
-		return `<div style="padding:8px;min-width:180px;font-family:sans-serif;font-size:13px">
-      <div style="font-weight:600;margin-bottom:6px">${agent.name}</div>
-      ${agent.status ? `<div><b>Status:</b> ${agent.status}</div>` : ''}
-      ${agent.capacity ? `<div><b>Capacity:</b> ${agent.capacity}</div>` : ''}
-      ${hasGps ? `<div><b>GPS:</b> <span style="color:${gpsMins < 5 ? '#16a34a' : '#d97706'}">${gpsMins < 1 ? 'Live' : `${gpsMins}m ago`}</span></div>` : ''}
-      ${agent.specializations?.length ? `<div><b>Specializations:</b> ${agent.specializations.join(', ')}</div>` : ''}
-      ${agent.vehicle?.name ? `<div><b>Vehicle:</b> ${agent.vehicle.name}</div>` : ''}
-    </div>`;
-	}
-
 	function fitMapToMarkers() {
 		if (!map) return;
 		const all = [...jobMarkers, ...agentMarkers];

package/dist/components/messaging/MessageInput.svelte

@@ -12,7 +12,7 @@
     findPartialMention,
     createMentionString,
     replaceMentionInContent,
-    renderMentionsAsHTML,
+    renderMentionsForComposer,
     extractPlainText,
     parseMentions,
   } from '../../utils/mentionParser'
@@ -111,7 +111,7 @@
     const hasMentions = inputText.includes('[@')
     if (hasMentions) {
       isInternalUpdate = true
-      const renderedHTML = renderMentionsWithDegradedStyling(inputText)
+      const renderedHTML = renderMentionsForComposer(inputText)
       if (contentEditableDiv.innerHTML !== renderedHTML) {
         const selection = window.getSelection()
         const cursorOffset = selection?.rangeCount ? getAbsoluteCursorPosition(selection.getRangeAt(0)) : 0
@@ -187,13 +187,6 @@
     }
   }
 
-  function renderMentionsWithDegradedStyling(content: string): string {
-    let result = renderMentionsAsHTML(content)
-    const degradedMentionRegex = /(?<!>)[@$#!~>/+]\w+(?![^<]*<\/a>)/g
-    result = result.replace(degradedMentionRegex, (match) => `<span class="degraded-mention">${match}</span>`)
-    return result
-  }
-
   function updateAutocompletePosition() {
     if (!contentEditableDiv) return
     const selection = window.getSelection()
@@ -222,7 +215,7 @@
     isInternalUpdate = true
     inputText = newContent
     if (contentEditableDiv) {
-      contentEditableDiv.innerHTML = renderMentionsWithDegradedStyling(inputText)
+      contentEditableDiv.innerHTML = renderMentionsForComposer(inputText)
       setTimeout(() => {
         setContentEditableCursor(newCursorPosition)
         contentEditableDiv.focus()

package/dist/showcase/Dock.svelte

@@ -3,7 +3,7 @@
 
 	export interface DockItem {
 		label: string;
-		/** Inline SVG string for the icon */
+		/** Inline SVG string for the icon. TRUSTED markup, rendered unescaped — never pass user-authored data. */
 		iconSvg?: string;
 		onclick?: () => void;
 	}

package/dist/showcase/Dock.svelte.d.ts

@@ -1,6 +1,6 @@
 export interface DockItem {
     label: string;
-    /** Inline SVG string for the icon */
+    /** Inline SVG string for the icon. TRUSTED markup, rendered unescaped — never pass user-authored data. */
     iconSvg?: string;
     onclick?: () => void;
 }

package/dist/utils/commentBody.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Comment body rendering for <CommentThread> — escape → @mention highlight →
+ * newlines. Extracted from the component (mos-3xvn1) so the XSS contract is
+ * unit-tested: the result goes into `{@html}`, and bodies are user-authored
+ * across teams, users and portal clients.
+ *
+ * Bodies are PLAIN TEXT, never HTML. Every character of the body is escaped;
+ * the only markup this emits is a fixed `<span>` around a mention handle
+ * (itself restricted to [a-zA-Z0-9_.-] and escaped anyway) and `<br>`. That
+ * makes it safe by construction without a sanitizer: there is no input for
+ * which a caller-supplied tag or attribute reaches the output. Do not add
+ * markdown or HTML pass-through here without routing it through a vetted
+ * sanitizer (DOMPurify) first.
+ */
+export declare function escapeHtml(s: string): string;
+/**
+ * Mention rule mirrors the server's parseMentions regex exactly, so what the
+ * UI highlights == what the server notifies. Email addresses (`foo@bar.com`)
+ * are not mentions because `@` follows a word char.
+ */
+export declare function renderCommentBody(body: string): string;

package/dist/utils/commentBody.js

@@ -0,0 +1,45 @@
+/**
+ * Comment body rendering for <CommentThread> — escape → @mention highlight →
+ * newlines. Extracted from the component (mos-3xvn1) so the XSS contract is
+ * unit-tested: the result goes into `{@html}`, and bodies are user-authored
+ * across teams, users and portal clients.
+ *
+ * Bodies are PLAIN TEXT, never HTML. Every character of the body is escaped;
+ * the only markup this emits is a fixed `<span>` around a mention handle
+ * (itself restricted to [a-zA-Z0-9_.-] and escaped anyway) and `<br>`. That
+ * makes it safe by construction without a sanitizer: there is no input for
+ * which a caller-supplied tag or attribute reaches the output. Do not add
+ * markdown or HTML pass-through here without routing it through a vetted
+ * sanitizer (DOMPurify) first.
+ */
+export function escapeHtml(s) {
+    return s
+        .replace(/&/g, '&amp;')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;')
+        .replace(/'/g, '&#039;');
+}
+/**
+ * Mention rule mirrors the server's parseMentions regex exactly, so what the
+ * UI highlights == what the server notifies. Email addresses (`foo@bar.com`)
+ * are not mentions because `@` follows a word char.
+ */
+export function renderCommentBody(body) {
+    const re = /(^|[^\w@])@([a-zA-Z0-9_.-]+)/g;
+    let out = '';
+    let last = 0;
+    let m;
+    while ((m = re.exec(body)) !== null) {
+        const handle = m[2].replace(/[.\-_]+$/, '');
+        if (!handle)
+            continue;
+        out += escapeHtml(body.slice(last, m.index));
+        out += escapeHtml(m[1]);
+        out += `<span class="text-primary font-medium">@${escapeHtml(handle)}</span>`;
+        out += escapeHtml(m[2].slice(handle.length));
+        last = m.index + m[0].length;
+    }
+    out += escapeHtml(body.slice(last));
+    return out.replace(/\n/g, '<br>');
+}

package/dist/utils/mapInfo.d.ts

@@ -0,0 +1,4 @@
+import type { MapJob, MapAgent } from '../types/maps';
+export declare const STATUS_COLORS: Record<string, string>;
+export declare function buildJobInfo(job: MapJob): string;
+export declare function buildAgentInfo(agent: MapAgent): string;

package/dist/utils/mapInfo.js

@@ -0,0 +1,50 @@
+/**
+ * InfoWindow content for <MapView> (mos-qqyy6). Google Maps parses a string
+ * `content` as HTML, and the fields here are customer/job/agent data — often
+ * typed by a customer on a public booking form — so every interpolated value
+ * is escaped. Extracted from the component so that contract is unit-tested.
+ *
+ * The only markup emitted is the fixed layout below; colors come from a fixed
+ * status map, never from the data.
+ */
+import { escapeHtml } from './commentBody';
+// Job status → hex color (hardcoded by design — not themed, maps sit outside DaisyUI theming)
+export const STATUS_COLORS = {
+    pending: '#f59e0b',
+    scheduled: '#3b82f6',
+    in_progress: '#10b981',
+    completed: '#6b7280',
+    cancelled: '#ef4444'
+};
+const e = (v) => escapeHtml(String(v));
+export function buildJobInfo(job) {
+    const color = Object.prototype.hasOwnProperty.call(STATUS_COLORS, job.status) ? STATUS_COLORS[job.status] : '#888';
+    const statusBadge = `<span class="badge badge-sm" style="background:${color};color:#fff">${e(job.status.replace(/_/g, ' '))}</span>`;
+    const priority = job.priority === 'urgent'
+        ? `<span class="badge badge-error badge-sm">urgent</span>`
+        : '';
+    return `<div style="padding:8px;min-width:180px;font-family:sans-serif;font-size:13px">
+      <div style="display:flex;align-items:center;gap:6px;margin-bottom:6px;font-weight:600">
+        ${e(job.customer?.name ?? 'Unknown Customer')} ${statusBadge}
+      </div>
+      ${job.type ? `<div><b>Service:</b> ${e(job.type.replace(/_/g, ' '))}</div>` : ''}
+      ${job.customer?.phone ? `<div><b>Phone:</b> ${e(job.customer.phone)}</div>` : ''}
+      ${job.location?.address ? `<div><b>Address:</b> ${e(job.location.address)}</div>` : ''}
+      ${job.scheduled_at ? `<div><b>Scheduled:</b> ${e(new Date(job.scheduled_at).toLocaleString())}</div>` : ''}
+      ${priority}
+      ${job.description ? `<div style="margin-top:4px"><b>Notes:</b> ${e(job.description)}</div>` : ''}
+    </div>`;
+}
+export function buildAgentInfo(agent) {
+    const gpsAge = agent.location?.age_seconds ?? 0;
+    const gpsMins = Math.floor(gpsAge / 60);
+    const hasGps = !!(agent.location?.latitude && agent.location?.longitude);
+    return `<div style="padding:8px;min-width:180px;font-family:sans-serif;font-size:13px">
+      <div style="font-weight:600;margin-bottom:6px">${e(agent.name)}</div>
+      ${agent.status ? `<div><b>Status:</b> ${e(agent.status)}</div>` : ''}
+      ${agent.capacity ? `<div><b>Capacity:</b> ${e(agent.capacity)}</div>` : ''}
+      ${hasGps ? `<div><b>GPS:</b> <span style="color:${gpsMins < 5 ? '#16a34a' : '#d97706'}">${gpsMins < 1 ? 'Live' : `${gpsMins}m ago`}</span></div>` : ''}
+      ${agent.specializations?.length ? `<div><b>Specializations:</b> ${e(agent.specializations.join(', '))}</div>` : ''}
+      ${agent.vehicle?.name ? `<div><b>Vehicle:</b> ${e(agent.vehicle.name)}</div>` : ''}
+    </div>`;
+}

package/dist/utils/mentionParser.d.ts

@@ -27,9 +27,25 @@ export declare function setMentionUrlGenerator(generator: MentionUrlGenerator):
  */
 export declare function parseMentions(content: string, urlGenerator?: MentionUrlGenerator): MentionMatch[];
 /**
- * Convert message content with mentions to HTML
+ * Convert message content with mentions to HTML.
+ *
+ * The result is meant for `{@html}` and message content is user-authored,
+ * so every interpolated value (url, type, id, display name) is escaped and
+ * the href is scheme-checked — see mos-3xvn1.
  */
 export declare function renderMentionsAsHTML(content: string, urlGenerator?: MentionUrlGenerator): string;
+/**
+ * The <MessageInput> composer's contenteditable HTML: renderMentionsAsHTML,
+ * plus un-resolved `@name`/`#tag`-style tokens wrapped in a fixed
+ * `.degraded-mention` span. The wrap runs over already-escaped HTML, so it
+ * must skip anything inside a tag (`(?<![<>])` + the `</a>` lookahead) and
+ * inside a character reference (`(?<!&)`). Before mos-qqyy6 it did neither:
+ * every resolved mention's `</a>` became `<<span>/a</span>>`, and `don't`
+ * (escaped to `don&#039;t`) became `&<span>#039</span>;`, so the composer
+ * showed raw markup. The wrapped token is `[@$#!~>/+]\w+`,
+ * so it can carry no markup of its own.
+ */
+export declare function renderMentionsForComposer(content: string): string;
 /**
  * Create a mention string for insertion into message input
  */

package/dist/utils/mentionParser.js

@@ -8,9 +8,14 @@
  * routing via the `urlGenerator` parameter or by setting a default.
  */
 // Regex to match mention pattern: [@Display Name](type:id)
-const MENTION_REGEX = /\[@([^\]]+)\]\(([^:]+):([^)]+)\)/g;
+//
+// `type` is an identifier token, never free text (mos-3xvn1): it lands in
+// class/data attributes, and the old `[^:]+` let a typed
+// `[@x](a"><img onerror=…>:y)` break out of the attribute. Rendering escapes
+// every interpolated value as well — the token is the first wall only.
+const MENTION_REGEX = /\[@([^\]]+)\]\(([A-Za-z0-9_-]+):([^)]+)\)/g;
 // Default URL generator (apps can override)
-let defaultUrlGenerator = (type, id) => `#${type}/${id}`;
+let defaultUrlGenerator = (type, id) => `#${type}/${encodeURIComponent(id)}`;
 /**
  * Set the default URL generator for mentions.
  * Call this once at app startup to configure mention link routing.
@@ -41,7 +46,22 @@ export function parseMentions(content, urlGenerator) {
     return mentions;
 }
 /**
- * Convert message content with mentions to HTML
+ * A URL generator receives the sender-typed id, so its output is untrusted:
+ * a generator that echoes the id (`(t, id) => id`) would hand a sender a
+ * `javascript:` href. Script-capable schemes collapse to `#`. Browsers
+ * ignore ASCII whitespace/control chars inside a scheme, so they are
+ * stripped before the check.
+ */
+function safeHref(url) {
+    const scheme = url.replace(/[\u0000-\u0020]/g, '').toLowerCase();
+    return /^(javascript|data|vbscript):/.test(scheme) ? '#' : url;
+}
+/**
+ * Convert message content with mentions to HTML.
+ *
+ * The result is meant for `{@html}` and message content is user-authored,
+ * so every interpolated value (url, type, id, display name) is escaped and
+ * the href is scheme-checked — see mos-3xvn1.
  */
 export function renderMentionsAsHTML(content, urlGenerator) {
     const mentions = parseMentions(content, urlGenerator);
@@ -52,12 +72,26 @@ export function renderMentionsAsHTML(content, urlGenerator) {
     let lastIndex = 0;
     mentions.forEach((mention) => {
         result += escapeHTML(content.substring(lastIndex, mention.startIndex));
-        result += `<a href="${mention.url}" class="mention-link mention-${mention.type}" data-mention-type="${mention.type}" data-mention-id="${mention.id}">@${escapeHTML(mention.displayName)}</a>`;
+        result += `<a href="${escapeHTML(safeHref(mention.url))}" class="mention-link mention-${escapeHTML(mention.type)}" data-mention-type="${escapeHTML(mention.type)}" data-mention-id="${escapeHTML(mention.id)}">@${escapeHTML(mention.displayName)}</a>`;
         lastIndex = mention.endIndex;
     });
     result += escapeHTML(content.substring(lastIndex));
     return result;
 }
+/**
+ * The <MessageInput> composer's contenteditable HTML: renderMentionsAsHTML,
+ * plus un-resolved `@name`/`#tag`-style tokens wrapped in a fixed
+ * `.degraded-mention` span. The wrap runs over already-escaped HTML, so it
+ * must skip anything inside a tag (`(?<![<>])` + the `</a>` lookahead) and
+ * inside a character reference (`(?<!&)`). Before mos-qqyy6 it did neither:
+ * every resolved mention's `</a>` became `<<span>/a</span>>`, and `don't`
+ * (escaped to `don&#039;t`) became `&<span>#039</span>;`, so the composer
+ * showed raw markup. The wrapped token is `[@$#!~>/+]\w+`,
+ * so it can carry no markup of its own.
+ */
+export function renderMentionsForComposer(content) {
+    return renderMentionsAsHTML(content).replace(/(?<![<>&])[@$#!~>/+]\w+(?![^<]*<\/a>)/g, (match) => `<span class="degraded-mention">${match}</span>`);
+}
 /**
  * Create a mention string for insertion into message input
  */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@joewinke/jatui",
-  "version": "0.17.0",
+  "version": "0.17.1",
   "private": false,
   "description": "Shared Svelte 5 component library for JAT projects",
   "type": "module",