@treeseed/core 0.10.22 → 0.11.0

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

@@ -1,20 +0,0 @@
----
-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

@@ -1,59 +0,0 @@
----
-import type { ButtonSize, ButtonVariant } from '../types.js';
-
-interface Props {
-	href?: string;
-	type?: 'button' | 'submit' | 'reset';
-	variant?: ButtonVariant;
-	size?: ButtonSize;
-	disabled?: boolean;
-	ariaLabel?: string;
-	reload?: boolean;
-	class?: string;
-	[key: string]: unknown;
-}
-
-const {
-	href,
-	type = 'button',
-	variant = 'primary',
-	size = 'md',
-	disabled = false,
-	ariaLabel,
-	reload = false,
-	class: className,
-	...buttonAttributes
-} = 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}
-			data-astro-reload={reload ? true : undefined}
-			{...buttonAttributes}
-		>
-			<slot />
-		</a>
-	) : (
-		<button
-			{...buttonAttributes}
-			type={type}
-			class={classes}
-			data-variant={variant}
-			data-size={size}
-			disabled={disabled}
-			aria-label={ariaLabel}
-		>
-			<slot />
-		</button>
-	)
-}

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

@@ -1,39 +0,0 @@
----
-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

@@ -1,12 +0,0 @@
----
-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

@@ -1,80 +0,0 @@
----
-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

@@ -1,55 +0,0 @@
----
-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

@@ -1,47 +0,0 @@
----
-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;
-	[key: string]: unknown;
-}
-
-const {
-	name,
-	id = name,
-	value,
-	options,
-	required = false,
-	disabled = false,
-	ariaDescribedby,
-	class: className,
-	...selectAttributes
-} = Astro.props as Props;
----
-
-<select
-	{...selectAttributes}
-	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

@@ -1,58 +0,0 @@
----
-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

@@ -1,45 +0,0 @@
----
-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>

package/dist/components/ui/layout/PageHeader.astro

@@ -1,45 +0,0 @@
----
-import Button from '../forms/Button.astro';
-import type { ButtonAction } from '../types.js';
-
-interface Props {
-	eyebrow?: string;
-	title: string;
-	description?: string;
-	actions?: ButtonAction[];
-	class?: string;
-}
-
-const {
-	eyebrow,
-	title,
-	description,
-	actions = [],
-	class: className,
-} = Astro.props as Props;
----
-
-<header class:list={['ts-page-header', className]}>
-	<div class="ts-page-header__content">
-		{eyebrow ? <p class="ts-page-header__eyebrow">{eyebrow}</p> : null}
-		<h1 class="ts-page-header__title">{title}</h1>
-		{description ? <p class="ts-page-header__description">{description}</p> : null}
-		<slot />
-	</div>
-	{actions.length > 0 || Astro.slots.has('actions') ? (
-		<div class="ts-page-header__actions">
-			{actions.map((action) => (
-				<Button
-					href={action.href}
-					type={action.type}
-					variant={action.variant ?? 'secondary'}
-					ariaLabel={action.ariaLabel}
-					disabled={action.disabled}
-				>
-					{action.label}
-				</Button>
-			))}
-			<slot name="actions" />
-		</div>
-	) : null}
-</header>

package/dist/components/ui/shell/AppShell.astro

