@treeseed/core 0.8.8 → 0.8.10

package/dist/components/ui/surface/Panel.astro

@@ -0,0 +1,54 @@
+---
+import Button from '../forms/Button.astro';
+import type { ButtonAction, Tone } from '../types.js';
+
+interface Props {
+	eyebrow?: string;
+	title?: string;
+	description?: string;
+	tone?: Tone;
+	actions?: ButtonAction[];
+	class?: string;
+}
+
+const {
+	eyebrow,
+	title,
+	description,
+	tone = 'default',
+	actions = [],
+	class: className,
+} = Astro.props as Props;
+---
+
+<section class:list={['ts-panel', className]} data-tone={tone}>
+	{eyebrow || title || description || actions.length > 0 || Astro.slots.has('actions') ? (
+		<header class="ts-panel__header">
+			<div class="ts-panel__heading">
+				{eyebrow ? <p class="ts-panel__eyebrow">{eyebrow}</p> : null}
+				{title ? <h2 class="ts-panel__title">{title}</h2> : null}
+				{description ? <p class="ts-panel__description">{description}</p> : null}
+			</div>
+			{actions.length > 0 || Astro.slots.has('actions') ? (
+				<div class="ts-panel__actions">
+					{actions.map((action) => (
+						<Button
+							href={action.href}
+							type={action.type}
+							variant={action.variant ?? 'secondary'}
+							ariaLabel={action.ariaLabel}
+							disabled={action.disabled}
+							size="sm"
+						>
+							{action.label}
+						</Button>
+					))}
+					<slot name="actions" />
+				</div>
+			) : null}
+		</header>
+	) : null}
+	<div class="ts-panel__body">
+		<slot />
+	</div>
+</section>

package/dist/components/ui/theme/ThemeMenu.astro

@@ -0,0 +1,32 @@
+---
+import ThemeSelector from './ThemeSelector.astro';
+import type { ThemePreference } from '../../../utils/theme.js';
+
+interface Props {
+	selectedScheme?: ThemePreference['scheme'];
+	selectedMode?: ThemePreference['mode'];
+	label?: string;
+}
+
+const {
+	selectedScheme,
+	selectedMode,
+	label = 'Appearance',
+} = Astro.props as Props;
+---
+
+<details class="ts-theme-menu" data-ts-theme-menu>
+	<summary class="ts-theme-menu__trigger" aria-label={label} title={label}>
+		<svg aria-hidden="true" viewBox="0 0 24 24" focusable="false">
+			<path d="M12 3.25a8.75 8.75 0 0 0 0 17.5h1.1a2.05 2.05 0 0 0 1.46-3.49 0.55 0.55 0 0 1 .39-.94h1.45a4.35 4.35 0 0 0 4.35-4.35A8.72 8.72 0 0 0 12 3.25Zm-4.1 9.1a1.35 1.35 0 1 1 0-2.7 1.35 1.35 0 0 1 0 2.7Zm2.3-4.1a1.35 1.35 0 1 1 0-2.7 1.35 1.35 0 0 1 0 2.7Zm3.9 0a1.35 1.35 0 1 1 0-2.7 1.35 1.35 0 0 1 0 2.7Zm2.6 4.1a1.35 1.35 0 1 1 0-2.7 1.35 1.35 0 0 1 0 2.7Z" />
+		</svg>
+	</summary>
+	<div class="ts-theme-menu__panel">
+		<ThemeSelector
+			label={label}
+			selectedScheme={selectedScheme}
+			selectedMode={selectedMode}
+			compact={false}
+		/>
+	</div>
+</details>

package/dist/components/ui/theme/ThemePreviewSwatch.astro

@@ -0,0 +1,18 @@
+---
+interface Props {
+	swatches: string[];
+	label?: string;
+}
+
+const { swatches, label = 'Color scheme preview' } = Astro.props as Props;
+const visibleSwatches = swatches.slice(0, 4);
+const swatchStyle = visibleSwatches
+	.map((swatch, index) => `--ts-preview-swatch-${index + 1}: ${swatch}`)
+	.join('; ');
+---
+
+<span class="ts-theme-swatch" style={swatchStyle} role="img" aria-label={label}>
+	{visibleSwatches.map((_, index) => (
+		<span class="ts-theme-swatch__dot" data-swatch-index={index + 1} aria-hidden="true"></span>
+	))}
+</span>

