hamzus-ui 0.0.242 → 0.0.244

package/index.js

@@ -18,6 +18,8 @@ export { default as Form } from "./src/components/hamzus-ui/Form/Form.svelte"
 export { default as Input } from "./src/components/hamzus-ui/Input/Input.svelte"
 export { default as InputNumber } from "./src/components/hamzus-ui/InputNumber/InputNumber.svelte"
 export { default as InputSelector } from "./src/components/hamzus-ui/InputSelector/InputSelector.svelte"
+export { default as Readme } from "./src/components/hamzus-ui/Readme/Readme.svelte"
+export { default as ReadmePreview } from "./src/components/hamzus-ui/ReadmePreview/ReadmePreview.svelte"
 export { default as TextArea } from "./src/components/hamzus-ui/TextArea/TextArea.svelte"
 export { default as Checkbox } from "./src/components/hamzus-ui/Checkboxes/Checkbox/Checkbox.svelte"
 export { default as Switch } from "./src/components/hamzus-ui/Switch/Switch.svelte"

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "hamzus-ui",
-	"version": "0.0.242",
+	"version": "0.0.244",
 	"type": "module",
 	"main": "index.js",
 	"svelte": "index.js",

package/src/components/hamzus-ui/InputSelector/InputSelector.svelte

@@ -281,7 +281,7 @@
 			<svelte:component this={component} selected={isSelected()} {...result} onClick={handleSelect}
 			></svelte:component>
 		{/each}