@@ -1,130 +0,0 @@
----
-import '../../../styles/tokens.css';
-import '../../../styles/theme.css';
-import '../../../styles/ui.css';
-import '../../../styles/forms.css';
-import '../../../styles/app-shell.css';
-import { ClientRouter } from 'astro:transitions';
-import ThemeScript from '../theme/ThemeScript.astro';
-import ThemeMenu from '../theme/ThemeMenu.astro';
-import RailNav from './RailNav.astro';
-import BottomNav from './BottomNav.astro';
-import TopBar from './TopBar.astro';
-import ShellIconLink from './ShellIconLink.astro';
-import Button from '../forms/Button.astro';
-import DevWatchReload from '../../DevWatchReload.astro';
-import type { ButtonAction } from '../types.js';
-import type { ThemePreference } from '../../../utils/theme.js';
-
-interface Brand {
-	name: string;
-	tag?: string;
-	href: string;
-	logoSrc?: string;
-	logoAlt?: string;
-	mark?: string;
-}
-
-interface NavItem {
-	label: string;
-	href: string;
-	ariaLabel?: string;
-}
-
-interface Props {
-	title: string;
-	description: string;
-	currentPath: string;
-	appearance: ThemePreference;
-	brand: Brand;
-	navItems: NavItem[];
-	quickActions?: ButtonAction[];
-	bottomNavItems?: NavItem[];
-}
-
-const {
-	title,
-	description,
-	currentPath,
-	appearance,
-	brand,
-	navItems,
-	quickActions = [],
-	bottomNavItems = navItems.slice(0, 5),
-} = Astro.props as Props;
----
-
-<!doctype html>
-<html lang="en">
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width, initial-scale=1" />
-		<title>{title}</title>
-		<meta name="description" content={description} />
-		<link rel="icon" href="/favicon.svg" type="image/svg+xml" />
-		<link rel="shortcut icon" href="/favicon.svg" type="image/svg+xml" />
-		<ThemeScript defaultScheme={appearance.scheme} defaultMode={appearance.mode} preferDefaultPreference />
-		<ClientRouter />
-	</head>
-	<body>
-		<a class="ts-skip-link" href="#main-content">Skip to content</a>
-		<div class="ts-app-shell">
-			<aside class="ts-app-shell__rail">
-				<div class="ts-app-shell__rail-scroll">
-					<TopBar brand={brand} />
-					<div class="ts-app-shell__rail-context">
-						<slot name="railContext" />
-					</div>
-					<RailNav items={navItems} currentPath={currentPath} />
-				</div>
-				{quickActions.length > 0 ? (
-					<div class="ts-app-shell__quick-actions">
-						<p class="ts-app-shell__eyebrow">Quick actions</p>
-						<div class="ts-app-shell__quick-list">
-							{quickActions.map((action) => (
-								<Button
-									href={action.href}
-									type={action.type}
-									variant={action.variant ?? 'secondary'}
-									ariaLabel={action.ariaLabel}
-									disabled={action.disabled}
-									reload={action.reload}
-									size="sm"
-								>
-									{action.label}
-								</Button>
-							))}
-						</div>
-					</div>
-				) : null}
-			</aside>
-			<main class="ts-app-shell__main" id="main-content">
-				<TopBar brand={brand} class="ts-app-shell__mobile-top">
-					<Fragment slot="actions">
-						<ThemeMenu selectedScheme={appearance.scheme} selectedMode={appearance.mode} />
-						<ShellIconLink href="/" label="Book home" icon="book" />
-					</Fragment>
-				</TopBar>
-				<header class="ts-app-shell__header">
-					<div class="ts-app-shell__title">
-						<h1>{title}</h1>
-						<p>{description}</p>
-					</div>
-					<div class="ts-app-shell__header-actions">
-						<div class="ts-shell-utility-actions">
-							<ThemeMenu selectedScheme={appearance.scheme} selectedMode={appearance.mode} />
-							<ShellIconLink href="/" label="Book home" icon="book" />
-						</div>
-						<slot name="headerAction" />
-					</div>
-				</header>
-				<slot name="projectContext" />
-				<slot />
-			</main>
-			{bottomNavItems.length > 0 ? <BottomNav items={bottomNavItems} currentPath={currentPath} /> : null}
-		</div>
-		<slot name="sensitiveModal" />
-		<slot name="modal" />
-		<DevWatchReload />
-	</body>
-</html>

package/dist/components/ui/shell/BottomNav.astro

@@ -1,42 +0,0 @@
----
-interface NavItem {
-	label: string;
-	href: string;
-	ariaLabel?: string;
-}
-
-interface Props {
-	items: NavItem[];
-	currentPath: string;
-	label?: string;
-	class?: string;
-}
-
-const {
-	items,
-	currentPath,
-	label = 'Primary',
-	class: className,
-} = Astro.props as Props;
-
-function normalizePath(path: string) {
-	if (path.length <= 1) return path;
-	return path.replace(/\/+$/u, '');
-}
-
-function isCurrentPath(href: string) {
-	const current = normalizePath(currentPath);
-	const target = normalizePath(href);
-	if (target === '/') return current === '/';
-	if (target === '/app') return current === '/app';
-	return current === target || current.startsWith(`${target}/`);
-}
----
-
-<nav class:list={['ts-bottom-nav', className]} aria-label={label}>
-	{items.map((item) => (
-		<a class="ts-bottom-nav__link" href={item.href} aria-label={item.ariaLabel} aria-current={isCurrentPath(item.href) ? 'page' : undefined}>
-			<span>{item.label}</span>
-		</a>
-	))}
-</nav>