hamzus-ui 0.0.244 → 0.0.246

package/package.json

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

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

@@ -3,45 +3,28 @@
 	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;
+	export let value = ``;
+	export let onChange = ()=>{};
+    let previousValue = value;
 	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;
+	$: wordCount = (value.match(/\S+/g) || []).length;
+	$: charCount = value.length;
 	$: readMinutes = Math.max(1, Math.round(wordCount / 200));
-	$: html = renderMarkdown(source);
+	$: html = renderMarkdown(value);
 
 	function onInput(e) {
-		source = e.target.value;
+		value = e.target.value;
 		dirty = true;
+        if (previousValue !== value) {
+            onChange(value)
+        }
+
+        previousValue = value
 	}
 
 	// ---------- Petit moteur markdown (sans dépendance) ----------
@@ -186,9 +169,9 @@ Voir la [documentation](https://example.com) pour plus de détails.
 		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;
+		const selected = value.slice(start, end) || placeholder;
+		const next = value.slice(0, start) + before + selected + after + value.slice(end);
+		value = next;
 		dirty = true;
 		requestAnimationFrame(() => {
 			textareaEl.focus();
@@ -200,8 +183,8 @@ Voir la [documentation](https://example.com) pour plus de détails.
 	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);
+		const lineStart = value.lastIndexOf('\n', start - 1) + 1;
+		value = value.slice(0, lineStart) + prefix + value.slice(lineStart);
 		dirty = true;
 		requestAnimationFrame(() => textareaEl.focus());
 	}
@@ -220,7 +203,7 @@ Voir la [documentation](https://example.com) pour plus de détails.
 
 	async function copyMarkdown() {
 		try {
-			await navigator.clipboard.writeText(source);
+			await navigator.clipboard.writeText(value);
 			copied = true;
 			setTimeout(() => (copied = false), 1600);
 		} catch (e) {
@@ -229,7 +212,7 @@ Voir la [documentation](https://example.com) pour plus de détails.
 	}
 
 	function downloadFile() {
-		const blob = new Blob([source], { type: 'text/markdown;charset=utf-8' });
+		const blob = new Blob([value], { type: 'text/markdown;charset=utf-8' });
 		const url = URL.createObjectURL(blob);
 		const a = document.createElement('a');
 		a.href = url;
@@ -262,7 +245,7 @@ Voir la [documentation](https://example.com) pour plus de détails.
 				bind:this={textareaEl}
 				class="editor-pane"
 				spellcheck="false"
-				value={source}
+				value={value}
 				on:input={onInput}
 				placeholder="Écris ton README en Markdown..."
 			></textarea>
@@ -305,8 +288,6 @@ Voir la [documentation](https://example.com) pour plus de détails.
 	.readme-editor {
 		display: flex;
 		flex-direction: column;
-		height: 640px;
-		max-height: 90vh;
 		background: var(--bg);
 		color: var(--text);
 		border: 1px solid var(--border);

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

@@ -191,8 +191,6 @@ Voir la [documentation](https://example.com) pour plus de détails.
 	.readme-preview {
 		display: flex;
 		flex-direction: column;
-		height: 640px;
-		max-height: 90vh;
 		background: var(--bg);
 		color: var(--text);
 		border: 1px solid var(--border);

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

@@ -1,383 +0,0 @@
-<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>