-        {#if results.length === 0 && offset === 0}
+        {#if results.length === 0}
             <slot name="nothing"/>
         {/if}
 		{#if results.length < totalOfRows}

package/src/components/hamzus-ui/Readme/Readme.svelte

@@ -0,0 +1,623 @@
+<script>
+	import Button from '..//Button/Button.svelte';
+	import IconButton from '..//IconButton/IconButton.svelte';
+
+	// ---------- État ----------
+	export let initialValue = `# Mon Projet
+
+> Une courte description qui donne envie de scroller.
+
+## Installation
+
+\`\`\`bash
+npm install mon-projet
+\`\`\`
+
+## Utilisation
+
+\`\`\`js
+import { run } from 'mon-projet'
+run()
+\`\`\`
+
+- [x] Setup du repo
+- [ ] Écrire les tests
+- [ ] Publier sur npm
+
+Voir la [documentation](https://example.com) pour plus de détails.
+`;
+
+	let source = initialValue;
+	let mode = 'split'; // 'edit' | 'split' | 'preview'
+	let filename = 'README.md';
+	let dirty = false;
+	let textareaEl;
+	let copied = false;
+
+	$: wordCount = (source.match(/\S+/g) || []).length;
+	$: charCount = source.length;
+	$: readMinutes = Math.max(1, Math.round(wordCount / 200));
+	$: html = renderMarkdown(source);
+
+	function onInput(e) {
+		source = e.target.value;
+		dirty = true;
+	}
+
+	// ---------- Petit moteur markdown (sans dépendance) ----------
+	function escapeHtml(str) {
+		return str.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+	}
+
+	function renderInline(text) {
+		let t = escapeHtml(text);
+		t = t.replace(/`([^`]+)`/g, '<code>$1</code>');
+		t = t.replace(/!\[([^\]]*)\]\(([^)]+)\)/g, '<img alt="$1" src="$2" />');
+		t = t.replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2" target="_blank" rel="noopener">$1</a>');
+		t = t.replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>');
+		t = t.replace(/(^|[^*])\*([^*]+)\*(?!\*)/g, '$1<em>$2</em>');
+		t = t.replace(/~~([^~]+)~~/g, '<del>$1</del>');
+		return t;
+	}
+
+	function renderMarkdown(md) {
+		const lines = md.replace(/\r\n/g, '\n').split('\n');
+		let out = [];
+		let i = 0;
+		let inCodeBlock = false;
+		let codeLang = '';
+		let codeBuf = [];
+		let listBuf = [];
+		let listType = null;
+
+		function flushList() {
+			if (listBuf.length) {
+				const tag = listType === 'ol' ? 'ol' : 'ul';
+				out.push(`<${tag}>${listBuf.join('')}</${tag}>`);
+				listBuf = [];
+				listType = null;
+			}
+		}
+
+		while (i < lines.length) {
+			const line = lines[i];
+			const fence = line.match(/^```(.*)$/);
+
+			if (fence) {
+				if (!inCodeBlock) {
+					inCodeBlock = true;
+					codeLang = fence[1].trim();
+					codeBuf = [];
+				} else {
+					inCodeBlock = false;
+					out.push(
+						`<pre class="code-block" data-lang="${escapeHtml(codeLang || 'text')}"><code>${escapeHtml(codeBuf.join('\n'))}</code></pre>`
+					);
+				}
+				i++;
+				continue;
+			}
+			if (inCodeBlock) {
+				codeBuf.push(line);
+				i++;
+				continue;
+			}
+
+			const heading = line.match(/^(#{1,6})\s+(.*)$/);
+			if (heading) {
+				flushList();
+				const level = heading[1].length;
+				out.push(`<h${level}>${renderInline(heading[2])}</h${level}>`);
+				i++;
+				continue;
+			}
+
+			const quote = line.match(/^>\s?(.*)$/);
+			if (quote) {
+				flushList();
+				out.push(`<blockquote class="p">${renderInline(quote[1])}</blockquote>`);
+				i++;
+				continue;
+			}
+
+			const hr = line.match(/^(-{3,}|\*{3,})\s*$/);
+			if (hr) {
+				flushList();
+				out.push('<hr />');
+				i++;
+				continue;
+			}
+
+			const taskItem = line.match(/^\s*[-*]\s+\[( |x|X)\]\s+(.*)$/);
+			if (taskItem) {
+				if (listType !== 'ul') {
+					flushList();
+					listType = 'ul';
+				}
+				const checked = taskItem[1].toLowerCase() === 'x';
+				listBuf.push(
+					`<li class="task"><input type="checkbox" disabled ${checked ? 'checked' : ''} />${renderInline(taskItem[2])}</li>`
+				);
+				i++;
+				continue;
+			}
+
+			const ulItem = line.match(/^\s*[-*]\s+(.*)$/);
+			if (ulItem) {
+				if (listType !== 'ul') {
+					flushList();
+					listType = 'ul';
+				}
+				listBuf.push(`<li>${renderInline(ulItem[1])}</li>`);
+				i++;
+				continue;
+			}
+
+			const olItem = line.match(/^\s*\d+\.\s+(.*)$/);
+			if (olItem) {
+				if (listType !== 'ol') {
+					flushList();
+					listType = 'ol';
+				}
+				listBuf.push(`<li>${renderInline(olItem[1])}</li>`);
+				i++;
+				continue;
+			}
+
+			if (line.trim() === '') {
+				flushList();
+				i++;
+				continue;
+			}
+
+			flushList();
+			out.push(`<p>${renderInline(line)}</p>`);
+			i++;
+		}
+		flushList();
+		if (inCodeBlock && codeBuf.length) {
+			out.push(`<pre class="code-block"><code>${escapeHtml(codeBuf.join('\n'))}</code></pre>`);
+		}
+		return out.join('\n');
+	}
+
+	// ---------- Actions de la barre d'outils ----------
+	function wrapSelection(before, after = before, placeholder = '') {
+		if (!textareaEl) return;
+		const start = textareaEl.selectionStart;
+		const end = textareaEl.selectionEnd;
+		const selected = source.slice(start, end) || placeholder;
+		const next = source.slice(0, start) + before + selected + after + source.slice(end);
+		source = next;
+		dirty = true;
+		requestAnimationFrame(() => {
+			textareaEl.focus();
+			const cursor = start + before.length + selected.length + after.length;
+			textareaEl.setSelectionRange(cursor, cursor);
+		});
+	}
+
+	function insertLinePrefix(prefix) {
+		if (!textareaEl) return;
+		const start = textareaEl.selectionStart;
+		const lineStart = source.lastIndexOf('\n', start - 1) + 1;
+		source = source.slice(0, lineStart) + prefix + source.slice(lineStart);
+		dirty = true;
+		requestAnimationFrame(() => textareaEl.focus());
+	}
+
+	const toolbarActions = [
+		{ label: 'H2', title: 'Titre', run: () => insertLinePrefix('## ') },
+		{ label: 'B', title: 'Gras', run: () => wrapSelection('**', '**', 'texte en gras') },
+		{ label: 'I', title: 'Italique', run: () => wrapSelection('*', '*', 'texte en italique') },
+		{ label: '</>', title: 'Code inline', run: () => wrapSelection('`', '`', 'code') },
+		{ label: '{ }', title: 'Bloc de code', run: () => wrapSelection('```\n', '\n```', 'code') },
+		{ label: '🔗', title: 'Lien', run: () => wrapSelection('[', '](https://)', 'texte du lien') },
+		{ label: '•', title: 'Liste', run: () => insertLinePrefix('- ') },
+		{ label: '☑', title: 'Tâche', run: () => insertLinePrefix('- [ ] ') },
+		{ label: '❝', title: 'Citation', run: () => insertLinePrefix('> ') }
+	];
+
+	async function copyMarkdown() {
+		try {
+			await navigator.clipboard.writeText(source);
+			copied = true;
+			setTimeout(() => (copied = false), 1600);
+		} catch (e) {
+			// clipboard indisponible, on ignore silencieusement
+		}
+	}
+
+	function downloadFile() {
+		const blob = new Blob([source], { type: 'text/markdown;charset=utf-8' });
+		const url = URL.createObjectURL(blob);
+		const a = document.createElement('a');
+		a.href = url;
+		a.download = filename || 'README.md';
+		a.click();
+		URL.revokeObjectURL(url);
+		dirty = false;
+	}
+</script>
+
+<div class="readme-editor">
+	<div class="toolbar">
+		{#each toolbarActions as action}
+			<IconButton variant="ghost" onClick={action.run}>
+                <h5>{action.label}</h5>
+            </IconButton>
+		{/each}
+		<span class="spacer"></span>
+
+		<div class="view-toggle" role="tablist" aria-label="Mode d'affichage">
+			<Button variant={mode === 'edit' ? 'secondary' : 'ghost'} onClick={() => (mode = 'edit')}><h5>Édition</h5></Button>
+			<Button variant={mode === 'split' ? 'secondary' : 'ghost'} onClick={() => (mode = 'split')}><h5>Scindé</h5></Button>
+			<Button variant={mode === 'preview' ? 'secondary' : 'ghost'} onClick={() => (mode = 'preview')}><h5>Aperçu</h5></Button>
+		</div>
+	</div>
+
+	<div class="panes" class:single={mode !== 'split'}>
+		{#if mode !== 'preview'}
+			<textarea
+				bind:this={textareaEl}
+				class="editor-pane"
+				spellcheck="false"
+				value={source}
+				on:input={onInput}
+				placeholder="Écris ton README en Markdown..."
+			></textarea>
+		{/if}
+
+		{#if mode !== 'edit'}
+			<div class="preview-pane">
+				<div class="markdown-body">
+					{@html html}
+				</div>
+			</div>
+		{/if}
+	</div>
+
+	<div class="status-bar">
+		<span>{wordCount} mots</span>
+		<span class="sep">·</span>
+		<span>{charCount} caractères</span>
+		<span class="sep">·</span>
+		<span>~{readMinutes} min de lecture</span>
+		<span class="sep">·</span>
+		<span class:dirty-text={dirty}>{dirty ? 'non enregistré' : 'à jour'}</span>
+	</div>
+</div>
+
+<style>
+	:root {
+		--bg: var(--bg-1);
+		--panel: var(--bg-blur);
+		--panel-alt: var(--bg-blur);
+		--border: var(--stroke);
+		--text: var(--font-1);
+		--muted: var(--font-2);
+		--amber: var(--orange);
+		--teal: var(--blur);
+		--code-bg: var(--bg-2);
+		--danger: var(--orange);
+	}
+
+	.readme-editor {
+		display: flex;
+		flex-direction: column;
+		height: 640px;
+		max-height: 90vh;
+		background: var(--bg);
+		color: var(--text);
+		border: 1px solid var(--border);
+		border-radius: 10px;
+		overflow: hidden;
+	}
+
+	
+
+	.view-toggle {
+		display: flex;
+		gap: 2px;
+		background: var(--bg-1);
+		border: 1px solid var(--border);
+		border-radius: var(--radius-xl);
+		padding: 2px;
+	}
+
+	
+
+	.toolbar {
+		display: flex;
+		align-items: center;
+		gap: 4px;
+		padding: 6px 10px;
+		background: var(--panel-alt);
+		border-bottom: 1px solid var(--border);
+		flex-shrink: 0;
+		overflow-x: auto;
+	}
+
+	.tool-btn {
+		border: 1px solid transparent;
+		background: transparent;
+		color: var(--muted);
+		font-size: 12px;
+		font-family: 'JetBrains Mono', ui-monospace, monospace;
+		padding: 5px 9px;
+		border-radius: 6px;
+		cursor: pointer;
+		white-space: nowrap;
+		transition:
+			background 0.15s,
+			color 0.15s,
+			border-color 0.15s;
+	}
+
+	.tool-btn:hover {
+		background: var(--panel);
+		color: var(--text);
+		border-color: var(--border);
+	}
+
+	.tool-btn:focus-visible {
+		outline: 2px solid var(--teal);
+		outline-offset: 1px;
+	}
+
+	
+
+	.spacer {
+		flex: 1;
+	}
+
+	.panes {
+		display: grid;
+		grid-template-columns: 1fr 1fr;
+		flex: 1;
+		min-height: 0;
+	}
+
+	.panes.single {
+		grid-template-columns: 1fr;
+	}
+
+	.editor-pane {
+		resize: none;
+		border: none;
+		outline: none;
+		background: var(--bg);
+		color: var(--text);
+		font-family: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;
+		font-size: 13.5px;
+		line-height: 1.65;
+		padding: 18px 20px;
+		border-right: 1px solid var(--border);
+	}
+
+	.panes.single .editor-pane {
+		border-right: none;
+	}
+
+	.editor-pane::placeholder {
+		color: var(--font-2);
+	}
+
+	.preview-pane {
+		overflow-y: auto;
+		padding: 18px 26px;
+		background: var(--panel);
+	}
+
+	.markdown-body {
+		max-width: 640px;
+		font-size: 14.5px;
+		line-height: 1.7;
+		color: var(--text);
+	}
+
+	.markdown-body :global(h1),
+	.markdown-body :global(h2),
+	.markdown-body :global(h3) {
+		font-family: 'Inter', sans-serif;
+		font-weight: 700;
+		color: var(--text);
+		margin: 1.1em 0 0.5em;
+		line-height: 1.3;
+	}
+
+	.markdown-body :global(h1) {
+		font-size: 1.7em;
+		border-bottom: 1px solid var(--border);
+		padding-bottom: 0.3em;
+	}
+
+	.markdown-body :global(h2) {
+		font-size: 1.32em;
+		border-bottom: 1px solid var(--border);
+		padding-bottom: 0.25em;
+	}
+
+	.markdown-body :global(h3) {
+		font-size: 1.1em;
+		color: var(--teal);
+	}
+
+	.markdown-body :global(p) {
+		margin: 0.6em 0;
+	}
+
+	.markdown-body :global(a) {
+		color: var(--teal);
+		text-decoration: none;
+		border-bottom: 1px solid rgba(79, 209, 197, 0.35);
+	}
+
+	.markdown-body :global(a:hover) {
+		border-bottom-color: var(--teal);
+	}
+
+	.markdown-body :global(code) {
+		background: var(--code-bg);
+		color: var(--amber);
+		padding: 0.15em 0.4em;
+		border-radius: 4px;
+		font-family: 'JetBrains Mono', ui-monospace, monospace;
+		font-size: 0.88em;
+	}
+
+	.markdown-body :global(.code-block) {
+		background: var(--code-bg);
+		border: 1px solid var(--border);
+		border-radius: 8px;
+		padding: 14px 16px;
+		overflow-x: auto;
+		margin: 0.8em 0;
+		position: relative;
+	}
+
+	.markdown-body :global(.code-block::before) {
+		content: attr(data-lang);
+		position: absolute;
+		top: 6px;
+		right: 10px;
+		font-size: 10px;
+		letter-spacing: 0.05em;
+		text-transform: uppercase;
+		color: var(--muted);
+	}
+
+	.markdown-body :global(.code-block code) {
+		background: none;
+		color: var(--text);
+		padding: 0;
+		font-size: 0.85em;
+	}
+
+	.markdown-body :global(blockquote) {
+		margin: 0.8em 0;
+		padding: 0.4em 1em;
+		border-left: 3px solid var(--amber);
+		color: var(--muted);
+		background: rgba(232, 179, 57, 0.05);
+	}
+
+	.markdown-body :global(ul),
+	.markdown-body :global(ol) {
+		margin: 0.6em 0;
+		padding-left: 1.4em;
+	}
+
+	.markdown-body :global(li) {
+		margin: 0.25em 0;
+	}
+
+	.markdown-body :global(li.task) {
+		list-style: none;
+		margin-left: -1.4em;
+		display: flex;
+		align-items: baseline;
+		gap: 6px;
+	}
+
+	.markdown-body :global(hr) {
+		border: none;
+		border-top: 1px solid var(--border);
+		margin: 1.4em 0;
+	}
+
+	.markdown-body :global(img) {
+		max-width: 100%;
+		border-radius: 6px;
+	}
+
+	.markdown-body :global(strong) {
+		color: var(--text);
+	}
+
+	.status-bar {
+		display: flex;
+		align-items: center;
+		gap: 6px;
+		padding: 6px 14px;
+		background: var(--panel);
+		border-top: 1px solid var(--border);
+		font-size: 11.5px;
+		color: var(--muted);
+		font-family: 'JetBrains Mono', ui-monospace, monospace;
+		flex-shrink: 0;
+	}
+
+	.sep {
+		opacity: 0.4;
+	}
+
+	.dirty-text {
+		color: var(--amber);
+	}
+
+	@media (max-width: 640px) {
+		.panes {
+			grid-template-columns: 1fr !important;
+			grid-auto-rows: 1fr;
+		}
+		.editor-pane {
+			border-right: none;
+			border-bottom: 1px solid var(--border);
+		}
+	}
+
+	.readme-editor :global(input[type='checkbox']) {
+		appearance: none;
+		-webkit-appearance: none;
+		width: 16px;
+		height: 16px;
+		flex-shrink: 0;
+		margin: 0;
+		border: 1.5px solid var(--border, #262c3a);
+		border-radius: 4px;
+		background: var(--code-bg, #0d0f16);
+		cursor: pointer;
+		position: relative;
+		transition:
+			background 0.15s,
+			border-color 0.15s;
+	}
+
+	.readme-editor :global(input[type='checkbox']:hover) {
+		border-color: var(--amber, #e8b339);
+	}
+
+	.readme-editor :global(input[type='checkbox']:checked) {
+		background: var(--amber, #e8b339);
+		border-color: var(--amber, #e8b339);
+	}
+
+	.readme-editor :global(input[type='checkbox']:checked::after) {
+		content: '';
+		position: absolute;
+		left: 4px;
+		top: 1px;
+		width: 4px;
+		height: 8px;
+		border: solid var(--font-1);
+		border-width: 0 2px 2px 0;
+		transform: rotate(45deg);
+	}
+
+	.readme-editor :global(input[type='checkbox']:focus-visible) {
+		outline: 2px solid var(--teal, #4fd1c5);
+		outline-offset: 2px;
+	}
+
+	/* état désactivé : même style, juste un peu estompé, pas grisé façon navigateur */
+	.readme-editor :global(input[type='checkbox']:disabled) {
+		cursor: default;
+		opacity: 0.85;
+	}
+
+	.readme-editor :global(input[type='checkbox']:disabled:checked) {
+		background: var(--amber, #e8b339);
+		border-color: var(--amber, #e8b339);
+	}
+</style>

package/src/components/hamzus-ui/Readme/ReadmePreview.svelte

@@ -0,0 +1,383 @@
+<script>
+	// ---------- État ----------
+	export let initialValue = `# Mon Projet
+
+> Une courte description qui donne envie de scroller.
+
+## Installation
+
+\`\`\`bash
+npm install mon-projet
+\`\`\`
+
+## Utilisation
+
+\`\`\`js
+import { run } from 'mon-projet'
+run()
+\`\`\`
+
+- [x] Setup du repo
+- [ ] Écrire les tests
+- [ ] Publier sur npm
+
+Voir la [documentation](https://example.com) pour plus de détails.
+`;
+	export let filename = 'README.md';
+
+	let source = initialValue;
+
+	$: html = renderMarkdown(source);
+
+	// ---------- Petit moteur markdown (sans dépendance) ----------
+	function escapeHtml(str) {
+		return str.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+	}
+
+	function renderInline(text) {
+		let t = escapeHtml(text);
+		t = t.replace(/`([^`]+)`/g, '<code>$1</code>');
+		t = t.replace(/!\[([^\]]*)\]\(([^)]+)\)/g, '<img alt="$1" src="$2" />');
+		t = t.replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2" target="_blank" rel="noopener">$1</a>');
+		t = t.replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>');
+		t = t.replace(/(^|[^*])\*([^*]+)\*(?!\*)/g, '$1<em>$2</em>');
+		t = t.replace(/~~([^~]+)~~/g, '<del>$1</del>');
+		return t;
+	}
+
+	function renderMarkdown(md) {
+		const lines = md.replace(/\r\n/g, '\n').split('\n');
+		let out = [];
+		let i = 0;
+		let inCodeBlock = false;
+		let codeLang = '';
+		let codeBuf = [];
+		let listBuf = [];
+		let listType = null;
+
+		function flushList() {
+			if (listBuf.length) {
+				const tag = listType === 'ol' ? 'ol' : 'ul';
+				out.push(`<${tag}>${listBuf.join('')}</${tag}>`);
+				listBuf = [];
+				listType = null;
+			}
+		}
+
+		while (i < lines.length) {
+			const line = lines[i];
+			const fence = line.match(/^```(.*)$/);
+
+			if (fence) {
+				if (!inCodeBlock) {
+					inCodeBlock = true;
+					codeLang = fence[1].trim();
+					codeBuf = [];
+				} else {
+					inCodeBlock = false;
+					out.push(
+						`<pre class="code-block" data-lang="${escapeHtml(codeLang || 'text')}"><code>${escapeHtml(codeBuf.join('\n'))}</code></pre>`
+					);
+				}
+				i++;
+				continue;
+			}
+			if (inCodeBlock) {
+				codeBuf.push(line);
+				i++;
+				continue;
+			}
+
+			const heading = line.match(/^(#{1,6})\s+(.*)$/);
+			if (heading) {
+				flushList();
+				const level = heading[1].length;
+				out.push(`<h${level}>${renderInline(heading[2])}</h${level}>`);
+				i++;
+				continue;
+			}
+
+			const quote = line.match(/^>\s?(.*)$/);
+			if (quote) {
+				flushList();
+				out.push(`<blockquote>${renderInline(quote[1])}</blockquote>`);
+				i++;
+				continue;
+			}
+
+			const hr = line.match(/^(-{3,}|\*{3,})\s*$/);
+			if (hr) {
+				flushList();
+				out.push('<hr />');
+				i++;
+				continue;
+			}
+
+			const taskItem = line.match(/^\s*[-*]\s+\[( |x|X)\]\s+(.*)$/);
+			if (taskItem) {
+				if (listType !== 'ul') {
+					flushList();
+					listType = 'ul';
+				}
+				const checked = taskItem[1].toLowerCase() === 'x';
+				listBuf.push(
+					`<li class="task"><input type="checkbox" disabled ${checked ? 'checked' : ''} />${renderInline(taskItem[2])}</li>`
+				);
+				i++;
+				continue;
+			}
+
+			const ulItem = line.match(/^\s*[-*]\s+(.*)$/);
+			if (ulItem) {
+				if (listType !== 'ul') {
+					flushList();
+					listType = 'ul';
+				}
+				listBuf.push(`<li>${renderInline(ulItem[1])}</li>`);
+				i++;
+				continue;
+			}
+
+			const olItem = line.match(/^\s*\d+\.\s+(.*)$/);
+			if (olItem) {
+				if (listType !== 'ol') {
+					flushList();
+					listType = 'ol';
+				}
+				listBuf.push(`<li>${renderInline(olItem[1])}</li>`);
+				i++;
+				continue;
+			}
+
+			if (line.trim() === '') {
+				flushList();
+				i++;
+				continue;
+			}
+
+			flushList();
+			out.push(`<p>${renderInline(line)}</p>`);
+			i++;
+		}
+		flushList();
+		if (inCodeBlock && codeBuf.length) {
+			out.push(`<pre class="code-block"><code>${escapeHtml(codeBuf.join('\n'))}</code></pre>`);
+		}
+		return out.join('\n');
+	}
+</script>
+
+<div class="readme-preview">
+
+	<div class="preview-pane">
+		<div class="markdown-body">
+			{@html html}
+		</div>
+	</div>
+</div>
+
+<style>
+	:root {
+		--bg: var(--bg-1);
+		--panel: var(--bg-blur);
+		--panel-alt: var(--bg-blur);
+		--border: var(--stroke);
+		--text: var(--font-1);
+		--muted: var(--font-3);
+		--amber: var(--orange);
+		--teal: var(--blur);
+		--code-bg: var(--bg-2);
+	}
+
+	.readme-preview {
+		display: flex;
+		flex-direction: column;
+		height: 640px;
+		max-height: 90vh;
+		background: var(--bg);
+		color: var(--text);
+		border: 1px solid var(--border);
+		border-radius: 10px;
+		overflow: hidden;
+		font-family:
+			'Inter',
+			-apple-system,
+			BlinkMacSystemFont,
+			'Segoe UI',
+			sans-serif;
+	}
+
+	.chrome {
+		display: flex;
+		align-items: center;
+		background: var(--panel);
+		border-bottom: 1px solid var(--border);
+		padding: 0 10px;
+		flex-shrink: 0;
+	}
+
+	.preview-pane {
+		flex: 1;
+		min-height: 0;
+		overflow-y: auto;
+		padding: 20px 28px;
+		background: var(--panel);
+	}
+
+	.markdown-body {
+		max-width: 640px;
+		font-size: 14.5px;
+		line-height: 1.7;
+		color: var(--text);
+	}
+
+	.markdown-body :global(h1),
+	.markdown-body :global(h2),
+	.markdown-body :global(h3) {
+		font-family: 'Inter', sans-serif;
+		font-weight: 700;
+		color: var(--text);
+		margin: 1.1em 0 0.5em;
+		line-height: 1.3;
+	}
+
+	.markdown-body :global(h1) {
+		font-size: 1.7em;
+		border-bottom: 1px solid var(--border);
+		padding-bottom: 0.3em;
+	}
+
+	.markdown-body :global(h2) {
+		font-size: 1.32em;
+		border-bottom: 1px solid var(--border);
+		padding-bottom: 0.25em;
+	}
+
+	.markdown-body :global(h3) {
+		font-size: 1.1em;
+		color: var(--teal);
+	}
+
+	.markdown-body :global(p) {
+		margin: 0.6em 0;
+	}
+
+	.markdown-body :global(a) {
+		color: var(--teal);
+		text-decoration: none;
+		border-bottom: 1px solid rgba(79, 209, 197, 0.35);
+	}
+
+	.markdown-body :global(a:hover) {
+		border-bottom-color: var(--teal);
+	}
+
+	.markdown-body :global(code) {
+		background: var(--code-bg);
+		color: var(--amber);
+		padding: 0.15em 0.4em;
+		border-radius: 4px;
+		font-family: 'JetBrains Mono', ui-monospace, monospace;
+		font-size: 0.88em;
+	}
+
+	.markdown-body :global(.code-block) {
+		background: var(--code-bg);
+		border: 1px solid var(--border);
+		border-radius: 8px;
+		padding: 14px 16px;
+		overflow-x: auto;
+		margin: 0.8em 0;
+		position: relative;
+	}
+
+	.markdown-body :global(.code-block::before) {
+		content: attr(data-lang);
+		position: absolute;
+		top: 6px;
+		right: 10px;
+		font-size: 10px;
+		letter-spacing: 0.05em;
+		text-transform: uppercase;
+		color: var(--muted);
+	}
+
+	.markdown-body :global(.code-block code) {
+		background: none;
+		color: var(--text);
+		padding: 0;
+		font-size: 0.85em;
+	}
+
+	.markdown-body :global(blockquote) {
+		margin: 0.8em 0;
+		padding: 0.4em 1em;
+		border-left: 3px solid var(--amber);
+		color: var(--muted);
+		background: rgba(232, 179, 57, 0.05);
+	}
+
+	.markdown-body :global(ul),
+	.markdown-body :global(ol) {
+		margin: 0.6em 0;
+		padding-left: 1.4em;
+	}
+
+	.markdown-body :global(li) {
+		margin: 0.25em 0;
+	}
+
+	.markdown-body :global(li.task) {
+		list-style: none;
+		margin-left: -1.4em;
+		display: flex;
+		align-items: baseline;
+		gap: 6px;
+	}
+
+	.markdown-body :global(hr) {
+		border: none;
+		border-top: 1px solid var(--border);
+		margin: 1.4em 0;
+	}
+
+	.markdown-body :global(img) {
+		max-width: 100%;
+		border-radius: 6px;
+	}
+
+	.markdown-body :global(strong) {
+		color: var(--text);
+	}
+
+	.readme-preview :global(input[type='checkbox']) {
+		appearance: none;
+		-webkit-appearance: none;
+		width: 16px;
+		height: 16px;
+		flex-shrink: 0;
+		margin: 0;
+		border: 1.5px solid var(--border, #262c3a);
+		border-radius: 4px;
+		background: var(--code-bg, #0d0f16);
+		cursor: default;
+		position: relative;
+	}
+
+	.readme-preview :global(input[type='checkbox']:checked) {
+		background: var(--amber, #e8b339);
+		border-color: var(--amber, #e8b339);
+	}
+
+	.readme-preview :global(input[type='checkbox']:checked::after) {
+		content: '';
+		position: absolute;
+		left: 4px;
+		top: 1px;
+		width: 4px;
+		height: 8px;
+		border: solid var(--font-1);
+		border-width: 0 2px 2px 0;
+		transform: rotate(45deg);
+	}
+</style>

package/src/components/hamzus-ui/ReadmePreview/ReadmePreview.svelte

@@ -0,0 +1,382 @@
+<script>
+	// ---------- État ----------
+	export let initialValue = `# Mon Projet
+
+> Une courte description qui donne envie de scroller.
+
+## Installation
+
+\`\`\`bash
+npm install mon-projet
+\`\`\`
+
+## Utilisation
+
+\`\`\`js
+import { run } from 'mon-projet'
+run()
+\`\`\`
+
+- [x] Setup du repo
+- [ ] Écrire les tests
+- [ ] Publier sur npm
+
+Voir la [documentation](https://example.com) pour plus de détails.
+`;
+
+	let source = initialValue;
+
+	$: html = renderMarkdown(source);
+
+	// ---------- Petit moteur markdown (sans dépendance) ----------
+	function escapeHtml(str) {
+		return str.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+	}
+
+	function renderInline(text) {
+		let t = escapeHtml(text);
+		t = t.replace(/`([^`]+)`/g, '<code>$1</code>');
+		t = t.replace(/!\[([^\]]*)\]\(([^)]+)\)/g, '<img alt="$1" src="$2" />');
+		t = t.replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2" target="_blank" rel="noopener">$1</a>');
+		t = t.replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>');
+		t = t.replace(/(^|[^*])\*([^*]+)\*(?!\*)/g, '$1<em>$2</em>');
+		t = t.replace(/~~([^~]+)~~/g, '<del>$1</del>');
+		return t;
+	}
+
+	function renderMarkdown(md) {
+		const lines = md.replace(/\r\n/g, '\n').split('\n');
+		let out = [];
+		let i = 0;
+		let inCodeBlock = false;
+		let codeLang = '';
+		let codeBuf = [];
+		let listBuf = [];
+		let listType = null;
+
+		function flushList() {
+			if (listBuf.length) {
+				const tag = listType === 'ol' ? 'ol' : 'ul';
+				out.push(`<${tag}>${listBuf.join('')}</${tag}>`);
+				listBuf = [];
+				listType = null;
+			}
+		}
+
+		while (i < lines.length) {
+			const line = lines[i];
+			const fence = line.match(/^```(.*)$/);
+
+			if (fence) {
+				if (!inCodeBlock) {
+					inCodeBlock = true;
+					codeLang = fence[1].trim();
+					codeBuf = [];
+				} else {
+					inCodeBlock = false;
+					out.push(
+						`<pre class="code-block" data-lang="${escapeHtml(codeLang || 'text')}"><code>${escapeHtml(codeBuf.join('\n'))}</code></pre>`
+					);
+				}
+				i++;
+				continue;
+			}
+			if (inCodeBlock) {
+				codeBuf.push(line);
+				i++;
+				continue;
+			}
+
+			const heading = line.match(/^(#{1,6})\s+(.*)$/);
+			if (heading) {
+				flushList();
+				const level = heading[1].length;
+				out.push(`<h${level}>${renderInline(heading[2])}</h${level}>`);
+				i++;
+				continue;
+			}
+
+			const quote = line.match(/^>\s?(.*)$/);
+			if (quote) {
+				flushList();
+				out.push(`<blockquote>${renderInline(quote[1])}</blockquote>`);
+				i++;
+				continue;
+			}
+
+			const hr = line.match(/^(-{3,}|\*{3,})\s*$/);
+			if (hr) {
+				flushList();
+				out.push('<hr />');
+				i++;
+				continue;
+			}
+
+			const taskItem = line.match(/^\s*[-*]\s+\[( |x|X)\]\s+(.*)$/);
+			if (taskItem) {
+				if (listType !== 'ul') {
+					flushList();
+					listType = 'ul';
+				}
+				const checked = taskItem[1].toLowerCase() === 'x';
+				listBuf.push(
+					`<li class="task"><input type="checkbox" disabled ${checked ? 'checked' : ''} />${renderInline(taskItem[2])}</li>`
+				);
+				i++;
+				continue;
+			}
+
+			const ulItem = line.match(/^\s*[-*]\s+(.*)$/);
+			if (ulItem) {
+				if (listType !== 'ul') {
+					flushList();
+					listType = 'ul';
+				}
+				listBuf.push(`<li>${renderInline(ulItem[1])}</li>`);
+				i++;
+				continue;
+			}
+
+			const olItem = line.match(/^\s*\d+\.\s+(.*)$/);
+			if (olItem) {
+				if (listType !== 'ol') {
+					flushList();
+					listType = 'ol';
+				}
+				listBuf.push(`<li>${renderInline(olItem[1])}</li>`);
+				i++;
+				continue;
+			}
+
+			if (line.trim() === '') {
+				flushList();
+				i++;
+				continue;
+			}
+
+			flushList();
+			out.push(`<p>${renderInline(line)}</p>`);
+			i++;
+		}
+		flushList();
+		if (inCodeBlock && codeBuf.length) {
+			out.push(`<pre class="code-block"><code>${escapeHtml(codeBuf.join('\n'))}</code></pre>`);
+		}
+		return out.join('\n');
+	}
+</script>
+
+<div class="readme-preview">
+
+	<div class="preview-pane">
+		<div class="markdown-body">
+			{@html html}
+		</div>
+	</div>
+</div>
+
+<style>
+	:root {
+		--bg: var(--bg-1);
+		--panel: var(--bg-blur);
+		--panel-alt: var(--bg-blur);
+		--border: var(--stroke);
+		--text: var(--font-1);
+		--muted: var(--font-3);
+		--amber: var(--orange);
+		--teal: var(--blur);
+		--code-bg: var(--bg-2);
+	}
+
+	.readme-preview {
+		display: flex;
+		flex-direction: column;
+		height: 640px;
+		max-height: 90vh;
+		background: var(--bg);
+		color: var(--text);
+		border: 1px solid var(--border);
+		border-radius: 10px;
+		overflow: hidden;
+		font-family:
+			'Inter',
+			-apple-system,
+			BlinkMacSystemFont,
+			'Segoe UI',
+			sans-serif;
+	}
+
+	.chrome {
+		display: flex;
+		align-items: center;
+		background: var(--panel);
+		border-bottom: 1px solid var(--border);
+		padding: 0 10px;
+		flex-shrink: 0;
+	}
+
+	.preview-pane {
+		flex: 1;
+		min-height: 0;
+		overflow-y: auto;
+		padding: 20px 28px;
+		background: var(--panel);
+	}
+
+	.markdown-body {
+		max-width: 640px;
+		font-size: 14.5px;
+		line-height: 1.7;
+		color: var(--text);
+	}
+
+	.markdown-body :global(h1),
+	.markdown-body :global(h2),
+	.markdown-body :global(h3) {
+		font-family: 'Inter', sans-serif;
+		font-weight: 700;
+		color: var(--text);
+		margin: 1.1em 0 0.5em;
+		line-height: 1.3;
+	}
+
+	.markdown-body :global(h1) {
+		font-size: 1.7em;
+		border-bottom: 1px solid var(--border);
+		padding-bottom: 0.3em;
+	}
+
+	.markdown-body :global(h2) {
+		font-size: 1.32em;
+		border-bottom: 1px solid var(--border);
+		padding-bottom: 0.25em;
+	}
+
+	.markdown-body :global(h3) {
+		font-size: 1.1em;
+		color: var(--teal);
+	}
+
+	.markdown-body :global(p) {
+		margin: 0.6em 0;
+	}
+
+	.markdown-body :global(a) {
+		color: var(--teal);
+		text-decoration: none;
+		border-bottom: 1px solid rgba(79, 209, 197, 0.35);
+	}
+
+	.markdown-body :global(a:hover) {
+		border-bottom-color: var(--teal);
+	}
+
+	.markdown-body :global(code) {
+		background: var(--code-bg);
+		color: var(--amber);
+		padding: 0.15em 0.4em;
+		border-radius: 4px;
+		font-family: 'JetBrains Mono', ui-monospace, monospace;
+		font-size: 0.88em;
+	}
+
+	.markdown-body :global(.code-block) {
+		background: var(--code-bg);
+		border: 1px solid var(--border);
+		border-radius: 8px;
+		padding: 14px 16px;
+		overflow-x: auto;
+		margin: 0.8em 0;
+		position: relative;
+	}
+
+	.markdown-body :global(.code-block::before) {
+		content: attr(data-lang);
+		position: absolute;
+		top: 6px;
+		right: 10px;
+		font-size: 10px;
+		letter-spacing: 0.05em;
+		text-transform: uppercase;
+		color: var(--muted);
+	}
+
+	.markdown-body :global(.code-block code) {
+		background: none;
+		color: var(--text);
+		padding: 0;
+		font-size: 0.85em;
+	}
+
+	.markdown-body :global(blockquote) {
+		margin: 0.8em 0;
+		padding: 0.4em 1em;
+		border-left: 3px solid var(--amber);
+		color: var(--muted);
+		background: rgba(232, 179, 57, 0.05);
+	}
+
+	.markdown-body :global(ul),
+	.markdown-body :global(ol) {
+		margin: 0.6em 0;
+		padding-left: 1.4em;
+	}
+
+	.markdown-body :global(li) {
+		margin: 0.25em 0;
+	}
+
+	.markdown-body :global(li.task) {
+		list-style: none;
+		margin-left: -1.4em;
+		display: flex;
+		align-items: baseline;
+		gap: 6px;
+	}
+
+	.markdown-body :global(hr) {
+		border: none;
+		border-top: 1px solid var(--border);
+		margin: 1.4em 0;
+	}
+
+	.markdown-body :global(img) {
+		max-width: 100%;
+		border-radius: 6px;
+	}
+
+	.markdown-body :global(strong) {
+		color: var(--text);
+	}
+
+	.readme-preview :global(input[type='checkbox']) {
+		appearance: none;
+		-webkit-appearance: none;
+		width: 16px;
+		height: 16px;
+		flex-shrink: 0;
+		margin: 0;
+		border: 1.5px solid var(--border, #262c3a);
+		border-radius: 4px;
+		background: var(--code-bg, #0d0f16);
+		cursor: default;
+		position: relative;
+	}
+
+	.readme-preview :global(input[type='checkbox']:checked) {
+		background: var(--amber, #e8b339);
+		border-color: var(--amber, #e8b339);
+	}
+
+	.readme-preview :global(input[type='checkbox']:checked::after) {
+		content: '';
+		position: absolute;
+		left: 4px;
+		top: 1px;
+		width: 4px;
+		height: 8px;
+		border: solid var(--font-1);
+		border-width: 0 2px 2px 0;
+		transform: rotate(45deg);
+	}
+</style>