@hyvor/design 2.1.10 → 2.1.12

package/dist/components/Confetti/confetti.d.ts

@@ -0,0 +1,7 @@
+export declare function confetti(options?: {
+    particleCount?: number;
+    duration?: number;
+    zIndex?: number;
+}): {
+    stop: () => void;
+};

package/dist/components/Confetti/confetti.js

@@ -0,0 +1,102 @@
+export function confetti(options = {}) {
+    const { particleCount = 220, duration = 12000, zIndex = 20000000 } = options;
+    const gravity = 0.18;
+    const drag = 0.96;
+    const canvas = document.createElement('canvas');
+    canvas.style.position = 'fixed';
+    canvas.style.top = '0';
+    canvas.style.left = '0';
+    canvas.style.width = '100vw';
+    canvas.style.height = '100vh';
+    canvas.style.pointerEvents = 'none';
+    canvas.style.zIndex = String(zIndex);
+    document.body.appendChild(canvas);
+    const ctx = canvas.getContext('2d');
+    canvas.width = window.innerWidth;
+    canvas.height = window.innerHeight;
+    const colors = ['#ffba6b', '#8cdaff', '#b5ffb0', '#ff9090', '#ffbfff', '#d894ff', '#fff79b'];
+    const particles = [];
+    let animationFrameId;
+    let timeoutId = null;
+    let running = true;
+    const originX = canvas.width / 2;
+    const originY = canvas.height / 2;
+    const createParticle = () => {
+        const angle = Math.random() * Math.PI * 2;
+        const speed = Math.random() * 16 + 10;
+        return {
+            x: originX + (Math.random() - 0.5) * 40,
+            y: originY + (Math.random() - 0.5) * 40,
+            size: Math.random() * 9 + 5,
+            color: colors[Math.floor(Math.random() * colors.length)],
+            velocityX: Math.cos(angle) * speed,
+            velocityY: Math.sin(angle) * speed,
+            rotation: Math.random() * 360,
+            rotationSpeed: Math.random() * 12 - 6,
+            wobble: Math.random() * Math.PI * 2,
+            wobbleSpeed: Math.random() * 0.1 + 0.05
+        };
+    };
+    const drawParticle = (particle) => {
+        ctx.save();
+        ctx.translate(particle.x, particle.y);
+        ctx.rotate((particle.rotation * Math.PI) / 180);
+        ctx.fillStyle = particle.color;
+        ctx.beginPath();
+        ctx.roundRect(-particle.size / 2, -particle.size / 2, particle.size, particle.size, 1);
+        ctx.fill();
+        ctx.restore();
+    };
+    const updateParticles = () => {
+        for (const particle of particles) {
+            particle.velocityX *= drag;
+            particle.velocityY = particle.velocityY * drag + gravity;
+            particle.wobble += particle.wobbleSpeed;
+            particle.x += particle.velocityX + Math.sin(particle.wobble) * 0.8;
+            particle.y += particle.velocityY;
+            particle.rotation += particle.rotationSpeed;
+        }
+        const remaining = particles.filter((particle) => particle.y - particle.size <= canvas.height);
+        particles.length = 0;
+        particles.push(...remaining);
+    };
+    const render = () => {
+        if (!running)
+            return;
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+        for (const particle of particles)
+            drawParticle(particle);
+        updateParticles();
+        if (particles.length === 0) {
+            stopConfetti();
+            return;
+        }
+        animationFrameId = requestAnimationFrame(render);
+    };
+    let stopped = false;
+    const stopConfetti = () => {
+        if (stopped)
+            return;
+        stopped = true;
+        running = false;
+        cancelAnimationFrame(animationFrameId);
+        if (timeoutId !== null)
+            clearTimeout(timeoutId);
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+        canvas.remove();
+    };
+    const startConfetti = () => {
+        particles.length = 0;
+        for (let i = 0; i < particleCount; i++)
+            particles.push(createParticle());
+        running = true;
+        render();
+        if (duration > 0) {
+            timeoutId = window.setTimeout(stopConfetti, duration);
+        }
+    };
+    startConfetti();
+    return {
+        stop: stopConfetti
+    };
+}

package/dist/components/Dark/DarkProvider.svelte

