@heyramzi/ui 3.4.0 → 3.6.0

package/COMPONENTS.md

@@ -63,6 +63,7 @@ Generic pieces built on the primitives, imported from `@heyramzi/ui/components/<
 
 - `copy` — CopyButton, copyText, copyRichText, htmlToPlainText, Copied
 - `data-table` — SortableHead, Pagination, InfiniteScroll, RowContextMenu, TableSkeleton, and the sort, page and filter helpers
+- `flag` — Flag, FLAG_CODES, flagCode: a country flag from an ISO 3166-1 alpha-2 code (plus XK for Kosovo), 1em tall at 3:2, one lazy `<img>` of `/flags/<CODE>.svg` each. Add `flagAssets()` from `@heyramzi/ui/vite` to the app's Vite plugins to serve the 250 SVGs (country-flag-icons, MIT, licence beside them). Decorative unless `label` is set. An unknown code renders nothing; to keep a row's layout, wrap it in `<span class="inline-block aspect-[3/2] h-[1em]">`
 - `hold-to-confirm` — HoldToConfirm, press and hold to confirm
 - `language-flag` — LanguageFlag, LANGUAGE_FLAGS (code to `/flags/*.svg`, also a SegmentedFilter option's `image`)
 - `list-page` — ListPageShell, MasterDetail, GroupedList, RailRow and the rest of the master-detail page kit, DetailPanel, ToolbarSearch, toolbarTriggerClass, NoticeBar, EmptyState, FilterPopover, setSectionHost
@@ -124,6 +125,7 @@ Named exports from `@heyramzi/ui/effects/<name>`, e.g.
 Imported from `@heyramzi/ui/ai/<name>`, e.g. `import { AiButton } from "@heyramzi/ui/ai/ai-button"`.
 
 - `ai-button` — AiButton
+- `chat-window` — ChatGptWindow, ClaudeWindow: still or playing pictures of a ChatGPT or Claude conversation for a marketing page, with a connector call row. `messages` takes user text, assistant text or a snippet, and tool steps; every printed string is a prop
 - `confirmation` — Confirmation, ConfirmationTitle, ConfirmationState (`when` names the kind it shows), ConfirmationActions, ConfirmationAction, type ConfirmationKind
 - `generation-progress` — GenerationProgress
 - `loading-state` — PixelLoader

package/dist/ai/chat-window/icons.js

@@ -0,0 +1,43 @@
+// Each glyph is a file a CSS mask paints in the current colour. Sources and licences: icons/LICENSE.
+import gptChevron from "../../../src/ai/chat-window/icons/chatgpt-chevron.svg";
+import gptCopy from "../../../src/ai/chat-window/icons/chatgpt-copy.svg";
+import gptMic from "../../../src/ai/chat-window/icons/chatgpt-mic.svg";
+import gptMore from "../../../src/ai/chat-window/icons/chatgpt-more.svg";
+import gptPlus from "../../../src/ai/chat-window/icons/chatgpt-plus.svg";
+import gptRegenerate from "../../../src/ai/chat-window/icons/chatgpt-regenerate.svg";
+import gptShare from "../../../src/ai/chat-window/icons/chatgpt-share.svg";
+import gptSidebar from "../../../src/ai/chat-window/icons/chatgpt-sidebar.svg";
+import gptThumb from "../../../src/ai/chat-window/icons/chatgpt-thumb.svg";
+import gptVoice from "../../../src/ai/chat-window/icons/chatgpt-voice.svg";
+import claudeChevron from "../../../src/ai/chat-window/icons/claude-chevron.svg";
+import claudeCopy from "../../../src/ai/chat-window/icons/claude-copy.svg";
+import claudePlus from "../../../src/ai/chat-window/icons/claude-plus.svg";
+import claudeRetry from "../../../src/ai/chat-window/icons/claude-retry.svg";
+import claudeSend from "../../../src/ai/chat-window/icons/claude-send.svg";
+import claudeSidebar from "../../../src/ai/chat-window/icons/claude-sidebar.svg";
+import claudeSliders from "../../../src/ai/chat-window/icons/claude-sliders.svg";
+import claudeSpark from "../../../src/ai/chat-window/icons/claude-spark.svg";
+import claudeThumb from "../../../src/ai/chat-window/icons/claude-thumb.svg";
+export const CHATGPT_ICONS = {
+	chevron: gptChevron,
+	copy: gptCopy,
+	mic: gptMic,
+	more: gptMore,
+	plus: gptPlus,
+	regenerate: gptRegenerate,
+	share: gptShare,
+	sidebar: gptSidebar,
+	thumb: gptThumb,
+	voice: gptVoice
+};
+export const CLAUDE_ICONS = {
+	chevron: claudeChevron,
+	copy: claudeCopy,
+	plus: claudePlus,
+	retry: claudeRetry,
+	send: claudeSend,
+	sidebar: claudeSidebar,
+	sliders: claudeSliders,
+	spark: claudeSpark,
+	thumb: claudeThumb
+};

package/dist/ai/chat-window/index.js

@@ -0,0 +1,5 @@
+import ChatGptWindow from "../../../src/ai/chat-window/ChatGptWindow.svelte";
+import ClaudeWindow from "../../../src/ai/chat-window/ClaudeWindow.svelte";
+export { CHATGPT_LABELS, CLAUDE_LABELS } from "./labels.js";
+export { REVEAL_BEATS, revealSchedule } from "./reveal.svelte.js";
+export { ChatGptWindow, ClaudeWindow };

package/dist/ai/chat-window/labels.js

@@ -0,0 +1,16 @@
+export const CHATGPT_LABELS = {
+	running: "Calling {name}",
+	done: "Used {name}",
+	share: "Share",
+	disclaimer: "ChatGPT can make mistakes. Check important info.",
+	userSaid: "You said:",
+	assistantSaid: "ChatGPT said:"
+};
+export const CLAUDE_LABELS = {
+	running: "Using {name}",
+	done: "Used {name}",
+	share: "Share",
+	disclaimer: "Claude can make mistakes. Please double-check responses.",
+	userSaid: "You said:",
+	assistantSaid: "Claude said:"
+};

package/dist/ai/chat-window/reveal.svelte.js

@@ -0,0 +1,106 @@
+import { untrack } from "svelte";
+/** Milliseconds each beat holds, read as one conversation's pacing, not a transition. */
+export const REVEAL_BEATS = {
+	lead: 400,
+	user: 900,
+	thinking: 900,
+	stream: 1500,
+	running: 1300,
+	after: 350
+};
+/** The timeline for a conversation: when each message enters and settles, and when it ends. */
+export function revealSchedule(roles, beats = REVEAL_BEATS) {
+	const out = [];
+	let t = beats.lead;
+	roles.forEach((role, index) => {
+		if (role === "user") {
+			out.push({
+				at: t,
+				index,
+				phase: "done"
+			});
+			t += beats.user;
+		} else if (role === "assistant") {
+			out.push({
+				at: t,
+				index,
+				phase: "thinking"
+			});
+			t += beats.thinking;
+			out.push({
+				at: t,
+				index,
+				phase: "streaming"
+			});
+			t += beats.stream;
+			out.push({
+				at: t,
+				index,
+				phase: "done"
+			});
+			t += beats.after;
+		} else {
+			out.push({
+				at: t,
+				index,
+				phase: "running"
+			});
+			t += beats.running;
+			out.push({
+				at: t,
+				index,
+				phase: "done"
+			});
+			t += beats.after;
+		}
+	});
+	return {
+		beats: out,
+		end: t
+	};
+}
+/**
+* Plays a conversation once the window is on screen and `active`, again each time `active` turns on.
+* Renders finished for SSR, no JavaScript and reduced motion.
+*/
+export function createReveal(options) {
+	let phases = $state([]);
+	let node = $state(null);
+	let seen = $state(false);
+	$effect(() => {
+		const { enabled } = options();
+		if (!node || !enabled || seen) return;
+		const io = new IntersectionObserver((entries) => {
+			if (entries.some((e) => e.isIntersecting)) {
+				seen = true;
+				io.disconnect();
+			}
+		}, { threshold: .35 });
+		io.observe(node);
+		return () => io.disconnect();
+	});
+	$effect(() => {
+		const { enabled, active } = options();
+		if (!enabled || !active || !seen) return;
+		if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
+		const { roles, hold, ondone } = untrack(options);
+		const { beats, end } = revealSchedule(roles);
+		phases = roles.map(() => "hidden");
+		const timers = beats.map((b) => setTimeout(() => phases[b.index] = b.phase, b.at));
+		timers.push(setTimeout(() => ondone?.(), end + hold));
+		return () => {
+			timers.forEach(clearTimeout);
+			phases = [];
+		};
+	});
+	return {
+		/** A message's phase; `done` when nothing is playing. */
+		phase: (index) => phases[index] ?? "done",
+		/** Attach to the window's root, so the reveal waits until it scrolls into view. */
+		attach: (el) => {
+			node = el;
+			return () => node = null;
+		},
+		streamMs: REVEAL_BEATS.stream
+	};
+}

