super-svelte-skeleton 0.0.3

package/src/lib/features/theme-editor/ui/ThemeEditorWidget.svelte

@@ -0,0 +1,319 @@
+<script lang="ts">
+	import {
+		ArrowClockwise,
+		CodeSlash,
+		Copy,
+		Download,
+		Eye,
+		Save,
+		ArrowDownUp,
+	} from 'svelte-bootstrap-icons';
+	import { onMount } from 'svelte';
+	import { SvelteMap } from 'svelte/reactivity';
+	import { fade } from 'svelte/transition';
+	import axios from 'axios';
+	import { snackStore } from '@aryagg/ui-kit';
+	import { Tabs } from '@aryagg/ui-kit';
+	import { ETheme, THEMES_TABS } from '@aryagg/types';
+	import { deepClone } from '@aryagg/utils';
+	import ThemePreview      from './ThemePreview.svelte';
+	import TypographySettings from './TypographySettings.svelte';
+	import ColorCard          from './ColorCard.svelte';
+	import CSSOutput          from './CSSOutput.svelte';
+	import { THEME_FILES }          from '../constants';
+	import type { ThemeEntry, Tab } from '../types';
+	import { extractCSSVariables } from '../utils';
+
+	const DEFAULT_FONT = "'Inter', sans-serif";
+
+	let selectedTheme      = $state<ETheme>(ETheme.LIGHT);
+	let variables          = $state<ThemeEntry[]>([]);
+	let clonedVariables    = $state<ThemeEntry[]>([]);
+	let rightTab           = $state<Tab>('preview');
+	let copiedCss          = $state(false);
+	let copiedVar          = $state<string | null>(null);
+	let headingFontFamily  = $state(DEFAULT_FONT);
+	let bodyFontFamily     = $state(DEFAULT_FONT);
+	let savedHeadingFont   = $state(DEFAULT_FONT);
+	let savedBodyFont      = $state(DEFAULT_FONT);
+	let fileInput: HTMLInputElement;
+
+	const rightTabs = [
+		{ id: 'preview', label: 'App Preview', icon: Eye },
+		{ id: 'css',     label: 'CSS Output',  icon: CodeSlash },
+	];
+
+	let currentTheme = $derived(variables.find((v) => v.value === selectedTheme));
+
+	let allVars = $derived.by(() => {
+		const colors = currentTheme?.colors;
+		if (!colors) return [] as { varName: string; hex: string }[];
+		return Object.entries(colors).map(([varName, hex]) => ({ varName, hex: hex as string }));
+	});
+
+	let groupedVars = $derived.by(() => {
+		const colors = currentTheme?.colors;
+		if (!colors) return [] as [string, { varName: string; hex: string }[]][];
+		const map = new SvelteMap<string, { varName: string; hex: string }[]>();
+		for (const [varName, hex] of Object.entries(colors)) {
+			const seg   = varName.replace(/^--/, '').split('-')[0] ?? 'other';
+			const label = seg.charAt(0).toUpperCase() + seg.slice(1);
+			if (!map.has(label)) map.set(label, []);
+			map.get(label)!.push({ varName, hex: hex as string });
+		}
+		return [...map.entries()];
+	});
+
+	let cssText = $derived.by(() => {
+		if (!currentTheme) return '';
+		const lines = Object.entries(currentTheme.colors).map(([k, v]) => `  ${k}: ${v};`).join('\n');
+		return `:root {\n${lines}\n}`;
+	});
+
+	let isModified = $derived.by(() => {
+		const orig = clonedVariables.find((v) => v.value === selectedTheme);
+		const curr = variables.find((v) => v.value === selectedTheme);
+		if (!orig || !curr) return false;
+		return (
+			JSON.stringify(orig.colors) !== JSON.stringify(curr.colors) ||
+			headingFontFamily !== savedHeadingFont ||
+			bodyFontFamily    !== savedBodyFont
+		);
+	});
+
+	onMount(() => {
+		const themeLink = document.getElementById('theme-style') as HTMLLinkElement | null;
+		if (!themeLink) return;
+		const observer = new MutationObserver(() => {
+			selectedTheme = themeLink.href.includes('dark') ? ETheme.DARK : ETheme.LIGHT;
+		});
+		observer.observe(themeLink, { attributes: true, attributeFilter: ['href'] });
+		return () => observer.disconnect();
+	});
+
+	onMount(() => loadThemes());
+
+	async function loadThemes() {
+		await Promise.all(
+			THEME_FILES.map(async (theme) => {
+				const { data } = await axios.get(theme.href);
+				variables.push({ ...theme, colors: extractCSSVariables(data) });
+			}),
+		);
+		clonedVariables = deepClone(variables);
+	}
+
+	function updateColor(varName: string, hex: string) {
+		variables = variables.map((v) =>
+			v.value === selectedTheme ? { ...v, colors: { ...v.colors, [varName]: hex } } : v,
+		);
+	}
+
+	function handleHexInput(varName: string, e: Event) {
+		const input = e.target as HTMLInputElement;
+		let val = input.value.trim();
+		if (!val.startsWith('#')) val = '#' + val;
+		if (/^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/.test(val)) {
+			updateColor(varName, val.toLowerCase());
+		} else {
+			const entry = variables.find((v) => v.value === selectedTheme);
+			if (entry) input.value = entry.colors[varName] as string;
+		}
+	}
+
+	async function copyHex(varName: string, hex: string) {
+		await navigator.clipboard.writeText(hex);
+		copiedVar = varName;
+		setTimeout(() => (copiedVar = null), 1500);
+	}
+
+	async function copyCss() {
+		await navigator.clipboard.writeText(cssText);
+		copiedCss = true;
+		setTimeout(() => (copiedCss = false), 2000);
+	}
+
+	function exportCss() {
+		const blob = new Blob([cssText], { type: 'text/css' });
+		const url  = URL.createObjectURL(blob);
+		const a    = document.createElement('a');
+		a.href     = url;
+		a.download = `theme-${selectedTheme}.css`;
+		a.click();
+		URL.revokeObjectURL(url);
+	}
+
+	function handleImport(e: Event) {
+		const file = (e.target as HTMLInputElement).files?.[0];
+		if (!file) return;
+		const reader = new FileReader();
+		reader.onload = (ev) => {
+			const parsed = extractCSSVariables(ev.target?.result as string);
+			const entry  = variables.find((v) => v.value === selectedTheme);
+			if (entry) {
+				for (const [k, v] of Object.entries(parsed)) {
+					entry.colors[k] = v;
+					updateColor(k, v);
+				}
+				variables = [...variables];
+				snackStore.showSuccess('Theme imported successfully');
+			}
+		};
+		reader.readAsText(file);
+		(e.target as HTMLInputElement).value = '';
+	}
+
+	function saveTheme() {
+		const theme = variables.find((v) => v.value === selectedTheme);
+		if (!theme) return;
+		for (const [k, v] of Object.entries(theme.colors)) {
+			document.documentElement.style.setProperty(k, v as string);
+		}
+		document.documentElement.style.setProperty('--font-heading', headingFontFamily);
+		document.documentElement.style.setProperty('--font-family',  bodyFontFamily);
+		document.documentElement.style.setProperty('--font-body',    bodyFontFamily);
+		clonedVariables  = deepClone(variables);
+		savedHeadingFont = headingFontFamily;
+		savedBodyFont    = bodyFontFamily;
+		snackStore.showSuccess('Theme applied to page');
+	}
+
+	function resetTheme() {
+		const original = clonedVariables.find((v) => v.value === selectedTheme);
+		if (!original) return;
+		variables         = variables.map((v) => (v.value === selectedTheme ? deepClone(original) : v));
+		headingFontFamily = savedHeadingFont;
+		bodyFontFamily    = savedBodyFont;
+		snackStore.showInfo('Theme reset to saved state');
+	}
+</script>
+
+<svelte:head>
+	<link rel="preconnect" href="https://fonts.googleapis.com" />
+	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="anonymous" />
+	<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300..700&family=Instrument+Serif&family=JetBrains+Mono:wght@400..700&display=swap" rel="stylesheet" />
+</svelte:head>
+
+<input bind:this={fileInput} type="file" accept=".css" class="hidden" onchange={handleImport} />
+
+<div class="bg-surface-secondary flex size-full flex-col overflow-hidden">
+	<!-- ── Page Title Strip ── -->
+	<div class="bg-surface-secondary shrink-0 px-10 py-2.5">
+		<div class="flex items-center gap-4">
+			<div>
+				<h1 class="text-3xl font-bold text-primary tracking-widest">Theme Studio</h1>
+				<p class="text-tertiary text-xs leading-tight pl-2">Design tokens · CSS variables · Live preview</p>
+			</div>
+			<div class="ml-auto flex items-center gap-1.5">
+				<button onclick={() => fileInput.click()} class="btn btn-sm">
+					<ArrowDownUp width="13" /> Import
+				</button>
+				<button onclick={copyCss} class="btn btn-sm {copiedCss ? 'border-success/30 text-success' : ''}">
+					<Copy width="13" /> {copiedCss ? 'Copied!' : 'Copy CSS'}
+				</button>
+				<button onclick={exportCss} class="btn btn-sm">
+					<Download width="13" /> Export
+				</button>
+				<div class="bg-border-primary/50 mx-1 h-5 w-px shrink-0"></div>
+				<button onclick={resetTheme} disabled={!isModified} class="btn btn-sm">
+					<ArrowClockwise width="13" /> Reset
+				</button>
+				<button onclick={saveTheme} disabled={!isModified} class="btn btn-primary btn-sm">
+					<Save width="13" /> Save & Apply
+				</button>
+			</div>
+		</div>
+	</div>
+
+	<!-- ── Main Grid ── -->
+	<div class="grid min-h-0 flex-1 grid-cols-1 gap-2.5 overflow-hidden px-10 pt-2.5 pb-4 lg:grid-cols-5">
+
+		<!-- Typography panel -->
+		<TypographySettings bind:headingFontFamily bind:bodyFontFamily />
+
+		<!-- LEFT: Variable editor -->
+		<div class="border-border-primary bg-surface-primary flex h-full flex-col overflow-hidden rounded-2xl border shadow-sm lg:col-span-2">
+			<div class="border-border-primary/60 flex shrink-0 items-center gap-3 px-4 py-3">
+				<div class="min-w-0 flex-1">
+					<p class="text-sm font-semibold">CSS Variables</p>
+					<p class="text-tertiary text-[11px]">
+						{allVars.length} tokens · click swatch to edit
+						{#if isModified}<span class="text-warning font-medium"> · unsaved</span>{/if}
+					</p>
+				</div>
+				<div class="bg-surface-secondary flex shrink-0 gap-0.5 rounded-xl p-0.5 text-xs">
+					<Tabs tabs={THEMES_TABS} bind:active={selectedTheme} />
+				</div>
+			</div>
+
+			<div class="min-h-0 flex-1 overflow-y-auto p-4 pt-0">
+				{#if groupedVars.length === 0}
+					<div class="flex flex-col items-center justify-center gap-3 py-16">
+						<div class="border-border-primary border-t-accent size-8 animate-spin rounded-full border-2"></div>
+						<p class="text-tertiary text-xs">Loading variables…</p>
+					</div>
+				{:else}
+					<div class="flex flex-col gap-6">
+						{#each groupedVars as [group, entries] (group)}
+							<div class="card bg-surface-secondary/30!">
+								<div class="mb-3 flex items-center gap-2">
+									<p class="text-tertiary shrink-0 text-[10px] font-bold tracking-widest uppercase">{group}</p>
+									<div class="from-border-primary/50 h-px flex-1 bg-linear-to-r to-transparent"></div>
+									<span class="bg-surface-secondary text-tertiary rounded-full px-1.5 py-0.5 text-[9px] font-medium">{entries.length}</span>
+								</div>
+								<div class="grid grid-cols-2 gap-2 sm:grid-cols-3 xl:grid-cols-4">
+									{#each entries as entry (entry.varName)}
+										<ColorCard
+											varName={entry.varName}
+											hex={entry.hex}
+											copied={copiedVar === entry.varName}
+											onColorChange={(hex) => updateColor(entry.varName, hex)}
+											onHexInput={(e) => handleHexInput(entry.varName, e)}
+											onCopy={() => copyHex(entry.varName, entry.hex)}
+										/>
+									{/each}
+								</div>
+							</div>
+						{/each}
+					</div>
+				{/if}
+			</div>
+		</div>
+
+		<!-- RIGHT: Preview / CSS -->
+		<div class="border-border-primary bg-surface-secondary flex h-full flex-col overflow-hidden rounded-2xl border shadow-sm lg:col-span-2">
+			<div class="border-border-primary/60 flex shrink-0 items-center gap-2 px-4 py-3">
+				<div class="bg-surface-secondary flex gap-0.5 rounded-xl p-0.5 text-xs">
+					<Tabs tabs={rightTabs} bind:active={rightTab} />
+				</div>
+				{#if rightTab === 'css'}
+					<div class="ml-auto flex items-center gap-1.5">
+						<button
+							onclick={copyCss}
+							class="flex items-center gap-1.5 rounded-lg border px-3 py-1.5 text-xs font-medium transition-all
+								{copiedCss ? 'border-success/30 bg-success/10 text-success' : 'border-border-primary text-secondary hover:border-primary/30 hover:text-primary'}"
+						>
+							<Copy /> {copiedCss ? 'Copied!' : 'Copy'}
+						</button>
+						<button
+							onclick={exportCss}
+							class="border-border-primary text-secondary hover:border-primary/30 hover:text-primary flex items-center gap-1.5 rounded-lg border px-3 py-1.5 text-xs font-medium transition-colors"
+						>
+							<Download /> Export
+						</button>
+					</div>
+				{/if}
+			</div>
+
+			<div class="min-h-0 flex-1 overflow-auto">
+				{#if rightTab === 'css'}
+					<div in:fade={{ duration: 150 }}>
+						<CSSOutput {currentTheme} />
+					</div>
+				{:else}
+					<ThemePreview colors={currentTheme?.colors} />
+				{/if}
+			</div>
+		</div>
+	</div>
+</div>

package/src/lib/features/theme-editor/ui/ThemePreview.svelte

@@ -0,0 +1,121 @@
+<script lang="ts">
+	import type { IGenericObject } from '@aryagg/types';
+
+	let { colors }: { colors: IGenericObject | undefined } = $props();
+
+	let styleVars = $derived(
+		colors
+			? Object.entries(colors)
+					.map(([k, v]) => `${k}:${v}`)
+					.join(';')
+			: '',
+	);
+</script>
+
+<div
+	style={styleVars}
+	class="bg-surface-secondary text-primary flex h-full flex-col gap-3 overflow-y-auto p-4 pt-0 text-sm"
+>
+	<!-- Metric Card -->
+	<div class="card bg-surface-secondary/30!">
+		<p class="text-tertiary mb-4 text-[10px] font-bold tracking-widest uppercase">Card</p>
+		<div class="flex flex-col gap-4">
+			<div class="flex items-start justify-between gap-3">
+				<div>
+					<p class="text-tertiary mb-1 text-xs">Total Revenue</p>
+					<p class="text-[26px] font-bold leading-none tracking-tight">$48,295</p>
+					<p class="text-success mt-1.5 text-xs font-medium">↑ 8.2% this month</p>
+				</div>
+				<div class="bg-accent text-on-accent flex size-9 shrink-0 items-center justify-center rounded-xl text-sm font-bold">$</div>
+			</div>
+			<div>
+				<div class="mb-1.5 flex items-center justify-between">
+					<p class="text-tertiary text-[10px]">Goal progress</p>
+					<p class="text-primary text-[10px] font-semibold">72%</p>
+				</div>
+				<div class="bg-surface-secondary h-1.5 overflow-hidden rounded-full">
+					<div class="bg-accent h-full w-[72%] rounded-full"></div>
+				</div>
+			</div>
+		</div>
+	</div>
+
+	<!-- Form Controls -->
+	<div class="card bg-surface-secondary/30!">
+		<p class="text-tertiary mb-3 text-[10px] font-bold tracking-widest uppercase">Form Controls</p>
+		<div class="mb-3 grid grid-cols-2 gap-3">
+			<div class="form-group"><label for="pv-name">Full name *</label><input id="pv-name" type="text" placeholder="Alex Bennett" /></div>
+			<div class="form-group">
+				<label for="pv-email">Email</label>
+				<input id="pv-email" type="email" data-state="success" placeholder="alex@example.com" />
+				<small class="text-success pl-0.5">Looks good!</small>
+			</div>
+			<div class="form-group">
+				<label for="pv-err">Error state</label>
+				<input id="pv-err" type="text" data-state="error" value="bad@value" />
+				<small class="text-error pl-0.5">Invalid format</small>
+			</div>
+			<div class="form-group">
+				<label for="pv-role">Role</label>
+				<select id="pv-role"><option>Designer</option><option>Developer</option><option>Manager</option></select>
+			</div>
+			<div class="flex flex-wrap gap-x-5 gap-y-2">
+				<label class="flex cursor-pointer items-center gap-1.5 text-xs" style="text-transform:none;letter-spacing:normal;color:var(--text-primary)">
+					<input type="checkbox" checked /> Remember me
+				</label>
+				<label class="flex cursor-pointer items-center gap-1.5 text-xs" style="text-transform:none;letter-spacing:normal;color:var(--text-primary)">
+					<input type="checkbox" disabled /> Disabled
+				</label>
+			</div>
+			<div class="flex flex-wrap gap-x-5 gap-y-2">
+				<label class="flex cursor-pointer items-center gap-1.5 text-xs" style="text-transform:none;letter-spacing:normal;color:var(--text-primary)">
+					<input type="radio" name="pv-r" checked /> Option A
+				</label>
+				<label class="flex cursor-pointer items-center gap-1.5 text-xs" style="text-transform:none;letter-spacing:normal;color:var(--text-primary)">
+					<input type="radio" name="pv-r" /> Option B
+				</label>
+			</div>
+		</div>
+	</div>
+
+	<!-- Buttons -->
+	<div class="card bg-surface-secondary/30!">
+		<p class="text-tertiary mb-3 text-[10px] font-bold tracking-widest uppercase">Buttons</p>
+		<div class="flex flex-wrap gap-2">
+			<button class="btn btn-primary btn-sm">Primary</button>
+			<button class="btn btn-secondary btn-sm">Secondary</button>
+			<button class="btn btn-muted btn-sm">Muted</button>
+			<button class="btn btn-ghost btn-sm">Ghost</button>
+			<button class="btn btn-outline btn-sm">Outline</button>
+			<button class="btn btn-success btn-sm">Success</button>
+			<button class="btn btn-danger btn-sm">Danger</button>
+			<button class="btn btn-info btn-sm">Info</button>
+			<button class="btn btn-primary btn-sm" disabled>Disabled</button>
+		</div>
+	</div>
+
+	<!-- Badges -->
+	<div class="card bg-surface-secondary/30!">
+		<p class="text-tertiary mb-3 text-[10px] font-bold tracking-widest uppercase">Badges</p>
+		<div class="flex flex-wrap gap-2">
+			<span data-badge="success"><i></i>Active</span>
+			<span data-badge="warning"><i></i>Pending</span>
+			<span data-badge="error"><i></i>Failed</span>
+			<span data-badge="info"><i></i>Info</span>
+			<span data-badge="accent">Accent</span>
+			<span data-badge="outline">Draft</span>
+			<span data-badge>Archived</span>
+		</div>
+	</div>
+
+	<!-- Alerts -->
+	<div class="card bg-surface-secondary/30!">
+		<p class="text-tertiary mb-3 text-[10px] font-bold tracking-widest uppercase">Alerts</p>
+		<div class="grid grid-cols-2 gap-2">
+			<div data-alert="success"><i>✓</i> Saved successfully.</div>
+			<div data-alert="warning"><i>⚠</i> Low contrast detected.</div>
+			<div data-alert="error"><i>✕</i> Failed to apply theme.</div>
+			<div data-alert="info"><i>ℹ</i> 2 variables have no on-color.</div>
+		</div>
+	</div>
+</div>

package/src/lib/features/theme-editor/ui/TypographySettings.svelte

@@ -0,0 +1,73 @@
+<script lang="ts">
+	type FontPreset = { label: string; family: string };
+
+	let {
+		headingFontFamily = $bindable("'Inter', sans-serif"),
+		bodyFontFamily    = $bindable("'Inter', sans-serif"),
+	}: { headingFontFamily?: string; bodyFontFamily?: string } = $props();
+
+	const FONT_PRESETS: FontPreset[] = [
+		{ label: 'Inter',            family: "'Inter', sans-serif" },
+		{ label: 'Instrument Serif', family: "'Instrument Serif', Georgia, serif" },
+		{ label: 'JetBrains Mono',   family: "'JetBrains Mono', monospace" },
+		{ label: 'System',           family: 'system-ui, -apple-system, sans-serif' },
+	];
+
+	let selectedHeading = $derived(FONT_PRESETS.find((f) => f.family === headingFontFamily)?.label ?? 'Inter');
+	let selectedBody    = $derived(FONT_PRESETS.find((f) => f.family === bodyFontFamily)?.label ?? 'Inter');
+</script>
+
+<div class="border-border-primary bg-surface-primary flex h-full flex-col overflow-hidden rounded-2xl border shadow-sm">
+	<div class="border-border-primary/60 shrink-0 px-4 py-3">
+		<p class="text-sm font-semibold">Typography</p>
+		<p class="text-tertiary text-[11px]">Preview here · apply via Save & Apply</p>
+	</div>
+
+	<div class="flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto p-4 pt-0">
+		<!-- Heading Font -->
+		<div class="card bg-surface-secondary/30!">
+			<p class="text-tertiary mb-2.5 text-[10px] font-bold tracking-widest uppercase">Heading Font</p>
+			<div class="grid grid-cols-2 gap-2">
+				{#each FONT_PRESETS as f (f.label)}
+					<button
+						onclick={() => (headingFontFamily = f.family)}
+						class="flex flex-col items-start gap-1.5 rounded-xl border p-3 text-left transition-all duration-150
+							{selectedHeading === f.label ? 'border-accent/40 bg-accent/5 shadow-sm' : 'border-border-primary/60 hover:border-primary/20 hover:bg-surface-primary/60'}"
+					>
+						<span class="text-[22px] leading-none font-semibold" style="font-family:{f.family}">Aa</span>
+						<span class="w-full truncate text-[9px] leading-none tracking-widest uppercase {selectedHeading === f.label ? 'text-accent font-semibold' : 'text-tertiary'}">{f.label}</span>
+					</button>
+				{/each}
+			</div>
+		</div>
+
+		<!-- Body Font -->
+		<div class="card bg-surface-secondary/30!">
+			<p class="text-tertiary mb-2.5 text-[10px] font-bold tracking-widest uppercase">Body Font</p>
+			<div class="grid grid-cols-2 gap-2">
+				{#each FONT_PRESETS as f (f.label)}
+					<button
+						onclick={() => (bodyFontFamily = f.family)}
+						class="flex flex-col items-start gap-1.5 rounded-xl border p-3 text-left transition-all duration-150
+							{selectedBody === f.label ? 'border-accent/40 bg-accent/5 shadow-sm' : 'border-border-primary/60 hover:border-primary/20 hover:bg-surface-primary/60'}"
+					>
+						<span class="text-[22px] leading-none" style="font-family:{f.family}">Aa</span>
+						<span class="w-full truncate text-[9px] leading-none tracking-widest uppercase {selectedBody === f.label ? 'text-accent font-semibold' : 'text-tertiary'}">{f.label}</span>
+					</button>
+				{/each}
+			</div>
+		</div>
+
+		<!-- Live preview -->
+		<div class="card bg-surface-secondary/30!">
+			<p class="text-tertiary mb-2.5 text-[10px] font-bold tracking-widest uppercase">Preview</p>
+			<div class="border-border-primary/60 bg-surface-primary flex flex-col gap-1 rounded-xl border px-4 py-3">
+				<p class="text-2xl leading-tight font-bold" style="font-family:{headingFontFamily}">Heading One</p>
+				<p class="text-secondary text-lg font-semibold" style="font-family:{headingFontFamily}">Heading Two</p>
+				<p class="text-sm font-medium" style="font-family:{bodyFontFamily}">Body text — medium weight</p>
+				<p class="text-secondary text-xs leading-relaxed" style="font-family:{bodyFontFamily}">Regular body text.</p>
+				<p class="text-tertiary text-xs" style="font-family:{bodyFontFamily}">Caption · tertiary · metadata</p>
+			</div>
+		</div>
+	</div>
+</div>

package/src/lib/features/theme-editor/utils.ts

@@ -0,0 +1,10 @@
+export function extractCSSVariables(css: string): Record<string, string> {
+	const cleaned = css.replace(/\/\*[\s\S]*?\*\//g, '');
+	const vars: Record<string, string> = {};
+	const regex = /(--[\w-]+)\s*:\s*([^;]+);/g;
+	let m: RegExpExecArray | null;
+	while ((m = regex.exec(cleaned)) !== null) {
+		if (m[1] && m[2]) vars[m[1].trim()] = m[2].trim();
+	}
+	return vars;
+}

package/src/lib/shared/api/client.ts

@@ -0,0 +1,47 @@
+// Configured axios instance — import httpClient instead of creating new instances.
+// Intentionally has NO UI imports (no snackStore). UI side-effects belong in the
+// entity service layer, not in transport infrastructure.
+
+import axios from 'axios';
+import { env } from '$env/dynamic/public';
+import { getItem, removeItem } from '@aryagg/utils';
+import { EStorageKey } from '@aryagg/types';
+import { API_TIMEOUT } from './types';
+
+let _token: string | null = null;
+
+/** Call this from the auth entity after login/logout to keep the in-memory token in sync. */
+export function setAuthToken(token: string | null) {
+	_token = token;
+}
+
+export const httpClient = axios.create({
+	baseURL: env.PUBLIC_API_URL,
+	timeout: API_TIMEOUT,
+	headers: { 'Content-Type': 'application/json' },
+});
+
+// Attach Bearer token on every request.
+// Prefers the in-memory mirror; falls back to localStorage for the edge case where
+// an API call fires before the auth entity has synced the store (e.g. page reload).
+httpClient.interceptors.request.use((config) => {
+	let token = _token;
+	if (!token && typeof localStorage !== 'undefined') {
+		const raw = getItem(EStorageKey.AUTH_USER);
+		token = raw ? (JSON.parse(raw) as { token?: string }).token ?? null : null;
+	}
+	if (token) config.headers['kuki'] = token;
+	return config;
+});
+
+// On 401: clear stale credentials silently.
+// The entity service layer decides whether to show a toast.
+httpClient.interceptors.response.use(
+	(response) => response,
+	(error) => {
+		if (error?.response?.status === 401) {
+			removeItem(EStorageKey.AUTH_USER);
+		}
+		return Promise.reject(error);
+	},
+);

package/src/lib/shared/api/index.ts

@@ -0,0 +1,3 @@
+export { httpClient, setAuthToken } from './client';
+export type { IApiResult } from './types';
+export { HttpStatus, HttpMethod, API_TIMEOUT } from './types';

package/src/lib/shared/api/types.ts

@@ -0,0 +1,25 @@
+export enum HttpStatus {
+	OK = 200,
+	CREATED = 201,
+	BAD_REQUEST = 400,
+	UNAUTHORIZED = 401,
+	FORBIDDEN = 403,
+	NOT_FOUND = 404,
+	INTERNAL_SERVER_ERROR = 500,
+}
+
+export enum HttpMethod {
+	GET = 'GET',
+	POST = 'POST',
+	PUT = 'PUT',
+	PATCH = 'PATCH',
+	DELETE = 'DELETE',
+}
+
+export const API_TIMEOUT = 30_000;
+
+export interface IApiResult<T> {
+	ok: boolean;
+	data: T | null;
+	error: string | null;
+}

package/src/lib/shared/config/api.ts

@@ -0,0 +1 @@
+export const AUTH_COOKIE_NAME = 'auth_session';

package/src/lib/shared/config/index.ts

@@ -0,0 +1,2 @@
+export * from './routes';
+export * from './api';

package/src/lib/shared/config/routes.ts

@@ -0,0 +1,18 @@
+import { resolve } from '$app/paths';
+
+// ── Auth routes ───────────────────────────────────────
+export const LOGIN_ROUTE = resolve('/login', {});
+export const REGISTER_ROUTE = resolve('/register', {});
+export const LOGOUT_ROUTE = resolve('/logout', {});
+export const FORGOT_PASSWORD_ROUTE = resolve('/forgot-password', {});
+export const RESET_PASSWORD_ROUTE = resolve('/reset-password', {});
+
+// ── App routes ────────────────────────────────────────
+export const DASHBOARD_ROUTE = resolve('/', {});
+export const PROFILE_ROUTE = resolve('/profile', {});
+export const SETTINGS_ROUTE = resolve('/settings', {});
+export const THEME_ROUTE = resolve('/theme', {});
+
+// ── Admin routes ──────────────────────────────────────
+export const ADMIN_ROUTE = resolve('/admin', {});
+export const ADMIN_USERS_ROUTE = resolve('/admin/users', {});

package/src/lib/shared/i18n/index.ts

@@ -0,0 +1 @@
+export { getLocale, setLocale, locales, getTextDirection } from '$paraglide/runtime';

package/src/lib/shared/index.ts

@@ -0,0 +1,2 @@
+export * from './api';
+export * from './config';

package/src/lib/tailwind.config.ts

@@ -0,0 +1,28 @@
+// Project-level Tailwind config.
+// Extends the shared @aryagg/theme palette with app-specific colors.
+// Note: no 'content' needed — scanning is handled by @source in app.css since v4 ignores it.
+
+import type { Config } from 'tailwindcss';
+
+const config: Config = {
+    // Dark mode is toggled by adding/removing .dark on <html>
+    darkMode: 'class',
+
+    theme: {
+        extend: {
+            colors: {
+                // Add your project colors here — they sit alongside
+                // the theme colors (accent, surface, primary, etc.)
+                brand: {
+                    DEFAULT: '#6366f1',
+                    light: '#818cf8',
+                    dark: '#4f46e5',
+                },
+            }
+        }
+    },
+
+    plugins: []
+};
+
+export default config;