@@ -11,8 +11,11 @@
 	<script>
 		// to prevent white screen on page load
 		// until the dark mode is initialized from the store
-		const isDarkMode = !!localStorage.getItem('hds-dark');
-		if (isDarkMode) {
+		var hdsStored = localStorage.getItem('hds-dark');
+		var hsdIsDarkMode = hdsStored
+			? !!hdsStored
+			: window.matchMedia('(prefers-color-scheme: dark)').matches;
+		if (hsdIsDarkMode) {
 			document.documentElement.classList.add('dark');
 		}
 	</script>

package/dist/components/NavLink/NavLinkGroup.svelte

@@ -98,6 +98,7 @@
 		observer.observe(container, {
 			attributes: true,
 			attributeFilter: ['class'],
+			childList: true,
 			subtree: true
 		});
 

package/dist/components/index.d.ts

@@ -16,6 +16,7 @@ export { highlightCode } from './CodeBlock/getCode.js';
 export { default as TabbedCodeBlock } from './CodeBlock/TabbedCodeBlock.svelte';
 export { default as ColorPicker } from './ColorPicker/ColorPicker.svelte';
 export { default as ConsoleLoader } from './ConsoleLoader/ConsoleLoader.svelte';
+export { confetti } from './Confetti/confetti.js';
 export { default as DarkProvider } from './Dark/DarkProvider.svelte';
 export { default as DarkToggle } from './Dark/DarkToggle.svelte';
 export { default as DetailCard } from './DetailCard/DetailCard.svelte';

package/dist/components/index.js

@@ -16,6 +16,7 @@ export { highlightCode } from './CodeBlock/getCode.js';
 export { default as TabbedCodeBlock } from './CodeBlock/TabbedCodeBlock.svelte';
 export { default as ColorPicker } from './ColorPicker/ColorPicker.svelte';
 export { default as ConsoleLoader } from './ConsoleLoader/ConsoleLoader.svelte';
+export { confetti } from './Confetti/confetti.js';
 export { default as DarkProvider } from './Dark/DarkProvider.svelte';
 export { default as DarkToggle } from './Dark/DarkToggle.svelte';
 export { default as DetailCard } from './DetailCard/DetailCard.svelte';

package/dist/marketing/Docs/Docs.svelte

@@ -38,19 +38,21 @@
 
 		const headings = contentEl.querySelectorAll<HTMLElement>('h2[id], h3[id], h4[id]');
 		for (const h of headings) {
+			if (h.querySelector(':scope > a.heading-anchor')) continue;
+
+			const id = h.getAttribute('id');
+			const link = document.createElement('a');
+			link.className = 'heading-anchor';
+			link.setAttribute('href', '#' + id);
+			link.append(...h.childNodes);
+
 			const icon = document.createElement('a');
 			icon.className = 'heading-anchor-link';
 			icon.innerHTML =
 				'<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-link-45deg" viewBox="0 0 16 16"><path d="M4.715 6.542 3.343 7.914a3 3 0 1 0 4.243 4.243l1.828-1.829A3 3 0 0 0 8.586 5.5L8 6.086a1.002 1.002 0 0 0-.154.199 2 2 0 0 1 .861 3.337L6.88 11.45a2 2 0 1 1-2.83-2.83l.793-.792a4.018 4.018 0 0 1-.128-1.287z"/><path d="M6.586 4.672A3 3 0 0 0 7.414 9.5l.775-.776a2 2 0 0 1-.896-3.346L9.12 3.55a2 2 0 1 1 2.83 2.83l-.793.792c.112.42.155.855.128 1.287l1.372-1.372a3 3 0 1 0-4.243-4.243L6.586 4.672z"/></svg>';
 			icon.tabIndex = -1;
-			h.appendChild(icon);
 
-			const id = h.getAttribute('id');
-			const link = document.createElement('a');
-			link.className = 'heading-anchor';
-			link.setAttribute('href', '#' + id);
-			link.innerHTML = h.innerHTML;
-			h.innerHTML = link.outerHTML;
+			h.replaceChildren(link, icon);
 		}
 	}
 

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@hyvor/design",
-	"version": "2.1.10",
+	"version": "2.1.12",
 	"license": "MIT",
 	"private": false,
 	"repository": {