@treeseed/core 0.8.8 → 0.8.10

package/dist/components/site/RouteNotFound.astro

@@ -10,15 +10,15 @@ const {
 
 <MainLayout title={title} description={description} currentPath={currentPath}>
 	<section class="mx-auto max-w-3xl space-y-6 py-20">
-		<p class="text-sm font-semibold uppercase tracking-[0.16em] text-[color:var(--site-accent-strong)]">404</p>
-		<h1 class="font-serif text-5xl text-[color:var(--site-text)]">{title}</h1>
-		<p class="text-lg leading-9 text-[color:var(--site-text-muted)]">{description}</p>
+		<p class="text-sm font-semibold uppercase tracking-[0.16em] text-[color:var(--ts-color-accent-strong)]">404</p>
+		<h1 class="font-serif text-5xl text-[color:var(--ts-color-text)]">{title}</h1>
+		<p class="text-lg leading-9 text-[color:var(--ts-color-text-muted)]">{description}</p>
 		<div class="flex flex-wrap gap-4">
-			<a href="/" class="border border-[color:var(--site-accent)] bg-[color:var(--site-accent)] px-5 py-3 text-base font-semibold text-[color:var(--site-text)] transition hover:border-[color:var(--site-blue)] hover:bg-[color:var(--site-blue-soft)]">
+			<a href="/" class="border border-[color:var(--ts-color-accent)] bg-[color:var(--ts-color-accent)] px-5 py-3 text-base font-semibold text-[color:var(--ts-color-text)] transition hover:border-[color:var(--ts-color-info)] hover:bg-[color:var(--ts-color-info-soft)]">
 				Go home
 			</a>
-			<a href="/knowledge/" class="border border-[color:var(--site-border-strong)] px-5 py-3 text-base font-semibold text-[color:var(--site-text)] transition hover:border-[color:var(--site-blue)] hover:bg-[color:var(--site-blue-soft)]">
-				Open knowledge
+			<a href="/books/" class="border border-[color:var(--ts-color-border-strong)] px-5 py-3 text-base font-semibold text-[color:var(--ts-color-text)] transition hover:border-[color:var(--ts-color-info)] hover:bg-[color:var(--ts-color-info-soft)]">
+				Open books
 			</a>
 		</div>
 	</section>

package/dist/components/site/SectionIntro.astro

@@ -3,7 +3,7 @@ const { eyebrow, title, description } = Astro.props;
 ---
 
 <header class="max-w-4xl space-y-4">
-	{eyebrow && <p class="text-sm font-semibold uppercase tracking-[0.16em] text-[color:var(--site-accent-strong)]">{eyebrow}</p>}
-	<h2 class="max-w-4xl font-serif text-4xl font-bold tracking-tight text-[color:var(--site-text)] md:text-5xl">{title}</h2>
-	<p class="max-w-3xl text-lg leading-9 text-[color:var(--site-text-muted)] md:text-xl">{description}</p>
+	{eyebrow && <p class="text-sm font-semibold uppercase tracking-[0.16em] text-[color:var(--ts-color-accent-strong)]">{eyebrow}</p>}
+	<h2 class="max-w-4xl font-serif text-4xl font-bold tracking-tight text-[color:var(--ts-color-text)] md:text-5xl">{title}</h2>
+	<p class="max-w-3xl text-lg leading-9 text-[color:var(--ts-color-text-muted)] md:text-xl">{description}</p>
 </header>

package/dist/components/site/StageBanner.astro

@@ -2,7 +2,7 @@
 import { PROJECT_STAGE } from '../../utils/content-status';
 ---
 
-<div class="inline-flex max-w-full flex-wrap items-center gap-x-3 gap-y-1 border-l-4 border-[color:var(--site-accent)] bg-[color:var(--site-accent-soft)] px-4 py-3 text-[color:var(--site-text)]">
+<div class="inline-flex max-w-full flex-wrap items-center gap-x-3 gap-y-1 border-l-4 border-[color:var(--ts-color-accent)] bg-[color:var(--ts-color-accent-soft)] px-4 py-3 text-[color:var(--ts-color-text)]">
 	<span class="font-bold uppercase tracking-[0.16em] text-xs">{PROJECT_STAGE.label}</span>
-	<span class="text-[color:var(--site-text-muted)]">{PROJECT_STAGE.description}</span>
+	<span class="text-[color:var(--ts-color-text-muted)]">{PROJECT_STAGE.description}</span>
 </div>

package/dist/components/site/TrustCallout.astro

@@ -2,8 +2,8 @@
 const { title, body } = Astro.props;
 ---
 
-<aside class="border-l-4 border-[color:var(--site-warm)] bg-[color:rgba(215,176,123,0.12)] px-5 py-5 text-[color:var(--site-text)]">
-	<p class="text-sm font-semibold uppercase tracking-[0.14em] text-[color:var(--site-warm-strong)]">Trust note</p>
+<aside class="border-l-4 border-[color:var(--ts-color-warning)] bg-[color:var(--ts-color-warning-soft)] px-5 py-5 text-[color:var(--ts-color-text)]">
+	<p class="text-sm font-semibold uppercase tracking-[0.14em] text-[color:var(--ts-color-warning-text)]">Trust note</p>
 	<h3 class="mt-2 text-2xl font-bold">{title}</h3>
-	<p class="mt-3 text-base leading-8 text-[color:var(--site-text-muted)]">{body}</p>
+	<p class="mt-3 text-base leading-8 text-[color:var(--ts-color-text-muted)]">{body}</p>
 </aside>

package/dist/components/ui/data/ActionList.astro

@@ -0,0 +1,51 @@
+---
+import Badge from './Badge.astro';
+import type { Tone } from '../types.js';
+
+interface ActionListItem {
+	title: string;
+	description?: string;
+	href?: string;
+	meta?: string;
+	tone?: Tone;
+	actionLabel?: string;
+}
+
+interface Props {
+	items?: ActionListItem[];
+	class?: string;
+}
+
+const {
+	items = [],
+	class: className,
+} = Astro.props as Props;
+---
+
+<div class:list={['ts-action-list', className]}>
+	{items.length > 0 ? (
+		<ul class="ts-action-list__items">
+			{items.map((item) => {
+				const Inner = (
+					<>
+						<span class="ts-action-list__content">
+							<span class="ts-action-list__title">{item.title}</span>
+							{item.description ? <span class="ts-action-list__description">{item.description}</span> : null}
+						</span>
+						<span class="ts-action-list__meta">
+							{item.meta ? <Badge tone={item.tone ?? 'muted'} size="sm">{item.meta}</Badge> : null}
+							{item.actionLabel ? <span class="ts-action-list__action">{item.actionLabel}</span> : null}
+						</span>
+					</>
+				);
+				return (
+					<li class="ts-action-list__item" data-tone={item.tone ?? 'default'}>
+						{item.href ? <a href={item.href} class="ts-action-list__link">{Inner}</a> : <div class="ts-action-list__row">{Inner}</div>}
+					</li>
+				);
+			})}
+		</ul>
+	) : (
+		<slot />
+	)}
+</div>

package/dist/components/ui/data/Badge.astro

@@ -0,0 +1,19 @@
+---
+import type { Tone } from '../types.js';
+
+interface Props {
+	tone?: Tone;
+	size?: 'sm' | 'md';
+	class?: string;
+}
+
+const {
+	tone = 'default',
+	size = 'md',
+	class: className,
+} = Astro.props as Props;
+---
+
+<span class:list={['ts-badge', className]} data-tone={tone} data-size={size}>
+	<slot />
+</span>

package/dist/components/ui/data/DataTable.astro

@@ -0,0 +1,51 @@
+---
+interface DataTableColumn {
+	key: string;
+	label: string;
+}
+
+interface Props {
+	columns: DataTableColumn[];
+	rows: Array<Record<string, unknown>>;
+	caption?: string;
+	emptyLabel?: string;
+	class?: string;
+}
+
+const {
+	columns,
+	rows,
+	caption,
+	emptyLabel = 'No rows to show.',
+	class: className,
+} = Astro.props as Props;
+
+function cellValue(row: Record<string, unknown>, key: string) {
+	const value = row[key];
+	return value === null || value === undefined ? '' : String(value);
+}
+---
+
+<div class:list={['ts-data-table-wrap', className]}>
+	<table class="ts-data-table">
+		{caption ? <caption>{caption}</caption> : null}
+		<thead>
+			<tr>
+				{columns.map((column) => <th scope="col">{column.label}</th>)}
+			</tr>
+		</thead>
+		<tbody>
+			{rows.length > 0 ? rows.map((row) => (
+				<tr>
+					{columns.map((column) => (
+						<td data-label={column.label}>{cellValue(row, column.key)}</td>
+					))}
+				</tr>
+			)) : (
+				<tr>
+					<td colspan={columns.length}>{emptyLabel}</td>
+				</tr>
+			)}
+		</tbody>
+	</table>
+</div>

package/dist/components/ui/data/KeyValueList.astro

@@ -0,0 +1,28 @@
+---
+import type { Tone } from '../types.js';
+
+interface KeyValueItem {
+	key: string;
+	value: string | number;
+	tone?: Tone;
+}
+
+interface Props {
+	items: KeyValueItem[];
+	class?: string;
+}
+
+const {
+	items,
+	class: className,
+} = Astro.props as Props;
+---
+
+<dl class:list={['ts-key-value-list', className]}>
+	{items.map((item) => (
+		<div class="ts-key-value-list__item" data-tone={item.tone ?? 'default'}>
+			<dt>{item.key}</dt>
+			<dd>{item.value}</dd>
+		</div>
+	))}
+</dl>

package/dist/components/ui/data/MetricCard.astro

@@ -0,0 +1,25 @@
+---
+import type { Tone } from '../types.js';
+
+interface Props {
+	label: string;
+	value: string | number;
+	description?: string;
+	tone?: Tone;
+	class?: string;
+}
+
+const {
+	label,
+	value,
+	description,
+	tone = 'default',
+	class: className,
+} = Astro.props as Props;
+---
+
+<article class:list={['ts-metric-card', className]} data-tone={tone}>
+	<p class="ts-metric-card__label">{label}</p>
+	<p class="ts-metric-card__value">{value}</p>
+	{description ? <p class="ts-metric-card__description">{description}</p> : null}
+</article>

package/dist/components/ui/data/MetricGrid.astro

@@ -0,0 +1,27 @@
+---
+import MetricCard from './MetricCard.astro';
+import type { Tone } from '../types.js';
+
+interface MetricItem {
+	label: string;
+	value: string | number;
+	description?: string;
+	tone?: Tone;
+}
+
+interface Props {
+	metrics?: MetricItem[];
+	min?: string;
+	class?: string;
+}
+
+const {
+	metrics = [],
+	min = '12rem',
+	class: className,
+} = Astro.props as Props;
+---
+
+<div class:list={['ts-metric-grid', className]} style={`--ts-metric-grid-min: ${min}`}>
+	{metrics.length > 0 ? metrics.map((metric) => <MetricCard {...metric} />) : <slot />}
+</div>

package/dist/components/ui/data/StatusPill.astro

@@ -0,0 +1,20 @@
+---
+import type { Tone } from '../types.js';
+
+interface Props {
+	tone?: Tone;
+	label?: string;
+	class?: string;
+}
+
+const {
+	tone = 'default',
+	label,
+	class: className,
+} = Astro.props as Props;
+---
+
+<span class:list={['ts-status-pill', className]} data-tone={tone}>
+	<span class="ts-status-pill__dot" aria-hidden="true"></span>
+	<span><slot>{label}</slot></span>
+</span>

package/dist/components/ui/forms/Button.astro

@@ -0,0 +1,52 @@
+---
+import type { ButtonSize, ButtonVariant } from '../types.js';
+
+interface Props {
+	href?: string;
+	type?: 'button' | 'submit' | 'reset';
+	variant?: ButtonVariant;
+	size?: ButtonSize;
+	disabled?: boolean;
+	ariaLabel?: string;
+	class?: string;
+}
+
+const {
+	href,
+	type = 'button',
+	variant = 'primary',
+	size = 'md',
+	disabled = false,
+	ariaLabel,
+	class: className,
+} = Astro.props as Props;
+
+const classes = ['ts-button', className].filter(Boolean).join(' ');
+---
+
+{
+	href ? (
+		<a
+			href={disabled ? undefined : href}
+			class={classes}
+			data-variant={variant}
+			data-size={size}
+			aria-label={ariaLabel}
+			aria-disabled={disabled ? 'true' : undefined}
+			tabindex={disabled ? -1 : undefined}
+		>
+			<slot />
+		</a>
+	) : (
+		<button
+			type={type}
+			class={classes}
+			data-variant={variant}
+			data-size={size}
+			disabled={disabled}
+			aria-label={ariaLabel}
+		>
+			<slot />
+		</button>
+	)
+}

package/dist/components/ui/forms/Field.astro

@@ -0,0 +1,39 @@
+---
+interface Props {
+	label: string;
+	id?: string;
+	name?: string;
+	help?: string;
+	error?: string;
+	required?: boolean;
+	full?: boolean;
+	class?: string;
+}
+
+const {
+	label,
+	id,
+	name,
+	help,
+	error,
+	required = false,
+	full = false,
+	class: className,
+} = Astro.props as Props;
+
+const fieldId = id ?? name;
+const helpId = fieldId && help ? `${fieldId}-help` : undefined;
+const errorId = fieldId && error ? `${fieldId}-error` : undefined;
+---
+
+<div class:list={['ts-field', full && 'ts-field--full', className]}>
+	<label class="ts-field__label" for={fieldId}>
+		<span>{label}</span>
+		{required ? <span class="ts-field__required" aria-hidden="true">*</span> : null}
+	</label>
+	<div class="ts-field__control">
+		<slot helpId={helpId} errorId={errorId} describedBy={[helpId, errorId].filter(Boolean).join(' ') || undefined} />
+	</div>
+	{help ? <p class="ts-field__help" id={helpId}>{help}</p> : null}
+	{error ? <p class="ts-field__error" id={errorId}>{error}</p> : null}
+</div>

package/dist/components/ui/forms/FormActions.astro

@@ -0,0 +1,12 @@
+---
+interface Props {
+	align?: 'start' | 'end' | 'between';
+	class?: string;
+}
+
+const { align = 'end', class: className } = Astro.props as Props;
+---
+
+<div class:list={['ts-form-actions', `ts-form-actions--${align}`, className]}>
+	<slot />
+</div>

package/dist/components/ui/forms/PasswordMeter.astro

@@ -0,0 +1,80 @@
+---
+interface Props {
+	inputId?: string;
+	label?: string;
+	minLength?: number;
+	class?: string;
+}
+
+const {
+	inputId,
+	label = 'Password strength',
+	minLength = 12,
+	class: className,
+} = Astro.props as Props;
+---
+
+<div
+	class:list={['ts-password-meter', className]}
+	data-ts-password-meter
+	data-input-id={inputId}
+	data-min-length={minLength}
+>
+	<div class="ts-password-meter__header">
+		<span>{label}</span>
+		<span class="ts-password-meter__status" data-ts-password-meter-status>Not started</span>
+	</div>
+	<div class="ts-password-meter__track" aria-hidden="true">
+		<span class="ts-password-meter__bar" data-ts-password-meter-bar></span>
+	</div>
+	<ul class="ts-password-meter__rules">
+		<li data-ts-password-rule="length">Use at least {minLength} characters</li>
+		<li data-ts-password-rule="case">Mix upper and lower case letters</li>
+		<li data-ts-password-rule="number">Include a number</li>
+		<li data-ts-password-rule="symbol">Include a symbol</li>
+	</ul>
+</div>
+
+<script is:inline>
+	(() => {
+		function scorePassword(value, minLength) {
+			const checks = {
+				length: value.length >= minLength,
+				case: /[a-z]/.test(value) && /[A-Z]/.test(value),
+				number: /\d/.test(value),
+				symbol: /[^A-Za-z0-9]/.test(value),
+			};
+			return { checks, score: Object.values(checks).filter(Boolean).length };
+		}
+
+		function bindMeter(meter) {
+			if (!(meter instanceof HTMLElement)) return;
+			const minLength = Number(meter.dataset.minLength || 12);
+			const inputId = meter.dataset.inputId;
+			const input = inputId
+				? document.getElementById(inputId)
+				: meter.closest('form')?.querySelector('[data-ts-password-input], input[type="password"]');
+			if (!(input instanceof HTMLInputElement)) return;
+
+			const status = meter.querySelector('[data-ts-password-meter-status]');
+			const bar = meter.querySelector('[data-ts-password-meter-bar]');
+			const labels = ['Not started', 'Weak', 'Fair', 'Good', 'Strong'];
+
+			function update() {
+				const { checks, score } = scorePassword(input.value, minLength);
+				meter.dataset.strength = String(score);
+				if (status) status.textContent = input.value ? labels[score] : labels[0];
+				if (bar instanceof HTMLElement) bar.style.setProperty('--ts-password-strength', String(score));
+				for (const [rule, passed] of Object.entries(checks)) {
+					const item = meter.querySelector(`[data-ts-password-rule="${rule}"]`);
+					if (item instanceof HTMLElement) item.dataset.passed = passed ? 'true' : 'false';
+				}
+			}
+
+			input.addEventListener('input', update);
+			update();
+		}
+
+		document.querySelectorAll('[data-ts-password-meter]').forEach(bindMeter);
+	})();
+</script>

package/dist/components/ui/forms/RadioGroup.astro

@@ -0,0 +1,55 @@
+---
+interface RadioOption {
+	label: string;
+	value: string;
+	help?: string;
+	disabled?: boolean;
+}
+
+interface Props {
+	name: string;
+	legend: string;
+	value?: string;
+	options: RadioOption[];
+	required?: boolean;
+	class?: string;
+}
+
+const {
+	name,
+	legend,
+	value,
+	options,
+	required = false,
+	class: className,
+} = Astro.props as Props;
+---
+
+<fieldset class:list={['ts-radio-group', className]}>
+	<legend class="ts-radio-group__legend">
+		{legend}
+		{required ? <span class="ts-field__required" aria-hidden="true">*</span> : null}
+	</legend>
+	<div class="ts-radio-group__options">
+		{options.map((option) => {
+			const optionId = `${name}-${option.value}`;
+			return (
+				<label class="ts-radio-option" for={optionId} data-disabled={option.disabled ? 'true' : undefined}>
+					<input
+						id={optionId}
+						type="radio"
+						name={name}
+						value={option.value}
+						checked={option.value === value}
+						required={required}
+						disabled={option.disabled}
+					/>
+					<span class="ts-radio-option__body">
+						<span class="ts-radio-option__label">{option.label}</span>
+						{option.help ? <span class="ts-radio-option__help">{option.help}</span> : null}
+					</span>
+				</label>
+			);
+		})}
+	</div>
+</fieldset>

package/dist/components/ui/forms/Select.astro

@@ -0,0 +1,44 @@
+---
+interface SelectOption {
+	label: string;
+	value: string;
+	disabled?: boolean;
+}
+
+interface Props {
+	name: string;
+	id?: string;
+	value?: string;
+	options: SelectOption[];
+	required?: boolean;
+	disabled?: boolean;
+	ariaDescribedby?: string;
+	class?: string;
+}
+
+const {
+	name,
+	id = name,
+	value,
+	options,
+	required = false,
+	disabled = false,
+	ariaDescribedby,
+	class: className,
+} = Astro.props as Props;
+---
+
+<select
+	class:list={['ts-control', 'ts-control--select', className]}
+	id={id}
+	name={name}
+	required={required}
+	disabled={disabled}
+	aria-describedby={ariaDescribedby}
+>
+	{options.map((option) => (
+		<option value={option.value} selected={option.value === value} disabled={option.disabled}>
+			{option.label}
+		</option>
+	))}
+</select>

package/dist/components/ui/forms/TextInput.astro

@@ -0,0 +1,58 @@
+---
+interface Props {
+	name: string;
+	id?: string;
+	type?: 'text' | 'email' | 'url' | 'password' | 'search' | 'number' | 'tel';
+	value?: string | number;
+	placeholder?: string;
+	autocomplete?: string;
+	required?: boolean;
+	disabled?: boolean;
+	readonly?: boolean;
+	minlength?: number;
+	maxlength?: number;
+	pattern?: string;
+	inputmode?: 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search';
+	ariaDescribedby?: string;
+	class?: string;
+	[key: string]: unknown;
+}
+
+const {
+	name,
+	id = name,
+	type = 'text',
+	value,
+	placeholder,
+	autocomplete,
+	required = false,
+	disabled = false,
+	readonly = false,
+	minlength,
+	maxlength,
+	pattern,
+	inputmode,
+	ariaDescribedby,
+	class: className,
+	...inputAttributes
+} = Astro.props as Props;
+---
+
+<input
+	{...inputAttributes}
+	class:list={['ts-control', className]}
+	id={id}
+	name={name}
+	type={type}
+	value={value}
+	placeholder={placeholder}
+	autocomplete={autocomplete}
+	required={required}
+	disabled={disabled}
+	readonly={readonly}
+	minlength={minlength}
+	maxlength={maxlength}
+	pattern={pattern}
+	inputmode={inputmode}
+	aria-describedby={ariaDescribedby}
+/>

package/dist/components/ui/forms/Textarea.astro

@@ -0,0 +1,45 @@
+---
+interface Props {
+	name: string;
+	id?: string;
+	value?: string;
+	placeholder?: string;
+	rows?: number;
+	required?: boolean;
+	disabled?: boolean;
+	readonly?: boolean;
+	minlength?: number;
+	maxlength?: number;
+	ariaDescribedby?: string;
+	class?: string;
+}
+
+const {
+	name,
+	id = name,
+	value,
+	placeholder,
+	rows = 4,
+	required = false,
+	disabled = false,
+	readonly = false,
+	minlength,
+	maxlength,
+	ariaDescribedby,
+	class: className,
+} = Astro.props as Props;
+---
+
+<textarea
+	class:list={['ts-control', 'ts-control--textarea', className]}
+	id={id}
+	name={name}
+	placeholder={placeholder}
+	rows={rows}
+	required={required}
+	disabled={disabled}
+	readonly={readonly}
+	minlength={minlength}
+	maxlength={maxlength}
+	aria-describedby={ariaDescribedby}
+>{value}</textarea>