package/dist/ai/chat-window/types.js

@@ -0,0 +1,4 @@
+/** Fills `{name}` in a label such as "Used {name}". */
+export function fillName(template, name) {
+	return template.replaceAll("{name}", name);
+}

package/dist/components/copy/clipboard.js

@@ -32,7 +32,7 @@ export function htmlToPlainText(html) {
 	if (typeof document === "undefined") {
 		return html.replace(/<br\s*\/?>/gi, "\n").replace(/<\/p>/gi, "\n\n").replace(/<\/li>/gi, "\n").replace(/<li>/gi, "• ").replace(/<[^>]+>/g, "").replace(/&nbsp;/g, " ").replace(/&amp;/g, "&").replace(/&lt;/g, "<").replace(/&gt;/g, ">").trim();
 	}
-	const div = document.createElement("div");
-	div.innerHTML = html;
-	return div.textContent || div.innerText || "";
+	// A DOMParser document has no browsing context, so nothing in the markup loads or runs.
+	// An element from document.createElement belongs to the live page: an <img onerror> fires.
+	return new DOMParser().parseFromString(html, "text/html").body.textContent ?? "";
 }

package/dist/components/flag/codes.js

@@ -0,0 +1,13 @@
+/** Where the host serves the flag files. `flagAssets()` from `@heyramzi/ui/vite` serves them there. */
+export const FLAG_BASE = "/flags";
+/**
+* The 249 ISO 3166-1 alpha-2 codes plus XK (Kosovo, user-assigned but in common use), each with
+* a file in `./flags`, from country-flag-icons 1.6.20 (MIT).
+*/
+export const FLAG_CODES = ("AD AE AF AG AI AL AM AO AQ AR AS AT AU AW AX AZ BA BB BD BE BF BG BH BI BJ BL BM BN BO BQ BR " + "BS BT BV BW BY BZ CA CC CD CF CG CH CI CK CL CM CN CO CR CU CV CW CX CY CZ DE DJ DK DM DO DZ " + "EC EE EG EH ER ES ET FI FJ FK FM FO FR GA GB GD GE GF GG GH GI GL GM GN GP GQ GR GS GT GU GW " + "GY HK HM HN HR HT HU ID IE IL IM IN IO IQ IR IS IT JE JM JO JP KE KG KH KI KM KN KP KR KW KY " + "KZ LA LB LC LI LK LR LS LT LU LV LY MA MC MD ME MF MG MH MK ML MM MN MO MP MQ MR MS MT MU MV " + "MW MX MY MZ NA NC NE NF NG NI NL NO NP NR NU NZ OM PA PE PF PG PH PK PL PM PN PR PS PT PW PY " + "QA RE RO RS RU RW SA SB SC SD SE SG SH SI SJ SK SL SM SN SO SR SS ST SV SX SY SZ TC TD TF TG " + "TH TJ TK TL TM TN TO TR TT TV TW TZ UA UG UM US UY UZ VA VC VE VG VI VN VU WF WS XK YE YT ZA ZM ZW").split(" ");
+const KNOWN = new Set(FLAG_CODES);
+/** The code in capitals when a flag exists for it, else null. */
+export function flagCode(code) {
+	const upper = code?.trim().toUpperCase() ?? "";
+	return KNOWN.has(upper) ? upper : null;
+}

