fractalstyler2 0.7.1 → 0.8.0

package/README.md

@@ -28,7 +28,7 @@ the generators — the literal ladder and the responsive seam — before compili
 Tokens (L0) ──► Dimensions (L1) ──► Containers (L2) ──► Layouts (L3) ──► Shells (L4) ──► Visuals (L5)
 ```
 
-1. **Tokens (L0)**: 31 semantic colour tokens, 41 themes, and fluid Utopia typography/space scales.
+1. **Tokens (L0)**: 31 semantic colour tokens, 76 paired themes, and fluid Utopia typography/space scales.
 2. **Dimensions (L1)**: 17 space families (`.gap-sm`, `.pad-md`, `.marg-xs`), negative margins (`.marg--sm`), literal pixel utilities (`.w-120`, `.radius-8`), and `-mob` / `-desk` bands.
 3. **Containers (L2)**: Flexible flow primitives (`.box`, `.row`, `.grid`) with strict physical X/Y axis alignment (`.xcenter`, `.ycenter`, `.xbetween`).
 4. **Layouts (L3)**: Gridding Golden Rules ($3\to1$, $4\to2\to1$, $6\to3\to2\to1$), `.card-grid`, reading measure `.prose`, and scroll-snap `.reel`.
@@ -89,7 +89,7 @@ In your root layout (`src/routes/+layout.svelte`):
 </script>
 
 <svelte:head>
-  {@html `<script>${getPresetScript()}</script>`}
+  {@html `<script>${getPresetScript()}<\/script>`}
 </svelte:head>
 
 {@render children()}
@@ -132,7 +132,7 @@ pnpm registry
 | Chapter | Document | Scope & Contents |
 |:---|:---|:---|
 | **01** | [**`01-introduction.md`**](./docs/01-introduction.md) | Philosophy, $L0 \to L5$ mental model, and design invariants. |
-| **02** | [**`02-getting-started.md`**](./docs/02-getting-started.md) | Installation (CSS or SASS), CLI init, SvelteKit setup, and the 41 built-in themes. |
+| **02** | [**`02-getting-started.md`**](./docs/02-getting-started.md) | Installation (CSS or SASS), CLI init, SvelteKit setup, and the 76 built-in themes. |
 | **03** | [**`03-structure.md`**](./docs/03-structure.md) | Numbered physical scale (`_00` through `_08`) and cascade order. |
 | **04** | [**`04-tokens.md`**](./docs/04-tokens.md) | 30 semantic colors, fluid Utopia scales, and dark/light modes. |
 | **05** | [**`05-dimensions.md`**](./docs/05-dimensions.md) | 17 space families, the literal px ladder, and `-mob`/`-desk` bands. |
@@ -144,6 +144,7 @@ pnpm registry
 | **11** | [**`11-mcp-server.md`**](./docs/11-mcp-server.md) | Model Context Protocol server tools and agent connection configs. |
 | **12** | [**`12-agent-plugin.md`**](./docs/12-agent-plugin.md) | `agent-plugins.org` spec, the bundled `fractal-styler` skill. |
 | **13** | [**`13-cookbook.md`**](./docs/13-cookbook.md) | The Zero-SASS Recipe Gallery: real-world UI patterns composed in HTML. |
+| **14** | [**`14-api.md`**](./docs/14-api.md) | Complete API reference: entry points, runtime functions, reactive state, and components. |
 | **Registry** | [**`REGISTRY.md`**](./REGISTRY.md) | Comprehensive, grepable class dictionary and token table. |
 
 ---

package/dist/components/ModeToggle.svelte

@@ -0,0 +1,53 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import { presets, initPresets, toggleMode, toggleThemeMode } from '../presets.svelte.js';
+
+	/**
+	 * `palettes` — when a theme is applied, swap to its light/dark twin instead
+	 * of only flipping the mode. Off by default: plain mode is the common case,
+	 * and most palettes have no twin to swap to.
+	 */
+	let { class: className = '', palettes = false }: { class?: string; palettes?: boolean } =
+		$props();
+
+	onMount(() => initPresets());
+
+	const dark = $derived(presets.mode === 'dark');
+</script>
+
+<button
+	type="button"
+	class="button ghost {className}"
+	aria-pressed={dark}
+	aria-label={dark ? 'Switch to light mode' : 'Switch to dark mode'}
+	title={dark ? 'Light mode' : 'Dark mode'}
+	onclick={() => (palettes ? toggleThemeMode() : toggleMode())}
+>
+	<svg width="16" height="16" viewBox="0 0 19 19" aria-hidden="true">
+		{#if dark}
+			<!-- Sun: filled core, eight rays -->
+			<circle cx="9.5" cy="9.5" r="3.75" fill="currentColor" />
+			{#each [0, 45, 90, 135, 180, 225, 270, 315] as angle}
+				<line
+					x1="9.5"
+					y1="1.75"
+					x2="9.5"
+					y2="3.5"
+					stroke="currentColor"
+					stroke-width="1.5"
+					stroke-linecap="round"
+					transform="rotate({angle} 9.5 9.5)"
+				/>
+			{/each}
+		{:else}
+			<!-- Moon: one circle bitten by another, as a single path -->
+			<path
+				d="M13.5 11.9A6.25 6.25 0 0 1 7.1 5.5a6.25 6.25 0 1 0 6.4 6.4Z"
+				fill="currentColor"
+				stroke="currentColor"
+				stroke-width="1.5"
+				stroke-linejoin="round"
+			/>
+		{/if}
+	</svg>
+</button>

package/dist/components/ModeToggle.svelte.d.ts

@@ -0,0 +1,7 @@
+type $$ComponentProps = {
+    class?: string;
+    palettes?: boolean;
+};
+declare const ModeToggle: import("svelte").Component<$$ComponentProps, {}, "">;
+type ModeToggle = ReturnType<typeof ModeToggle>;
+export default ModeToggle;

package/dist/components/ThemePicker.svelte

@@ -0,0 +1,175 @@
+<script lang="ts">
+	import { onMount, type Snippet } from 'svelte';
+	import { presets, initPresets, setTheme, themes } from '../presets.svelte.js';
+	import ModeToggle from './ModeToggle.svelte';
+
+	/**
+	 * A popover palette picker over all built-in themes.
+	 *
+	 * Every theme card wears its own theme class, so the swatches inside it are
+	 * that palette rendering itself — not a hardcoded preview. Composed entirely
+	 * from registry classes; there is no stylesheet behind this component.
+	 */
+	interface Props {
+		class?: string;
+		/** Start the mode filter on one side. Users can still switch it. */
+		filter?: 'all' | 'light' | 'dark';
+		/** Show the light/dark toggle inside the panel. */
+		showModeToggle?: boolean;
+		/** Replace the default palette-glyph trigger. */
+		trigger?: Snippet;
+		[key: string]: unknown;
+	}
+
+	let {
+		class: className = '',
+		filter = 'all',
+		showModeToggle = true,
+		trigger,
+		...rest
+	}: Props = $props();
+
+	let open = $state(false);
+	// `filter` seeds the initial value only; the user drives it after that.
+	// svelte-ignore state_referenced_locally
+	let mode = $state<'all' | 'light' | 'dark'>(filter);
+	let query = $state('');
+	let root = $state<HTMLDivElement | null>(null);
+
+	onMount(() => {
+		initPresets();
+		const onClick = (e: MouseEvent) => {
+			if (open && root && !root.contains(e.target as Node)) open = false;
+		};
+		const onKey = (e: KeyboardEvent) => {
+			if (e.key === 'Escape' && open) open = false;
+		};
+		window.addEventListener('click', onClick);
+		window.addEventListener('keydown', onKey);
+		return () => {
+			window.removeEventListener('click', onClick);
+			window.removeEventListener('keydown', onKey);
+		};
+	});
+
+	// theme-nordic-frost-light -> Nordic Frost Light
+	const title = (id: string) =>
+		id
+			.replace(/^theme-/, '')
+			.split('-')
+			.map((w) => w[0].toUpperCase() + w.slice(1))
+			.join(' ');
+
+	const shown = $derived.by(() => {
+		const byMode = mode === 'all' ? themes : themes.filter((t) => t.mode === mode);
+		const q = query.trim().toLowerCase();
+		return q ? byMode.filter((t) => t.id.toLowerCase().includes(q)) : byMode;
+	});
+</script>
+
+<div class="relative {className}" bind:this={root} {...rest}>
+	<button
+		type="button"
+		class="button ghost"
+		aria-expanded={open}
+		aria-haspopup="true"
+		aria-label="Choose a palette"
+		title="Palette"
+		onclick={() => (open = !open)}
+	>
+		{#if trigger}
+			{@render trigger()}
+		{:else}
+			<svg width="16" height="16" viewBox="0 0 19 19" aria-hidden="true">
+				<circle cx="9.5" cy="9.5" r="7.75" fill="none" stroke="currentColor" stroke-width="1.5" />
+				<circle cx="9.5" cy="5.75" r="1.5" fill="currentColor" />
+				<circle cx="13.25" cy="9.5" r="1.5" fill="currentColor" />
+				<circle cx="6" cy="8" r="1.5" fill="currentColor" />
+				<circle cx="8" cy="13" r="1.5" fill="currentColor" />
+			</svg>
+		{/if}
+	</button>
+
+	<div class="popover box gap-8 pad-8 w-320" class:open>
+		<div class="row ycenter xbetween gap-8">
+			<div class="row gap-2" role="group" aria-label="Filter palettes by mode">
+				{#each ['all', 'light', 'dark'] as m (m)}
+					<button
+						type="button"
+						class="button ghost text-xs"
+						class:active={mode === m}
+						aria-pressed={mode === m}
+						onclick={() => (mode = m as typeof mode)}
+					>
+						{m}
+					</button>
+				{/each}
+			</div>
+			{#if showModeToggle}
+				<ModeToggle />
+			{/if}
+		</div>
+
+		<input
+			class="input text-xs"
+			type="search"
+			placeholder="Search palettes"
+			aria-label="Search palettes"
+			bind:value={query}
+		/>
+
+		<!-- One column on purpose: .grid-3 would collapse to 1 at this width
+		     anyway (gridding golden rule), so a row card reads better. -->
+		<div class="box gap-2 scroll-y h-256">
+			{#each shown as theme (theme.id)}
+				{@const active = presets.theme === theme.id}
+				<button
+					type="button"
+					class="{theme.id} row ycenter gap-4 pad-4 bg border"
+					aria-pressed={active}
+					title={title(theme.id)}
+					onclick={() => setTheme(theme.id)}
+				>
+					<span class="row gap-1 ycenter shrink-0">
+						<span class="surface border-subtle w-12 h-12"></span>
+						<span class="raised border-subtle w-12 h-12"></span>
+						<span class="panel border-subtle w-12 h-12"></span>
+						<span class="text-theme row ycenter">
+							<svg width="12" height="12" viewBox="0 0 12 12" aria-hidden="true">
+								<circle cx="6" cy="6" r="5" fill="currentColor" />
+							</svg>
+						</span>
+					</span>
+					<span class="box xleft grow min0">
+						<span class="text-xs text-primary truncate wfull">{title(theme.id)}</span>
+					</span>
+					{#if active}
+						<svg
+							width="12"
+							height="12"
+							viewBox="0 0 12 12"
+							aria-hidden="true"
+							class="text-theme shrink-0"
+						>
+							<path
+								d="M2.5 6.5 5 9l4.5-5.5"
+								fill="none"
+								stroke="currentColor"
+								stroke-width="1.75"
+								stroke-linecap="round"
+								stroke-linejoin="round"
+							/>
+						</svg>
+					{/if}
+				</button>
+			{/each}
+		</div>
+
+		<div class="row ycenter xbetween gap-8">
+			<span class="text-xs text-muted">{shown.length} {shown.length === 1 ? 'palette' : 'palettes'}</span>
+			<button type="button" class="button ghost text-xs" onclick={() => setTheme(null)}>
+				Reset
+			</button>
+		</div>
+	</div>
+</div>

package/dist/components/ThemePicker.svelte.d.ts

@@ -0,0 +1,21 @@
+import { type Snippet } from 'svelte';
+/**
+ * A popover palette picker over all built-in themes.
+ *
+ * Every theme card wears its own theme class, so the swatches inside it are
+ * that palette rendering itself — not a hardcoded preview. Composed entirely
+ * from registry classes; there is no stylesheet behind this component.
+ */
+interface Props {
+    class?: string;
+    /** Start the mode filter on one side. Users can still switch it. */
+    filter?: 'all' | 'light' | 'dark';
+    /** Show the light/dark toggle inside the panel. */
+    showModeToggle?: boolean;
+    /** Replace the default palette-glyph trigger. */
+    trigger?: Snippet;
+    [key: string]: unknown;
+}
+declare const ThemePicker: import("svelte").Component<Props, {}, "">;
+type ThemePicker = ReturnType<typeof ThemePicker>;
+export default ThemePicker;