package/dist/components/ui/theme/ThemeScript.astro

@@ -0,0 +1,111 @@
+---
+import {
+	buildTreeseedThemeCss,
+	getBuiltInColorSchemes,
+	normalizeThemePreference,
+	type ThemePreference,
+} from '../../../utils/theme.js';
+
+interface Props {
+	defaultScheme?: ThemePreference['scheme'];
+	defaultMode?: ThemePreference['mode'];
+	includeCss?: boolean;
+	preferDefaultPreference?: boolean;
+}
+
+const preference = normalizeThemePreference({
+	scheme: (Astro.props as Props).defaultScheme,
+	mode: (Astro.props as Props).defaultMode,
+});
+const { includeCss = true, preferDefaultPreference = false } = Astro.props as Props;
+const builtInSchemeIds = getBuiltInColorSchemes().map((scheme) => scheme.id);
+const themeCss = buildTreeseedThemeCss();
+---
+
+{includeCss ? <style is:inline set:html={themeCss}></style> : null}
+
+<script
+	is:inline
+	define:vars={{
+		builtInSchemeIds,
+		defaultScheme: preference.scheme,
+		defaultMode: preference.mode,
+		preferDefaultPreference,
+	}}
+>
+	(() => {
+		const schemeKey = 'treeseed_color_scheme';
+		const modeKey = 'treeseed_theme_mode';
+		const modes = new Set(['light', 'dark', 'system']);
+		const schemes = new Set(builtInSchemeIds);
+		const root = document.documentElement;
+
+		function readCookie(name) {
+			const pair = document.cookie
+				.split('; ')
+				.find((entry) => entry.startsWith(`${name}=`));
+			return pair ? decodeURIComponent(pair.slice(name.length + 1)) : '';
+		}
+
+		function readStored(name) {
+			try {
+				return window.sessionStorage.getItem(name) || window.localStorage.getItem(name) || '';
+			} catch {
+				return '';
+			}
+		}
+
+		function cookie(name, value) {
+			const secure = window.location.protocol === 'https:' ? '; Secure' : '';
+			document.cookie = `${name}=${encodeURIComponent(value)}; Max-Age=${60 * 60 * 24 * 365}; Path=/; SameSite=Lax${secure}`;
+		}
+
+		function store(name, value) {
+			try {
+				window.sessionStorage.setItem(name, value);
+			} catch {
+				// Session storage can be disabled; local storage/cookies still carry the preference.
+			}
+			try {
+				window.localStorage.setItem(name, value);
+			} catch {
+				// Local storage can be disabled; cookies still carry the preference for SSR.
+			}
+			cookie(name, value);
+		}
+
+		function resolveScheme(value) {
+			return schemes.has(value) ? value : defaultScheme;
+		}
+
+		function resolveMode(value) {
+			return modes.has(value) ? value : defaultMode;
+		}
+
+		function resolveRenderedMode(mode) {
+			if (mode !== 'system') return mode;
+			return window.matchMedia?.('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+		}
+
+		const storedScheme = readCookie(schemeKey) || readStored(schemeKey);
+		const storedModeValue = readCookie(modeKey) || readStored(modeKey);
+		const scheme = preferDefaultPreference ? resolveScheme(defaultScheme) : resolveScheme(storedScheme || defaultScheme);
+		const storedMode = preferDefaultPreference ? resolveMode(defaultMode) : resolveMode(storedModeValue || defaultMode);
+		const renderedMode = resolveRenderedMode(storedMode);
+
+		root.dataset.tsScheme = scheme;
+		root.dataset.tsMode = renderedMode;
+		if (storedMode === 'system') {
+			root.dataset.tsModeSource = 'system';
+		} else {
+			delete root.dataset.tsModeSource;
+		}
+		store(schemeKey, scheme);
+		store(modeKey, storedMode);
+		window.matchMedia?.('(prefers-color-scheme: dark)').addEventListener?.('change', () => {
+			if (root.dataset.tsModeSource === 'system') {
+				root.dataset.tsMode = resolveRenderedMode('system');
+			}
+		});
+	})();
+</script>

package/dist/components/ui/theme/ThemeSelector.astro

@@ -0,0 +1,202 @@
+---
+import {
+	getBuiltInColorSchemes,
+	normalizeThemePreference,
+	type ThemePreference,
+} from '../../../utils/theme.js';
+import ThemePreviewSwatch from './ThemePreviewSwatch.astro';
+
+interface Props {
+	label?: string;
+	selectedScheme?: ThemePreference['scheme'];
+	selectedMode?: ThemePreference['mode'];
+	includeHiddenFields?: boolean;
+	schemeFieldName?: string;
+	modeFieldName?: string;
+	compact?: boolean;
+}
+
+const {
+	label = 'Appearance',
+	selectedScheme,
+	selectedMode,
+	includeHiddenFields = false,
+	schemeFieldName = 'colorScheme',
+	modeFieldName = 'themeMode',
+	compact = true,
+} = Astro.props as Props;
+
+const schemes = getBuiltInColorSchemes();
+const preference = normalizeThemePreference({ scheme: selectedScheme, mode: selectedMode });
+const activeScheme = schemes.find((scheme) => scheme.id === preference.scheme) ?? schemes[0];
+const initialSwatches = preference.mode === 'dark'
+	? activeScheme.modeSwatches.dark
+	: activeScheme.modeSwatches.light;
+const modes = [
+	{ value: 'system', label: 'System' },
+	{ value: 'light', label: 'Light' },
+	{ value: 'dark', label: 'Dark' },
+];
+---
+
+<div
+	class:list={['ts-theme-selector', compact && 'ts-theme-selector--compact']}
+	data-ts-theme-selector
+	data-selected-scheme={preference.scheme}
+	data-selected-mode={preference.mode}
+	data-scheme-field={schemeFieldName}
+	data-mode-field={modeFieldName}
+>
+	<div class="ts-theme-selector__summary">
+		<ThemePreviewSwatch swatches={initialSwatches} label={`${activeScheme.name} preview`} />
+		<span class="ts-theme-selector__label">
+			<span>{label}</span>
+			<small data-ts-theme-preview-label>{activeScheme.name} · {preference.mode}</small>
+		</span>
+	</div>
+	<div class="ts-theme-selector__controls">
+		<label class="ts-theme-selector__field">
+			<span>Color scheme</span>
+			<select data-ts-theme-scheme-select aria-label="Color scheme">
+				{schemes.map((scheme) => (
+					<option value={scheme.id} selected={scheme.id === preference.scheme}>
+						{scheme.name}
+					</option>
+				))}
+			</select>
+		</label>
+		<label class="ts-theme-selector__field">
+			<span>Mode</span>
+			<select data-ts-theme-mode-select aria-label="Theme mode">
+				{modes.map((mode) => (
+					<option value={mode.value} selected={mode.value === preference.mode}>
+						{mode.label}
+					</option>
+				))}
+			</select>
+		</label>
+	</div>
+	{includeHiddenFields ? (
+		<>
+			<input type="hidden" name={schemeFieldName} value={preference.scheme} data-ts-theme-scheme-field />
+			<input type="hidden" name={modeFieldName} value={preference.mode} data-ts-theme-mode-field />
+		</>
+	) : null}
+</div>
+
+<script is:inline define:vars={{ schemes }}>
+	(() => {
+		const schemeKey = 'treeseed_color_scheme';
+		const modeKey = 'treeseed_theme_mode';
+		const maxAge = 60 * 60 * 24 * 365;
+		const modeValues = new Set(['light', 'dark', 'system']);
+		const schemeValues = new Set(schemes.map((scheme) => scheme.id));
+		const schemeMap = new Map(schemes.map((scheme) => [scheme.id, scheme]));
+		const media = window.matchMedia?.('(prefers-color-scheme: dark)');
+
+		function cookie(name, value) {
+			const secure = window.location.protocol === 'https:' ? '; Secure' : '';
+			document.cookie = `${name}=${encodeURIComponent(value)}; Max-Age=${maxAge}; Path=/; SameSite=Lax${secure}`;
+		}
+
+		function store(name, value) {
+			try {
+				window.sessionStorage.setItem(name, value);
+			} catch {
+				// Session storage can be disabled; local storage/cookies still carry the preference.
+			}
+			try {
+				window.localStorage.setItem(name, value);
+			} catch {
+				// Storage can be disabled; cookies still carry the preference for SSR.
+			}
+		}
+
+		function renderedMode(mode) {
+			if (mode !== 'system') return mode;
+			return media?.matches ? 'dark' : 'light';
+		}
+
+		function applyTheme(scheme, mode, persist = true) {
+			const root = document.documentElement;
+			const safeScheme = schemeValues.has(scheme) ? scheme : 'fern';
+			const safeMode = modeValues.has(mode) ? mode : 'system';
+			root.dataset.tsScheme = safeScheme;
+			root.dataset.tsMode = renderedMode(safeMode);
+			if (safeMode === 'system') {
+				root.dataset.tsModeSource = 'system';
+			} else {
+				delete root.dataset.tsModeSource;
+			}
+			if (persist) {
+				cookie(schemeKey, safeScheme);
+				cookie(modeKey, safeMode);
+				store(schemeKey, safeScheme);
+				store(modeKey, safeMode);
+			}
+			window.dispatchEvent(new CustomEvent('treeseed:theme-change', {
+				detail: { scheme: safeScheme, mode: safeMode, renderedMode: renderedMode(safeMode) },
+			}));
+		}
+
+		function modeSwatches(scheme, mode) {
+			const rendered = renderedMode(mode);
+			return scheme.modeSwatches?.[rendered] || scheme.swatches || [];
+		}
+
+		function updateSwatch(selector, schemeId, mode) {
+			const scheme = schemeMap.get(schemeId);
+			const swatch = selector.querySelector('.ts-theme-swatch');
+			const previewLabel = selector.querySelector('[data-ts-theme-preview-label]');
+			if (!scheme || !swatch) return;
+			swatch.setAttribute('aria-label', `${scheme.name} preview`);
+			modeSwatches(scheme, mode).slice(0, 4).forEach((value, index) => {
+				swatch.style.setProperty(`--ts-preview-swatch-${index + 1}`, value);
+			});
+			if (previewLabel) {
+				previewLabel.textContent = `${scheme.name} · ${mode === 'system' ? `System ${renderedMode(mode)}` : mode}`;
+			}
+		}
+
+		function currentPreference() {
+			const root = document.documentElement;
+			const scheme = schemeValues.has(root.dataset.tsScheme) ? root.dataset.tsScheme : '';
+			const mode = root.dataset.tsModeSource === 'system' ? 'system' : root.dataset.tsMode;
+			return {
+				scheme,
+				mode: modeValues.has(mode) ? mode : '',
+			};
+		}
+
+		function bind(selector) {
+			const schemeSelect = selector.querySelector('[data-ts-theme-scheme-select]');
+			const modeSelect = selector.querySelector('[data-ts-theme-mode-select]');
+			const schemeField = selector.querySelector('[data-ts-theme-scheme-field]');
+			const modeField = selector.querySelector('[data-ts-theme-mode-field]');
+			if (!(schemeSelect instanceof HTMLSelectElement) || !(modeSelect instanceof HTMLSelectElement)) return;
+
+			const activePreference = currentPreference();
+			if (activePreference.scheme) schemeSelect.value = activePreference.scheme;
+			if (activePreference.mode) modeSelect.value = activePreference.mode;
+
+			function sync(persist = true) {
+				const scheme = schemeSelect.value;
+				const mode = modeSelect.value;
+				if (schemeField instanceof HTMLInputElement) schemeField.value = scheme;
+				if (modeField instanceof HTMLInputElement) modeField.value = mode;
+				updateSwatch(selector, scheme, mode);
+				applyTheme(scheme, mode, persist);
+			}
+
+			schemeSelect.addEventListener('change', () => sync(true));
+			modeSelect.addEventListener('change', () => sync(true));
+			sync(false);
+		}
+
+		document.querySelectorAll('[data-ts-theme-selector]').forEach(bind);
+		media?.addEventListener?.('change', () => {
+			const mode = document.documentElement.dataset.tsModeSource === 'system' ? 'system' : document.documentElement.dataset.tsMode;
+			applyTheme(document.documentElement.dataset.tsScheme || 'fern', mode || 'system', false);
+		});
+	})();
+</script>

package/dist/dev-watch.d.ts

@@ -1,13 +1,17 @@
 export type TreeseedDevWatchEntry = {
-    kind: 'tenant' | 'package' | 'sdk';
+    kind: 'tenant' | 'core' | 'sdk' | 'agent' | 'cli';
     root: string;
+    restartRequired?: boolean;
 };
 export type TreeseedDevWatchChange = {
     changedPaths: string[];
     tenantChanged: boolean;
     tenantApiChanged: boolean;
-    packageChanged: boolean;
+    coreChanged: boolean;
     sdkChanged: boolean;
+    agentChanged: boolean;
+    cliChanged: boolean;
+    commandImplementationChanged: boolean;
 };
 export type TreeseedDevWatchController = {
     stop: () => void;

package/dist/dev-watch.js

@@ -95,11 +95,20 @@ function classifyChanges(changedPaths, watchEntries) {
     sdkChanged: changedPaths.some(
       (filePath) => watchEntries.some((entry) => entry.kind === "sdk" && matchesEntry(filePath, entry))
     ),
-    packageChanged: changedPaths.some(
-      (filePath) => watchEntries.some((entry) => entry.kind === "package" && matchesEntry(filePath, entry))
+    coreChanged: changedPaths.some(
+      (filePath) => watchEntries.some((entry) => entry.kind === "core" && matchesEntry(filePath, entry))
+    ),
+    agentChanged: changedPaths.some(
+      (filePath) => watchEntries.some((entry) => entry.kind === "agent" && matchesEntry(filePath, entry))
+    ),
+    cliChanged: changedPaths.some(
+      (filePath) => watchEntries.some((entry) => entry.kind === "cli" && matchesEntry(filePath, entry))
     ),
     tenantChanged,
-    tenantApiChanged: tenantChanged && changedPaths.some(isTenantApiInput)
+    tenantApiChanged: tenantChanged && changedPaths.some(isTenantApiInput),
+    commandImplementationChanged: changedPaths.some(
+      (filePath) => watchEntries.some((entry) => entry.restartRequired === true && matchesEntry(filePath, entry))
+    )
   };
 }
 function startPollingWatch({ watchEntries, onChange }) {

package/dist/dev.d.ts

@@ -8,12 +8,13 @@ export declare const TREESEED_DEFAULT_API_PORT = 3000;
 export declare const TREESEED_DEFAULT_LOCAL_SMTP_HOST = "127.0.0.1";
 export declare const TREESEED_DEFAULT_LOCAL_SMTP_PORT = 1025;
 export declare const TREESEED_DEFAULT_MAILPIT_UI_PORT = 8025;
-export type TreeseedIntegratedDevSurface = 'integrated' | 'web';
+export type TreeseedIntegratedDevSurface = 'integrated' | 'web' | 'api' | 'manager' | 'worker' | 'agents' | 'services';
 export type TreeseedIntegratedDevSetupMode = 'auto' | 'check' | 'off';
 export type TreeseedIntegratedDevFeedbackMode = 'live' | 'restart' | 'off';
 export type TreeseedIntegratedDevOpenMode = 'auto' | 'on' | 'off';
 export type TreeseedLocalRuntimeMode = 'auto' | 'provider' | 'local';
 export type TreeseedSelectedLocalRuntime = 'astro-local' | 'cloudflare-wrangler-local' | 'node-local';
+export type TreeseedIntegratedDevCommandId = 'web' | 'api' | 'manager' | 'worker' | 'agents';
 export type TreeseedLocalRuntimeSelection = {
     requested: TreeseedLocalRuntimeMode;
     selected: TreeseedSelectedLocalRuntime;
@@ -44,7 +45,7 @@ export type TreeseedIntegratedDevOptions = {
     shutdownGraceMs?: number;
 };
 export type TreeseedIntegratedDevCommand = {
-    id: 'web';
+    id: TreeseedIntegratedDevCommandId;
     label: string;
     command: string;
     args: string[];
@@ -96,6 +97,13 @@ export type TreeseedIntegratedDevPlan = {
     watchEntries: TreeseedIntegratedDevWatchEntry[];
     commands: TreeseedIntegratedDevCommand[];
     localRuntimes: Record<string, TreeseedLocalRuntimeSelection>;
+    restartPolicy: {
+        initialBackoffMs: number;
+        maxBackoffMs: number;
+        setupRetryBackoffMs: number;
+        commandImplementationChangesRequireRestart: boolean;
+        agentChanges: 'defer';
+    };
     reset: TreeseedIntegratedDevResetPlan | null;
 };
 type SpawnLike = (command: string, args: string[], options: SpawnOptions) => ChildProcess;