@autumnsgrove/groveengine 0.8.6 → 0.9.0

package/dist/ui/components/chrome/Header.svelte

@@ -0,0 +1,113 @@
+<script lang="ts">
+	import { page } from '$app/stores';
+	import { Logo } from '../nature';
+	import ThemeToggle from './ThemeToggle.svelte';
+	import MobileMenu from './MobileMenu.svelte';
+	import { seasonStore } from '../../stores/season';
+	import { Menu } from 'lucide-svelte';
+	import type { NavItem, MaxWidth, Season } from './types';
+	import { isActivePath } from './types';
+	import { DEFAULT_NAV_ITEMS } from './defaults';
+
+	// Determine current page for highlighting
+	let currentPath = $derived($page.url.pathname);
+
+	interface Props {
+		navItems?: NavItem[];
+		maxWidth?: MaxWidth;
+		brandTitle?: string;
+		season?: Season;
+		onSeasonChange?: () => void;
+	}
+
+	let {
+		navItems,
+		maxWidth = 'default',
+		brandTitle,
+		season,
+		onSeasonChange
+	}: Props = $props();
+
+	const maxWidthClass = {
+		narrow: 'max-w-3xl',
+		default: 'max-w-4xl',
+		wide: 'max-w-5xl'
+	};
+
+	// Mobile menu state
+	let mobileMenuOpen = $state(false);
+
+	// Toggle season on logo click
+	function handleLogoClick() {
+		if (onSeasonChange) {
+			onSeasonChange();
+		} else {
+			seasonStore.cycle();
+		}
+	}
+
+	const items = navItems || DEFAULT_NAV_ITEMS;
+</script>
+
+<header class="sticky top-0 z-40 py-6 px-6 border-b border-default bg-surface/95 backdrop-blur-sm">
+	<div class="{maxWidthClass[maxWidth]} mx-auto flex items-center justify-between">
+		<!-- Logo area -->
+		<div class="flex items-center gap-2">
+			<!-- Logo icon - clickable to toggle season -->
+			<button
+				onclick={handleLogoClick}
+				class="flex-shrink-0 transition-transform hover:scale-110 active:scale-95"
+				aria-label="Toggle season theme"
+				title="Click to change season"
+			>
+				<Logo class="w-6 h-6" season={season || $seasonStore} />
+			</button>
+
+			<!-- Brand title or "Grove" text - home link, hidden on mobile -->
+			{#if brandTitle}
+				<span class="hidden sm:block text-xl font-serif text-foreground">
+					{brandTitle}
+				</span>
+			{:else}
+				<a
+					href="/"
+					class="hidden sm:block text-xl font-serif text-foreground hover:text-accent-muted transition-colors"
+				>
+					Grove
+				</a>
+			{/if}
+		</div>
+
+		<!-- Desktop navigation -->
+		<nav class="hidden md:flex items-center gap-4 lg:gap-6 text-sm font-sans">
+			{#each items as item}
+				<a
+					href={item.href}
+					target={item.external ? '_blank' : undefined}
+					rel={item.external ? 'noopener noreferrer' : undefined}
+					class="transition-colors whitespace-nowrap {isActivePath(item.href, currentPath)
+						? 'text-accent-muted'
+						: 'text-foreground-subtle hover:text-accent-muted'}"
+				>
+					<span>{item.label}</span>
+				</a>
+			{/each}
+			<ThemeToggle />
+		</nav>
+
+		<!-- Mobile: Theme toggle + hamburger -->
+		<div class="flex md:hidden items-center gap-2">
+			<ThemeToggle />
+			<button
+				onclick={() => (mobileMenuOpen = true)}
+				class="p-2 -mr-2 text-foreground-subtle hover:text-foreground transition-colors rounded-lg hover:bg-surface-hover"
+				aria-label="Open menu"
+			>
+				<Menu class="w-5 h-5" />
+			</button>
+		</div>
+	</div>
+</header>
+
+<!-- Mobile menu overlay -->
+<MobileMenu bind:open={mobileMenuOpen} onClose={() => (mobileMenuOpen = false)} {navItems} />

package/dist/ui/components/chrome/Header.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { NavItem, MaxWidth, Season } from './types';
+interface Props {
+    navItems?: NavItem[];
+    maxWidth?: MaxWidth;
+    brandTitle?: string;
+    season?: Season;
+    onSeasonChange?: () => void;
+}
+declare const Header: import("svelte").Component<Props, {}, "">;
+type Header = ReturnType<typeof Header>;
+export default Header;

package/dist/ui/components/chrome/HeaderMinimal.svelte

@@ -0,0 +1,68 @@
+<script lang="ts">
+	/**
+	 * Header - Status page navigation header
+	 *
+	 * Clean, minimal header with Grove branding and theme toggle.
+	 */
+	import { Trees, Sun, Moon, Rss } from 'lucide-svelte';
+	import ThemeToggle from './ThemeToggle.svelte';
+	import { cn } from '../../../utils/cn';
+
+	interface Props {
+		class?: string;
+		brandTitle?: string;
+		subtitle?: string;
+		maxWidth?: 'narrow' | 'default' | 'wide';
+	}
+
+	let {
+		class: className,
+		brandTitle = 'Grove',
+		subtitle = 'Status',
+		maxWidth = 'default'
+	}: Props = $props();
+
+	const maxWidthClass = {
+		narrow: 'max-w-2xl',
+		default: 'max-w-4xl',
+		wide: 'max-w-5xl'
+	};
+</script>
+
+<header
+	class={cn(
+		'sticky top-0 z-40 py-4 px-6',
+		'bg-white/60 dark:bg-slate-900/60 backdrop-blur-md',
+		'border-b border-white/40 dark:border-slate-700/40',
+		className
+	)}
+>
+	<div class="{maxWidthClass[maxWidth]} mx-auto flex items-center justify-between">
+		<!-- Logo and title -->
+		<a href="/" class="flex items-center gap-2.5 group">
+			<div class="p-1.5 rounded-lg bg-grove-500/10 group-hover:bg-grove-500/20 transition-colors">
+				<Trees class="w-6 h-6 text-grove-600 dark:text-grove-400" />
+			</div>
+			<div>
+				<span class="font-semibold text-foreground">{brandTitle}</span>
+				<span class="text-foreground-muted ml-1">{subtitle}</span>
+			</div>
+		</a>
+
+		<!-- Actions -->
+		<div class="flex items-center gap-2">
+			<!-- RSS Feed link -->
+			<a
+				href="/feed"
+				class="p-2 rounded-lg text-foreground-muted hover:text-foreground hover:bg-white/50 dark:hover:bg-slate-800/50 transition-colors"
+				aria-label="RSS Feed"
+				title="Subscribe via RSS"
+			>
+				<Rss class="w-5 h-5" />
+			</a>
+
+			<!-- Theme toggle -->
+			<ThemeToggle />
+		</div>
+	</div>
+</header>

package/dist/ui/components/chrome/HeaderMinimal.svelte.d.ts

@@ -0,0 +1,9 @@
+interface Props {
+    class?: string;
+    brandTitle?: string;
+    subtitle?: string;
+    maxWidth?: 'narrow' | 'default' | 'wide';
+}
+declare const HeaderMinimal: import("svelte").Component<Props, {}, "">;
+type HeaderMinimal = ReturnType<typeof HeaderMinimal>;
+export default HeaderMinimal;

package/dist/ui/components/chrome/MobileMenu.svelte

@@ -0,0 +1,145 @@
+<script lang="ts">
+	import { page } from '$app/stores';
+	import { X } from 'lucide-svelte';
+	import type { NavItem } from './types';
+	import { isActivePath } from './types';
+	import { DEFAULT_MOBILE_NAV_ITEMS } from './defaults';
+
+	interface Props {
+		open: boolean;
+		onClose: () => void;
+		navItems?: NavItem[];
+	}
+
+	let { open = $bindable(), onClose, navItems }: Props = $props();
+
+	let currentPath = $derived($page.url.pathname);
+
+	// References for focus management
+	let closeButtonRef: HTMLButtonElement | undefined = $state();
+	let menuPanelRef: HTMLDivElement | undefined = $state();
+	let previouslyFocusedElement: HTMLElement | null = null;
+
+	// Handle close action
+	function handleClose() {
+		open = false;
+		onClose();
+	}
+
+	// Close on escape key
+	function handleKeydown(event: KeyboardEvent) {
+		if (event.key === 'Escape' && open) {
+			handleClose();
+		}
+
+		// Focus trap: Tab key cycles within menu
+		if (event.key === 'Tab' && open && menuPanelRef) {
+			const focusableElements = menuPanelRef.querySelectorAll<HTMLElement>(
+				'button, a, input, select, textarea, [tabindex]:not([tabindex="-1"])'
+			);
+			const firstElement = focusableElements[0];
+			const lastElement = focusableElements[focusableElements.length - 1];
+
+			if (event.shiftKey && document.activeElement === firstElement) {
+				// Shift+Tab on first element: wrap to last
+				event.preventDefault();
+				lastElement?.focus();
+			} else if (!event.shiftKey && document.activeElement === lastElement) {
+				// Tab on last element: wrap to first
+				event.preventDefault();
+				firstElement?.focus();
+			}
+		}
+	}
+
+	// Focus management and body scroll lock when menu opens/closes
+	$effect(() => {
+		if (open) {
+			// Store the previously focused element to restore later
+			previouslyFocusedElement = document.activeElement as HTMLElement;
+			// Focus the close button when menu opens
+			requestAnimationFrame(() => {
+				closeButtonRef?.focus();
+			});
+			// Prevent body scroll
+			document.body.style.overflow = 'hidden';
+		} else {
+			if (previouslyFocusedElement) {
+				// Restore focus when menu closes
+				previouslyFocusedElement.focus();
+				previouslyFocusedElement = null;
+			}
+			// Restore body scroll
+			document.body.style.overflow = '';
+		}
+
+		// Cleanup on unmount: ensure body scroll is always restored
+		return () => {
+			document.body.style.overflow = '';
+		};
+	});
+
+	const items = navItems || DEFAULT_MOBILE_NAV_ITEMS;
+</script>
+
+<svelte:window on:keydown={handleKeydown} />
+
+<!-- Backdrop -->
+{#if open}
+	<button
+		type="button"
+		class="fixed inset-0 z-[100] bg-black/50 backdrop-blur-sm transition-opacity"
+		onclick={handleClose}
+		aria-label="Close menu"
+	></button>
+{/if}
+
+<!-- Slide-out panel -->
+<div
+	bind:this={menuPanelRef}
+	class="fixed top-0 right-0 z-[110] h-full w-64 transform bg-surface border-l border-default shadow-xl transition-transform duration-300 ease-out {open
+		? 'translate-x-0'
+		: 'translate-x-full'}"
+	role="dialog"
+	aria-modal="true"
+	aria-label="Navigation menu"
+	aria-hidden={!open}
+>
+	<!-- Header -->
+	<div class="flex items-center justify-between p-4 border-b border-default">
+		<span class="text-sm font-medium text-foreground-subtle">Menu</span>
+		<button
+			bind:this={closeButtonRef}
+			type="button"
+			onclick={handleClose}
+			class="p-2 -mr-2 text-foreground-subtle hover:text-foreground transition-colors rounded-lg hover:bg-surface-hover"
+			aria-label="Close menu"
+		>
+			<X class="w-5 h-5" />
+		</button>
+	</div>
+
+	<!-- Navigation -->
+	<nav class="p-2">
+		{#each items as item}
+			{@const Icon = item.icon}
+			{@const active = isActivePath(item.href, currentPath)}
+			<a
+				href={item.href}
+				target={item.external ? '_blank' : undefined}
+				rel={item.external ? 'noopener noreferrer' : undefined}
+				onclick={handleClose}
+				class="flex items-center gap-3 px-3 py-3 rounded-lg transition-colors
+					{active
+					? 'bg-accent/10 text-accent-muted'
+					: 'text-foreground hover:bg-surface-hover hover:text-accent-muted'}"
+			>
+				<Icon class="w-5 h-5 flex-shrink-0" />
+				<span class="text-sm font-medium">{item.label}</span>
+				{#if item.external}
+					<span class="text-xs text-foreground-subtle ml-auto">External</span>
+				{/if}
+			</a>
+		{/each}
+	</nav>
+</div>

package/dist/ui/components/chrome/MobileMenu.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { NavItem } from './types';
+interface Props {
+    open: boolean;
+    onClose: () => void;
+    navItems?: NavItem[];
+}
+declare const MobileMenu: import("svelte").Component<Props, {}, "open">;
+type MobileMenu = ReturnType<typeof MobileMenu>;
+export default MobileMenu;

package/dist/ui/components/chrome/ThemeToggle.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+	import { themeStore } from '../../stores/theme';
+
+	// Extract the resolvedTheme store and toggle function
+	const { resolvedTheme, toggle } = themeStore;
+	let isDark = $derived($resolvedTheme === 'dark');
+</script>
+
+<button
+	onclick={() => toggle()}
+	class="p-2 rounded-lg text-foreground-subtle hover:text-accent-muted hover:bg-surface transition-colors"
+	aria-label={isDark ? 'Switch to light mode' : 'Switch to dark mode'}
+	title={isDark ? 'Switch to light mode' : 'Switch to dark mode'}
+>
+	{#if isDark}
+		<!-- Sun icon - shown in dark mode -->
+		<svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+			<circle cx="12" cy="12" r="5" />
+			<line x1="12" y1="1" x2="12" y2="3" />
+			<line x1="12" y1="21" x2="12" y2="23" />
+			<line x1="4.22" y1="4.22" x2="5.64" y2="5.64" />
+			<line x1="18.36" y1="18.36" x2="19.78" y2="19.78" />
+			<line x1="1" y1="12" x2="3" y2="12" />
+			<line x1="21" y1="12" x2="23" y2="12" />
+			<line x1="4.22" y1="19.78" x2="5.64" y2="18.36" />
+			<line x1="18.36" y1="5.64" x2="19.78" y2="4.22" />
+		</svg>
+	{:else}
+		<!-- Moon icon - shown in light mode -->
+		<svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+			<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
+		</svg>
+	{/if}
+</button>

package/dist/ui/components/chrome/ThemeToggle.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const ThemeToggle: import("svelte").Component<Record<string, never>, {}, "">;
+type ThemeToggle = ReturnType<typeof ThemeToggle>;
+export default ThemeToggle;

package/dist/ui/components/chrome/defaults.d.ts

@@ -0,0 +1,6 @@
+import type { NavItem, FooterLink } from "./types";
+export declare const DEFAULT_NAV_ITEMS: NavItem[];
+export declare const DEFAULT_MOBILE_NAV_ITEMS: NavItem[];
+export declare const DEFAULT_RESOURCE_LINKS: FooterLink[];
+export declare const DEFAULT_CONNECT_LINKS: FooterLink[];
+export declare const DEFAULT_LEGAL_LINKS: FooterLink[];

package/dist/ui/components/chrome/defaults.js

@@ -0,0 +1,65 @@
+import { Scroll, Telescope, MapPin, Tag, BookOpen, Trees, PenLine, Home, CircleDollarSign, Send, Github, ExternalLink, Mail, Hammer, Grape, } from "lucide-svelte";
+// Default navigation items (desktop)
+export const DEFAULT_NAV_ITEMS = [
+    { href: "/manifesto", label: "Manifesto", icon: Scroll },
+    { href: "/vision", label: "Vision", icon: Telescope },
+    { href: "/roadmap", label: "Roadmap", icon: MapPin },
+    { href: "/pricing", label: "Pricing", icon: Tag },
+    { href: "/knowledge", label: "Knowledge", icon: BookOpen },
+    { href: "/forest", label: "Forest", icon: Trees },
+    {
+        href: "https://autumnsgrove.com/blog",
+        label: "Blog",
+        icon: PenLine,
+        external: true,
+    },
+];
+// Default mobile navigation items (includes Home and Contact)
+export const DEFAULT_MOBILE_NAV_ITEMS = [
+    { href: "/", label: "Home", icon: Home },
+    { href: "/manifesto", label: "Manifesto", icon: Scroll },
+    { href: "/vision", label: "Vision", icon: Telescope },
+    { href: "/roadmap", label: "Roadmap", icon: MapPin },
+    { href: "/pricing", label: "Pricing", icon: CircleDollarSign },
+    { href: "/knowledge", label: "Knowledge", icon: BookOpen },
+    { href: "/forest", label: "Forest", icon: Trees },
+    { href: "/contact", label: "Contact", icon: Send },
+    {
+        href: "https://autumnsgrove.com/blog",
+        label: "Blog",
+        icon: PenLine,
+        external: true,
+    },
+];
+// Default resource links (for footer)
+export const DEFAULT_RESOURCE_LINKS = [
+    { href: "/knowledge", label: "Knowledge Base", icon: BookOpen },
+    { href: "/roadmap", label: "Roadmap", icon: MapPin },
+    { href: "/roadmap/workshop", label: "Workshop", icon: Hammer },
+    { href: "/forest", label: "Forest", icon: Trees },
+    { href: "/vineyard", label: "Vineyard", icon: Grape },
+    { href: "/pricing", label: "Pricing", icon: Tag },
+    { href: "/manifesto", label: "Manifesto", icon: Scroll },
+    { href: "/vision", label: "Our Vision", icon: Telescope },
+];
+// Default connect links (for footer)
+export const DEFAULT_CONNECT_LINKS = [
+    { href: "/contact", label: "Contact", icon: Mail },
+    {
+        href: "https://autumnsgrove.com/blog",
+        label: "Blog",
+        icon: PenLine,
+        external: true,
+    },
+    {
+        href: "https://github.com/AutumnsGrove/GroveEngine",
+        label: "GitHub",
+        icon: Github,
+        external: true,
+    },
+];
+// Default legal links (for footer)
+export const DEFAULT_LEGAL_LINKS = [
+    { href: "/legal/privacy", label: "Privacy" },
+    { href: "/legal/terms", label: "Terms" },
+];

package/dist/ui/components/chrome/index.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Chrome Components Index
+ * Re-exports all shared chrome/navigation components from the engine package
+ */
+export { default as ThemeToggle } from "./ThemeToggle.svelte";
+export { default as MobileMenu } from "./MobileMenu.svelte";
+export { default as Header } from "./Header.svelte";
+export { default as HeaderMinimal } from "./HeaderMinimal.svelte";
+export { default as Footer } from "./Footer.svelte";
+export { default as FooterMinimal } from "./FooterMinimal.svelte";
+export * from "./types";
+export * from "./defaults";
+export { seasonStore, themeStore } from "../../stores";

package/dist/ui/components/chrome/index.js

@@ -0,0 +1,14 @@
+/**
+ * Chrome Components Index
+ * Re-exports all shared chrome/navigation components from the engine package
+ */
+export { default as ThemeToggle } from "./ThemeToggle.svelte";
+export { default as MobileMenu } from "./MobileMenu.svelte";
+export { default as Header } from "./Header.svelte";
+export { default as HeaderMinimal } from "./HeaderMinimal.svelte";
+export { default as Footer } from "./Footer.svelte";
+export { default as FooterMinimal } from "./FooterMinimal.svelte";
+export * from "./types";
+export * from "./defaults";
+// Re-export stores for convenient access
+export { seasonStore, themeStore } from "../../stores";

package/dist/ui/components/chrome/types.d.ts

@@ -0,0 +1,19 @@
+import type { Component } from 'svelte';
+export type { Season } from '../nature/palette';
+export interface NavItem {
+    href: string;
+    label: string;
+    icon?: Component;
+    external?: boolean;
+}
+export interface FooterLink {
+    href: string;
+    label: string;
+    icon?: Component;
+    external?: boolean;
+}
+export type MaxWidth = "narrow" | "default" | "wide";
+/**
+ * Check if a navigation item is active based on the current path
+ */
+export declare function isActivePath(href: string, currentPath: string): boolean;

package/dist/ui/components/chrome/types.js

@@ -0,0 +1,8 @@
+/**
+ * Check if a navigation item is active based on the current path
+ */
+export function isActivePath(href, currentPath) {
+    if (href === '/')
+        return currentPath === '/';
+    return currentPath.startsWith(href);
+}

package/dist/ui/components/content/RoadmapPreview.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">
 	import type { Snippet } from "svelte";
 	import { cn } from "../../utils";
-	import { MapPin, ArrowRight } from "lucide-svelte";
+	// Use centralized icon registry instead of direct lucide-svelte imports
+	import { MapPin, ArrowRight } from "../icons";
 
 	/**
 	 * RoadmapPreview - A glass card showing current development phase