fractalstyler2 0.4.0 → 0.7.0

package/dist/components/AppShell.svelte

@@ -0,0 +1,86 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	/**
+	 * The canonical application shell, from canonical-markups.md §1 and §2.
+	 *
+	 * The point of this component is not convenience — the classes work by hand.
+	 * It is that an L4 class without its markup is half a definition: the rails
+	 * retract, the drawer opens and the TOC folds because of the *structure*,
+	 * not because of anything you wire. Approximating the structure is where
+	 * people quietly lose the behaviour and start inventing classes to get it
+	 * back. This emits the structure exactly.
+	 *
+	 * Everything here is registry classes. There is no style block, and adding
+	 * one would defeat the purpose.
+	 */
+	interface Props {
+		/** Sticky top bar. Omit for a shell with no chrome. */
+		header?: Snippet;
+		/** Left rail — navigation. Visible ≥1024px, drawer below. */
+		sidebarLeft?: Snippet;
+		/** Right rail — table of contents. Visible ≥1280px, folds to `mobileToc`. */
+		sidebarRight?: Snippet;
+		/** The page-top disclosure the right rail retracts into below 1280px. */
+		mobileToc?: Snippet;
+		/** Bottom bar. */
+		footer?: Snippet;
+		/** Page content. Wrapped in `.content-shell` unless `bounded` is false. */
+		children: Snippet;
+		/**
+		 * Whether the left rail is showing as a drawer. Only has an effect below
+		 * 1024px, where the rail is off-canvas. Bind it to your menu button.
+		 */
+		open?: boolean;
+		/** Set false to drop `.content-shell` and let content run full width. */
+		bounded?: boolean;
+		class?: string;
+	}
+
+	let {
+		header,
+		sidebarLeft,
+		sidebarRight,
+		mobileToc,
+		footer,
+		children,
+		open = $bindable(false),
+		bounded = true,
+		class: className = ''
+	}: Props = $props();
+</script>
+
+<div class="app-shell {className}" class:open>
+	{#if header}
+		<header class="app-header row ycenter xbetween gap-sm">
+			{@render header()}
+		</header>
+	{/if}
+
+	<main class="app-main">
+		{#if sidebarLeft}
+			<aside class="sidebar-left">{@render sidebarLeft()}</aside>
+		{/if}
+
+		<section class="main-section">
+			{#if mobileToc}
+				<details class="mobile-toc">{@render mobileToc()}</details>
+			{/if}
+			{#if bounded}
+				<article class="content-shell">{@render children()}</article>
+			{:else}
+				{@render children()}
+			{/if}
+		</section>
+
+		{#if sidebarRight}
+			<aside class="sidebar-right">{@render sidebarRight()}</aside>
+		{/if}
+	</main>
+
+	{#if footer}
+		<footer class="app-footer row ycenter xbetween text-xs text-muted">
+			{@render footer()}
+		</footer>
+	{/if}
+</div>

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

@@ -0,0 +1,39 @@
+import type { Snippet } from 'svelte';
+/**
+ * The canonical application shell, from canonical-markups.md §1 and §2.
+ *
+ * The point of this component is not convenience — the classes work by hand.
+ * It is that an L4 class without its markup is half a definition: the rails
+ * retract, the drawer opens and the TOC folds because of the *structure*,
+ * not because of anything you wire. Approximating the structure is where
+ * people quietly lose the behaviour and start inventing classes to get it
+ * back. This emits the structure exactly.
+ *
+ * Everything here is registry classes. There is no style block, and adding
+ * one would defeat the purpose.
+ */
+interface Props {
+    /** Sticky top bar. Omit for a shell with no chrome. */
+    header?: Snippet;
+    /** Left rail — navigation. Visible ≥1024px, drawer below. */
+    sidebarLeft?: Snippet;
+    /** Right rail — table of contents. Visible ≥1280px, folds to `mobileToc`. */
+    sidebarRight?: Snippet;
+    /** The page-top disclosure the right rail retracts into below 1280px. */
+    mobileToc?: Snippet;
+    /** Bottom bar. */
+    footer?: Snippet;
+    /** Page content. Wrapped in `.content-shell` unless `bounded` is false. */
+    children: Snippet;
+    /**
+     * Whether the left rail is showing as a drawer. Only has an effect below
+     * 1024px, where the rail is off-canvas. Bind it to your menu button.
+     */
+    open?: boolean;
+    /** Set false to drop `.content-shell` and let content run full width. */
+    bounded?: boolean;
+    class?: string;
+}
+declare const AppShell: import("svelte").Component<Props, {}, "open">;
+type AppShell = ReturnType<typeof AppShell>;
+export default AppShell;

package/dist/components/ColorPicker.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import { presetAxes, presets, initPresets, setPreset } from '../presets.svelte.js';
+
+	let { class: className = '' }: { class?: string } = $props();
+
+	onMount(() => initPresets());
+
+	// Layer-tint glyphs — one swatch, three intensities (least → most tinted).
+	const fills: Record<string, number> = { clean: 0, general: 0.45, vibrant: 1 };
+</script>
+
+<div class="row ycenter gap-8 {className}" role="group" aria-label="Color tint preset">
+	{#each presetAxes.color as color}
+		<button
+			type="button"
+			class="button ghost"
+			class:active={presets.color === color}
+			aria-pressed={presets.color === color}
+			title={color}
+			onclick={() => setPreset('color', color)}
+		>
+			<svg width="16" height="16" viewBox="0 0 19 19" aria-hidden="true">
+				<rect
+					x="1.5"
+					y="1.5"
+					width="16"
+					height="16"
+					rx="4"
+					fill="currentColor"
+					fill-opacity={fills[color]}
+					stroke="currentColor"
+					stroke-width="1.5"
+				/>
+			</svg>
+		</button>
+	{/each}
+</div>

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

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

package/dist/components/Hero.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	/** The centred landing section, from canonical-markups.md §5. */
+	interface Props {
+		children: Snippet;
+		class?: string;
+	}
+	let { children, class: className = '' }: Props = $props();
+</script>
+
+<section class="hero {className}">
+	{@render children()}
+</section>

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

@@ -0,0 +1,9 @@
+import type { Snippet } from 'svelte';
+/** The centred landing section, from canonical-markups.md §5. */
+interface Props {
+    children: Snippet;
+    class?: string;
+}
+declare const Hero: import("svelte").Component<Props, {}, "">;
+type Hero = ReturnType<typeof Hero>;
+export default Hero;

package/dist/components/LayoutPicker.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import { presetAxes, presets, initPresets, setPreset } from '../presets.svelte.js';
+
+	let { class: className = '' }: { class?: string } = $props();
+
+	onMount(() => initPresets());
+
+	// Density glyphs — three bars, spread tightest → loosest.
+	const spreads: Record<string, number[]> = {
+		tight: [5.5, 8.5, 11.5],
+		comfortable: [3.5, 8.5, 13.5],
+		sprawling: [1.5, 8.5, 15.5]
+	};
+</script>
+
+<div class="row ycenter gap-8 {className}" role="group" aria-label="Layout density preset">
+	{#each presetAxes.layout as layout}
+		<button
+			type="button"
+			class="button ghost"
+			class:active={presets.layout === layout}
+			aria-pressed={presets.layout === layout}
+			title={layout}
+			onclick={() => setPreset('layout', layout)}
+		>
+			<svg width="16" height="16" viewBox="0 0 19 19" aria-hidden="true">
+				{#each spreads[layout] as y}
+					<rect x="3" {y} width="13" height="2" rx="1" fill="currentColor" />
+				{/each}
+			</svg>
+		</button>
+	{/each}
+</div>

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

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

package/dist/components/MotionPicker.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import { presetAxes, presets, initPresets, setPreset } from '../presets.svelte.js';
+
+	let { class: className = '' }: { class?: string } = $props();
+
+	onMount(() => initPresets());
+
+	// Energy glyphs — one arc, four amplitudes (still → liveliest overshoot).
+	const arcs: Record<string, number> = { reduced: 0, heavy: 4, active: 8, springy: 12 };
+</script>
+
+<div class="row ycenter gap-8 {className}" role="group" aria-label="Motion energy preset">
+	{#each presetAxes.motion as motion}
+		<button
+			type="button"
+			class="button ghost"
+			class:active={presets.motion === motion}
+			aria-pressed={presets.motion === motion}
+			title={motion}
+			onclick={() => setPreset('motion', motion)}
+		>
+			<svg width="16" height="16" viewBox="0 0 19 19" aria-hidden="true">
+				<path
+					d="M3 15 Q9.5 {15 - arcs[motion]} 16 15"
+					fill="none"
+					stroke="currentColor"
+					stroke-width="1.5"
+					stroke-linecap="round"
+				/>
+			</svg>
+		</button>
+	{/each}
+</div>

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

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

package/dist/components/PageShell.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	/** The padded content frame, from canonical-markups.md §4. Registry classes only. */
+	interface Props {
+		children: Snippet;
+		class?: string;
+	}
+	let { children, class: className = '' }: Props = $props();
+</script>
+
+<section class="page-shell {className}">
+	{@render children()}
+</section>

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

@@ -0,0 +1,9 @@
+import type { Snippet } from 'svelte';
+/** The padded content frame, from canonical-markups.md §4. Registry classes only. */
+interface Props {
+    children: Snippet;
+    class?: string;
+}
+declare const PageShell: import("svelte").Component<Props, {}, "">;
+type PageShell = ReturnType<typeof PageShell>;
+export default PageShell;

package/dist/components/PageSplit.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	/**
+	 * The full-bleed master-detail split, from canonical-markups.md §4.
+	 *
+	 * `.page-sidebar` and `.page-main` are not decoration: `.page-split` is a
+	 * grid whose columns are defined for exactly those two children, and the
+	 * horizontal padding lives in `.page-main` rather than on the split, so the
+	 * sidebar can sit flush. Getting either wrong loses the layout silently.
+	 */
+	interface Props {
+		/** Explorer / file tree. Hidden below 768px. */
+		sidebar?: Snippet;
+		children: Snippet;
+		class?: string;
+	}
+	let { sidebar, children, class: className = '' }: Props = $props();
+</script>
+
+<section class="page-split {className}">
+	{#if sidebar}
+		<aside class="page-sidebar">{@render sidebar()}</aside>
+	{/if}
+	<main class="page-main">{@render children()}</main>
+</section>

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

@@ -0,0 +1,18 @@
+import type { Snippet } from 'svelte';
+/**
+ * The full-bleed master-detail split, from canonical-markups.md §4.
+ *
+ * `.page-sidebar` and `.page-main` are not decoration: `.page-split` is a
+ * grid whose columns are defined for exactly those two children, and the
+ * horizontal padding lives in `.page-main` rather than on the split, so the
+ * sidebar can sit flush. Getting either wrong loses the layout silently.
+ */
+interface Props {
+    /** Explorer / file tree. Hidden below 768px. */
+    sidebar?: Snippet;
+    children: Snippet;
+    class?: string;
+}
+declare const PageSplit: import("svelte").Component<Props, {}, "">;
+type PageSplit = ReturnType<typeof PageSplit>;
+export default PageSplit;

package/dist/components/ShapePicker.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import { presetAxes, presets, initPresets, setPreset } from '../presets.svelte.js';
+
+	let { class: className = '' }: { class?: string } = $props();
+
+	onMount(() => initPresets());
+
+	// Corner glyphs — one square, four geometries; rx mirrors the sm channel.
+	const glyphs: Record<string, number> = { sharp: 0, pro: 4, curved: 8, round: 16 };
+</script>
+
+<div class="row ycenter gap-8 {className}" role="group" aria-label="Corner shape preset">
+	{#each presetAxes.shape as shape}
+		<button
+			type="button"
+			class="button ghost"
+			class:active={presets.shape === shape}
+			aria-pressed={presets.shape === shape}
+			title={shape}
+			onclick={() => setPreset('shape', shape)}
+		>
+			<svg width="16" height="16" viewBox="0 0 19 19" aria-hidden="true">
+				<rect
+					x="1.5"
+					y="1.5"
+					width="16"
+					height="16"
+					rx={glyphs[shape]}
+					fill="none"
+					stroke="currentColor"
+					stroke-width="1.5"
+				/>
+			</svg>
+		</button>
+	{/each}
+</div>

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

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