package/dist/components/flag/index.js

@@ -0,0 +1,2 @@
+export { default as Flag } from "../../../src/components/flag/flag.svelte";
+export { FLAG_BASE, FLAG_CODES, flagCode } from "./codes.js";

package/dist/slides/export/pdf.js

@@ -38,6 +38,13 @@ export async function printPage(page, options = {}) {
 	}
 	await page.evaluate(() => document.fonts.ready.then(() => undefined));
 	if (options.settle) await page.waitForTimeout(options.settle);
+	// WHY: a lazy or still-loading image read as broken while the PDF printed it (testimonial photos, 11 Nov 2026).
+	await page.evaluate(() => Promise.all([...document.images].map((img) => {
+		img.loading = "eager";
+		if (img.complete) return undefined;
+		const loaded = img.decode().catch(() => undefined);
+		return Promise.race([loaded, new Promise((resolve) => setTimeout(resolve, 15e3))]);
+	})).then(() => undefined));
 	const brokenImages = await page.evaluate(() => [...document.images].filter((img) => !img.complete || img.naturalWidth === 0).map((img) => img.src));
 	const { size } = options;
 	const pdf = await page.pdf({

package/dist/vite/flags.js

@@ -0,0 +1,46 @@
+import { existsSync, readdirSync, readFileSync } from "node:fs";
+import { dirname, join } from "node:path";
+import { fileURLToPath } from "node:url";
+// From src/vite in the repo, or dist/vite in the published package.
+const here = dirname(fileURLToPath(import.meta.url));
+const FLAGS_DIR = [join(here, "../components/flag/flags"), join(here, "../../src/components/flag/flags")].find((dir) => existsSync(dir));
+/**
+* Serves the `Flag` SVGs at `/flags/<CODE>.svg`: from the package in dev and preview, and as
+* one static file each in the client build. Add it to `plugins` in `vite.config.ts`.
+*/
+export function flagAssets(options = {}) {
+	const base = (options.base ?? "/flags").replace(/\/$/, "");
+	if (!FLAGS_DIR) throw new Error("@heyramzi/ui: the flag SVGs are missing from the package");
+	const dir = FLAGS_DIR;
+	const files = readdirSync(dir).filter((name) => /^[A-Z]{2}\.svg$/.test(name));
+	const known = new Set(files);
+	let ssrBuild = false;
+	// Returns nothing: Vite calls a function returned from configureServer as a post hook.
+	const serve = (server) => {
+		server.middlewares.use((req, res, next) => {
+			const path = req.url?.split("?")[0] ?? "";
+			const name = path.startsWith(`${base}/`) ? path.slice(base.length + 1) : "";
+			if (!known.has(name)) return next();
+			res.setHeader("Content-Type", "image/svg+xml");
+			res.setHeader("Cache-Control", "public, max-age=86400");
+			res.end(readFileSync(join(dir, name)));
+		});
+	};
+	return {
+		name: "heyramzi-ui:flags",
+		configResolved(config) {
+			ssrBuild = Boolean(config.build.ssr);
+		},
+		configureServer: serve,
+		configurePreviewServer: serve,
+		generateBundle() {
+			const consumer = this.environment?.config?.consumer;
+			if (consumer ? consumer !== "client" : ssrBuild) return;
+			for (const name of files) this.emitFile({
+				type: "asset",
+				fileName: `${base.replace(/^\//, "")}/${name}`,
+				source: readFileSync(join(dir, name))
+			});
+		}
+	};
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@heyramzi/ui",
-  "version": "3.4.0",
+  "version": "3.6.0",
   "description": "Svelte 5 UI for apps: primitives, effects and animations, plus work (tasks and docs), charts, slides, an editor, onboarding and a canvas as subpaths.",
   "homepage": "https://ui.heyramzi.com",
   "license": "MIT",
@@ -115,6 +115,11 @@
       "node": "./dist/effects/magnetic/magnetic.js",
       "default": "./src/effects/magnetic/magnetic.ts"
     },
+    "./vite": {
+      "types": "./src/vite/flags.ts",
+      "node": "./dist/vite/flags.js",
+      "default": "./src/vite/flags.ts"
+    },
     "./icons/sf-symbols": {
       "svelte": "./src/icons/sf-symbols.ts",
       "types": "./src/icons/sf-symbols.ts",
@@ -389,6 +394,6 @@
     "sync": "pnpm sync:transitions && pnpm sync:shadcn",
     "sync:check": "node scripts/sync-transitions.mjs --check && node scripts/sync-shadcn.mjs --check",
     "check": "svelte-check --tsconfig ./tsconfig.json",
-    "build": "node ../../../vibe-kit/scripts/build-dist.mjs"
+    "build": "node ../../../upsys/kit/scripts/build-dist.mjs"
   }
 }

package/src/ai/chat-window/ChatGlyph.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+	// =========================
+	// PROPS
+	// =========================
+	interface Props {
+		/** The SVG file's URL, painted through a mask in the current colour. */
+		src: string;
+		size?: number;
+		class?: string;
+	}
+
+	let { src, size = 20, class: className = "" }: Props = $props();
+</script>
+
+<!-- =========================== -->
+<!-- MARKUP -->
+<!-- =========================== -->
+<span
+	class="chat-glyph {className}"
+	style:--glyph={`url("${src}")`}
+	style:--size="{size}px"
+	aria-hidden="true"
+></span>
+
+<style>
+	@layer theme, base, components, utilities;
+
+	@layer components {
+		.chat-glyph {
+			display: block;
+			flex: none;
+			width: var(--size);
+			height: var(--size);
+			background: currentColor;
+			mask: var(--glyph) center / contain no-repeat;
+		}
+	}
+</style>

package/src/ai/chat-window/ChatGlyph.svelte.d.ts

@@ -0,0 +1,9 @@
+interface Props {
+    /** The SVG file's URL, painted through a mask in the current colour. */
+    src: string;
+    size?: number;
+    class?: string;
+}
+declare const $$Component: import("svelte").Component<Props, {}, "">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;