@atmo-dev/kit 0.8.0 → 0.10.0

package/dist/events/event-view/locations.js

@@ -1,3 +1,4 @@
+import { safeHttpUrl as webUrl } from '../../urls.js';
 function text(record, key) {
     const value = record[key];
     return typeof value === 'string' ? value.trim() || undefined : undefined;
@@ -20,17 +21,6 @@ function coordinateLabel({ lat, lng }) {
 function mapsUrl(query) {
     return `https://www.google.com/maps/search/?api=1&query=${encodeURIComponent(query)}`;
 }
-function webUrl(uri) {
-    try {
-        const url = new URL(uri);
-        if (url.protocol === 'https:' || url.protocol === 'http:')
-            return url.href;
-    }
-    catch {
-        // Invalid URLs render as non-interactive location text.
-    }
-    return undefined;
-}
 function formatLocation(value) {
     if (!value || typeof value !== 'object')
         return null;

package/dist/events/schedule/ConferenceTimetable.svelte

@@ -205,7 +205,7 @@
 		{/if}
 	</div>
 
-	<p class="mb-4 text-sm text-muted">All times shown in {tzLabel}.</p>
+	<p class="mb-4 text-sm text-base-600 dark:text-base-400">All times shown in {tzLabel}.</p>
 
 	{#if upNextAll.length > 0}
 		<div class="mb-8">
@@ -235,7 +235,7 @@
 										{ev.title}
 									</p>
 									{#if subtitle(ev)}
-										<p class="mt-0.5 truncate text-xs text-muted">
+										<p class="mt-0.5 truncate text-xs text-base-600 dark:text-base-400">
 											{subtitle(ev)}
 										</p>
 									{/if}
@@ -243,12 +243,12 @@
 								<span
 									class="flex shrink-0 items-center gap-1.5 text-xs whitespace-nowrap {w.soon
 										? 'font-semibold text-accent-600 dark:text-accent-400'
-										: 'text-muted'}"
+										: 'text-base-600 dark:text-base-400'}"
 								>
 									{#if rsvpStatuses[ev.uri] === 'going'}
-										<Icon img={Check} size={14} class="text-action" />
+										<Icon img={Check} size={14} class="text-accent-700 dark:text-accent-300" />
 									{:else}
-										<Icon img={Star} size={14} class="text-action" />
+										<Icon img={Star} size={14} class="text-accent-700 dark:text-accent-300" />
 									{/if}
 									{w.text}
 								</span>
@@ -273,7 +273,7 @@
 		<div class="mb-6 space-y-3">
 			{#if dayGroups.length > 1}
 				<div class="flex items-center gap-3">
-					<span class="w-14 text-xs text-muted">Days</span>
+					<span class="w-14 text-xs text-base-600 dark:text-base-400">Days</span>
 					<ToggleGroup
 						type="single"
 						bind:value={
@@ -293,7 +293,7 @@
 			{/if}
 			{#if loggedIn}
 				<div class="flex items-center gap-3">
-					<span class="w-14 text-xs text-muted">Events</span>
+					<span class="w-14 text-xs text-base-600 dark:text-base-400">Events</span>
 					<ToggleGroup
 						type="single"
 						bind:value={

package/dist/events/schedule/DaySchedule.svelte

@@ -97,7 +97,7 @@
 				onclick={() => (roomMenuOpen = false)}
 			></button>
 			<ul
-				class="absolute inset-x-0 top-full z-[10000] max-h-64 overflow-auto border-b border-line bg-page"
+				class="absolute inset-x-0 top-full z-[10000] max-h-64 overflow-auto border-b border-base-300 bg-base-50 dark:border-[color-mix(in_srgb,var(--base-800)_80%,var(--base-950))] dark:bg-base-925"
 			>
 				{#each rooms as room, i (room)}
 					<li>
@@ -209,7 +209,7 @@
 				>
 					{#each rooms as room (room)}
 						<div
-							class="px-2 py-2.5 text-center text-xs font-semibold tracking-wide text-muted uppercase"
+							class="px-2 py-2.5 text-center text-xs font-semibold tracking-wide text-base-600 uppercase dark:text-base-400"
 						>
 							{room}
 						</div>

package/dist/events/schedule/ScheduleEventCell.svelte

@@ -89,7 +89,7 @@
 	<Modal bind:open={modalOpen} title={event.title}>
 		<div class="overflow-hidden">
 			{#if event.start}
-				<p class="mt-1 text-sm text-muted">
+				<p class="mt-1 text-sm text-base-600 dark:text-base-400">
 					{formatTime(event.start, tz)}{event.end ? ` – ${formatTime(event.end, tz)}` : ''}
 				</p>
 			{/if}
@@ -107,7 +107,7 @@
 			{/if}
 
 			{#if event.description}
-				<p class="mt-3 line-clamp-3 text-sm break-words text-muted">
+				<p class="mt-3 line-clamp-3 text-sm break-words text-base-600 dark:text-base-400">
 					{event.description}
 				</p>
 			{/if}

package/dist/events/themes/Matrix.svelte

@@ -37,23 +37,28 @@
 		);
 
 		const accentColor = getComputedStyle(document.documentElement)
-			.getPropertyValue('--color-accent-500')
+			.getPropertyValue('--accent-500')
 			.trim();
 
+		const root = document.documentElement;
+		const systemScheme = window.matchMedia('(prefers-color-scheme: dark)');
 		let bgColor = '';
 		function readBgColor() {
-			const isDark = document.documentElement.classList.contains('dark');
-			bgColor = getComputedStyle(document.documentElement)
-				.getPropertyValue(isDark ? '--color-base-900' : '--color-base-50')
+			const isDark =
+				root.matches('.dark, [data-theme="dark"]') ||
+				(!root.matches('.light, [data-theme="light"]') && systemScheme.matches);
+			bgColor = getComputedStyle(root)
+				.getPropertyValue(isDark ? '--base-900' : '--base-50')
 				.trim();
 		}
 		readBgColor();
 
 		const themeObserver = new MutationObserver(readBgColor);
-		themeObserver.observe(document.documentElement, {
+		themeObserver.observe(root, {
 			attributes: true,
-			attributeFilter: ['class']
+			attributeFilter: ['class', 'data-theme', 'style']
 		});
+		systemScheme.addEventListener('change', readBgColor);
 
 		let lastResize = canvas.width;
 		let lastTime = performance.now();
@@ -144,6 +149,7 @@
 			cancelAnimationFrame(animId);
 			window.removeEventListener('resize', resize);
 			themeObserver.disconnect();
+			systemScheme.removeEventListener('change', readBgColor);
 		};
 	});
 </script>

package/dist/events.d.ts

@@ -12,8 +12,8 @@ export { default as VodPlayer } from './events/VodPlayer.svelte';
 export type { VodPlayerApi } from './events/VodPlayer.svelte';
 export { default as VodTranscript } from './events/VodTranscript.svelte';
 export { default as ConferenceTimetable } from './events/schedule/ConferenceTimetable.svelte';
-export { default as DatePicker } from './events/DatePicker.svelte';
-export { default as TimePicker } from './events/TimePicker.svelte';
-export { default as DateTimePicker } from './events/DateTimePicker.svelte';
-export { default as TimezonePicker } from './events/TimezonePicker.svelte';
-export { default as ImageDropper } from './events/ImageDropper.svelte';
+export { default as DatePicker } from './components/DatePicker.svelte';
+export { default as TimePicker } from './components/TimePicker.svelte';
+export { default as DateTimePicker } from './components/DateTimePicker.svelte';
+export { default as TimezonePicker } from './components/TimezonePicker.svelte';
+export { default as ImageDropper } from './components/ImageDropper.svelte';

package/dist/events.js

@@ -10,8 +10,9 @@ export { default as StarterPackButton } from './events/StarterPackButton.svelte'
 export { default as VodPlayer } from './events/VodPlayer.svelte';
 export { default as VodTranscript } from './events/VodTranscript.svelte';
 export { default as ConferenceTimetable } from './events/schedule/ConferenceTimetable.svelte';
-export { default as DatePicker } from './events/DatePicker.svelte';
-export { default as TimePicker } from './events/TimePicker.svelte';
-export { default as DateTimePicker } from './events/DateTimePicker.svelte';
-export { default as TimezonePicker } from './events/TimezonePicker.svelte';
-export { default as ImageDropper } from './events/ImageDropper.svelte';
+// Compatibility aliases; general-purpose controls are owned by the main Kit entry.
+export { default as DatePicker } from './components/DatePicker.svelte';
+export { default as TimePicker } from './components/TimePicker.svelte';
+export { default as DateTimePicker } from './components/DateTimePicker.svelte';
+export { default as TimezonePicker } from './components/TimezonePicker.svelte';
+export { default as ImageDropper } from './components/ImageDropper.svelte';

package/dist/index.d.ts

@@ -5,6 +5,11 @@ export { default as Input } from './components/Input.svelte';
 export type { InputProps } from './components/Input.svelte';
 export { default as Textarea } from './components/Textarea.svelte';
 export { default as Select } from './components/Select.svelte';
+export { default as DatePicker } from './components/DatePicker.svelte';
+export { default as TimePicker } from './components/TimePicker.svelte';
+export { default as DateTimePicker } from './components/DateTimePicker.svelte';
+export { default as TimezonePicker } from './components/TimezonePicker.svelte';
+export { default as ImageDropper } from './components/ImageDropper.svelte';
 export { default as SocialClientPicker } from './components/SocialClientPicker.svelte';
 export type { SocialClientPickerProps } from './components/SocialClientPicker.svelte';
 export * from './social.js';
@@ -54,6 +59,7 @@ export type { IconNode, SketchyIconProps } from '@sketchyicons/svelte';
 export { default as IconRail } from './components/IconRail.svelte';
 export type { IconRailItem } from './components/IconRail.svelte';
 export { default as WorkspaceSidebar } from './components/WorkspaceSidebar.svelte';
+export { default as AccountMenu } from './components/AccountMenu.svelte';
 export { default as LoginForm } from './components/login/LoginForm.svelte';
 export type { LoginFormProps } from './components/login/LoginForm.svelte';
 export { default as LoginDialog } from './components/login/LoginDialog.svelte';
@@ -76,6 +82,7 @@ export { default as InlineEditor } from './components/InlineEditor.svelte';
 export { default as PostComposer } from './components/PostComposer.svelte';
 export { default as NestedComments } from './components/NestedComments.svelte';
 export { default as PostContent } from './components/PostContent.svelte';
+export { safeHttpUrl, safeLinkHref } from './urls.js';
 export { default as RichText } from './components/RichText.svelte';
 export type { RichTextProps } from './components/RichText.svelte';
 export type { RichTextDocument, RichTextLinkOptions } from './richtext/document.js';

package/dist/index.js

@@ -3,6 +3,11 @@ export { default as IconButton } from './components/IconButton.svelte';
 export { default as Input } from './components/Input.svelte';
 export { default as Textarea } from './components/Textarea.svelte';
 export { default as Select } from './components/Select.svelte';
+export { default as DatePicker } from './components/DatePicker.svelte';
+export { default as TimePicker } from './components/TimePicker.svelte';
+export { default as DateTimePicker } from './components/DateTimePicker.svelte';
+export { default as TimezonePicker } from './components/TimezonePicker.svelte';
+export { default as ImageDropper } from './components/ImageDropper.svelte';
 export { default as SocialClientPicker } from './components/SocialClientPicker.svelte';
 export * from './social.js';
 export { default as Checkbox } from './components/Checkbox.svelte';
@@ -34,6 +39,7 @@ export { default as Tabs } from './components/Tabs.svelte';
 export { default as Icon } from './components/Icon.svelte';
 export { default as IconRail } from './components/IconRail.svelte';
 export { default as WorkspaceSidebar } from './components/WorkspaceSidebar.svelte';
+export { default as AccountMenu } from './components/AccountMenu.svelte';
 export { default as LoginForm } from './components/login/LoginForm.svelte';
 export { default as LoginDialog } from './components/login/LoginDialog.svelte';
 export { default as SignupPermissions } from './components/login/SignupPermissions.svelte';
@@ -51,6 +57,7 @@ export { default as InlineEditor } from './components/InlineEditor.svelte';
 export { default as PostComposer } from './components/PostComposer.svelte';
 export { default as NestedComments } from './components/NestedComments.svelte';
 export { default as PostContent } from './components/PostContent.svelte';
+export { safeHttpUrl, safeLinkHref } from './urls.js';
 export { default as RichText } from './components/RichText.svelte';
 export { default as ExternalEmbed } from './components/ExternalEmbed.svelte';
 export { defaultExternalEmbedProviders, youtubeEmbedProvider, klipyEmbedProvider, resolveExternalEmbed } from './social/external-embeds.js';

package/dist/richtext/document.d.ts

@@ -1,4 +1,6 @@
 import type { PreferredSocialClient } from '../social/preferred-client.js';
+import { safeHttpUrl as safeWebUrl } from '../urls.js';
+export { safeWebUrl };
 /**
  * Parsed rich text. It is plain JSON, so it can be produced on the server and sent in page
  * data. Renderers still treat it as untrusted and validate every node and destination.
@@ -61,7 +63,6 @@ export type RichTextLinkOptions = {
     /** App-owned mention destination; defaults to the selected social client. */
     mentionUrl?: (identifier: string) => string;
 };
-export declare function safeWebUrl(url: unknown): string | undefined;
 /** Only app-relative paths or HTTP(S), including for app-owned mention callbacks. */
 export declare function mentionHref(actor: unknown, options: RichTextLinkOptions): string | undefined;
 export declare function tagHref(tag: unknown, options: RichTextLinkOptions): string | undefined;

package/dist/richtext/document.js

@@ -1,18 +1,8 @@
 import { isActorIdentifier } from '@atcute/lexicons/syntax';
 import { socialHashtagUrl, socialProfileUrl } from '../social/urls.js';
-export function safeWebUrl(url) {
-    if (typeof url !== 'string' || !url)
-        return undefined;
-    try {
-        const parsed = new URL(url);
-        return ['https:', 'http:'].includes(parsed.protocol) && !parsed.username && !parsed.password
-            ? parsed.href
-            : undefined;
-    }
-    catch {
-        return undefined;
-    }
-}
+import { safeHttpUrl as safeWebUrl } from '../urls.js';
+// Backwards-compatible export for existing richtext and social consumers.
+export { safeWebUrl };
 /** Only app-relative paths or HTTP(S), including for app-owned mention callbacks. */
 export function mentionHref(actor, options) {
     if (typeof actor !== 'string' || !isActorIdentifier(actor))

package/dist/social/external-embeds.js

@@ -1,4 +1,4 @@
-import { safeWebUrl } from './richtext.js';
+import { safeHttpUrl as safeWebUrl } from '../urls.js';
 function youtubeStart(value) {
     if (!value)
         return 0;

package/dist/social/mention-suggestions.js

@@ -31,7 +31,7 @@ export function mentionSuggestions(search, host) {
             empty.role = 'option';
             empty.setAttribute('aria-disabled', 'true');
             empty.setAttribute('aria-selected', 'false');
-            empty.className = 'p-3 text-xs text-muted';
+            empty.className = 'p-3 text-xs text-base-600 dark:text-base-400';
             empty.textContent = 'No accounts found';
             menu.append(empty);
         }
@@ -42,12 +42,12 @@ export function mentionSuggestions(search, host) {
             option.id = `${menu.id}-${index}`;
             option.setAttribute('aria-selected', String(index === selected));
             option.className =
-                'block w-full rounded-ui px-3 py-2 text-left text-xs text-ink hover:bg-recess aria-selected:bg-recess';
+                'block w-full rounded-ui px-3 py-2 text-left text-xs text-base-950 dark:text-base-50 hover:bg-[color-mix(in_srgb,var(--base-100)_75%,var(--base-200))] dark:hover:bg-base-950 aria-selected:bg-[color-mix(in_srgb,var(--base-100)_75%,var(--base-200))] dark:aria-selected:bg-base-950';
             const name = document.createElement('strong');
             name.className = 'block truncate font-medium';
             name.textContent = actor.displayName || actor.handle;
             const handle = document.createElement('span');
-            handle.className = 'block truncate text-muted';
+            handle.className = 'block truncate text-base-600 dark:text-base-400';
             handle.textContent = `@${actor.handle}`;
             option.append(name, handle);
             option.onmousedown = (event) => event.preventDefault();
@@ -84,7 +84,7 @@ export function mentionSuggestions(search, host) {
                 menu.role = 'listbox';
                 menu.setAttribute('aria-label', 'Mention suggestions');
                 menu.className =
-                    'absolute z-60 w-70 max-w-full overflow-hidden rounded-ui border border-line bg-page p-1 font-sans text-ink';
+                    'absolute z-60 w-70 max-w-full overflow-hidden rounded-ui border border-base-300 dark:border-[color-mix(in_srgb,var(--base-800)_80%,var(--base-950))] bg-base-50 dark:bg-base-925 p-1 font-sans text-base-950 dark:text-base-50';
                 host().append(menu);
                 draw();
             },

package/dist/social/profile.js

@@ -1,5 +1,5 @@
 import { detectTokens } from '../richtext/detect.js';
-import { safeWebUrl } from './richtext.js';
+import { safeHttpUrl as safeWebUrl } from '../urls.js';
 import { socialHashtagUrl, socialProfileUrl } from './urls.js';
 /** Only web URLs; never accept executable schemes or disguised credentials. */
 export function safeProfileUrl(value) {

package/dist/styles.d.ts

@@ -1,2 +1,2 @@
-export declare const focus = "focus-visible:outline-2 focus-visible:outline-offset-3 focus-visible:outline-focus";
-export declare const control = "block min-h-11 w-full min-w-0 rounded-ui border border-control-line bg-field px-3 py-2.5 text-base leading-normal text-ink shadow-(--ui-recess-shadow) placeholder:text-muted transition-colors duration-(--atmo-duration) motion-reduce:transition-none hover:border-control-hover focus:ring-0 focus:ring-offset-0 focus-visible:border-focus focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-focus disabled:cursor-not-allowed disabled:opacity-45 disabled:hover:border-control-line aria-invalid:border-action aria-invalid:hover:border-action sm:text-sm";
+export declare const focus = "focus-visible:outline-2 focus-visible:outline-offset-3 focus-visible:outline-accent-700 dark:focus-visible:outline-accent-300";
+export declare const control = "block min-h-11 w-full min-w-0 rounded-ui border border-base-300 dark:border-base-800 bg-[color-mix(in_srgb,var(--base-100)_75%,var(--base-200))] dark:bg-base-975 px-3 py-2.5 text-base leading-normal text-base-950 dark:text-base-50 shadow-[inset_0_2px_4px_color-mix(in_srgb,var(--base-950)_8%,transparent),inset_0_5px_12px_color-mix(in_srgb,var(--base-950)_2%,transparent)] dark:shadow-[inset_0_2px_4px_#0006,inset_0_5px_12px_#0002] placeholder:text-base-600 dark:placeholder:text-base-400 transition-colors duration-(--atmo-duration) motion-reduce:transition-none hover:border-base-400 dark:hover:border-base-700 focus:ring-0 focus:ring-offset-0 focus-visible:border-accent-700 dark:focus-visible:border-accent-300 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-accent-700 dark:focus-visible:outline-accent-300 disabled:cursor-not-allowed disabled:opacity-45 disabled:hover:border-base-300 dark:disabled:hover:border-base-800 aria-invalid:border-accent-700 dark:aria-invalid:border-accent-300 aria-invalid:hover:border-accent-700 dark:aria-invalid:hover:border-accent-300 sm:text-sm";

package/dist/styles.js

@@ -1,3 +1,3 @@
 // Shared Tailwind recipes, not an additional component stylesheet.
-export const focus = 'focus-visible:outline-2 focus-visible:outline-offset-3 focus-visible:outline-focus';
-export const control = 'block min-h-11 w-full min-w-0 rounded-ui border border-control-line bg-field px-3 py-2.5 text-base leading-normal text-ink shadow-(--ui-recess-shadow) placeholder:text-muted transition-colors duration-(--atmo-duration) motion-reduce:transition-none hover:border-control-hover focus:ring-0 focus:ring-offset-0 focus-visible:border-focus focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-focus disabled:cursor-not-allowed disabled:opacity-45 disabled:hover:border-control-line aria-invalid:border-action aria-invalid:hover:border-action sm:text-sm';
+export const focus = 'focus-visible:outline-2 focus-visible:outline-offset-3 focus-visible:outline-accent-700 dark:focus-visible:outline-accent-300';
+export const control = 'block min-h-11 w-full min-w-0 rounded-ui border border-base-300 dark:border-base-800 bg-[color-mix(in_srgb,var(--base-100)_75%,var(--base-200))] dark:bg-base-975 px-3 py-2.5 text-base leading-normal text-base-950 dark:text-base-50 shadow-[inset_0_2px_4px_color-mix(in_srgb,var(--base-950)_8%,transparent),inset_0_5px_12px_color-mix(in_srgb,var(--base-950)_2%,transparent)] dark:shadow-[inset_0_2px_4px_#0006,inset_0_5px_12px_#0002] placeholder:text-base-600 dark:placeholder:text-base-400 transition-colors duration-(--atmo-duration) motion-reduce:transition-none hover:border-base-400 dark:hover:border-base-700 focus:ring-0 focus:ring-offset-0 focus-visible:border-accent-700 dark:focus-visible:border-accent-300 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-accent-700 dark:focus-visible:outline-accent-300 disabled:cursor-not-allowed disabled:opacity-45 disabled:hover:border-base-300 dark:disabled:hover:border-base-800 aria-invalid:border-accent-700 dark:aria-invalid:border-accent-300 aria-invalid:hover:border-accent-700 dark:aria-invalid:hover:border-accent-300 sm:text-sm';

package/dist/theme.css

@@ -4,6 +4,18 @@
 /* Resolve relative to this stylesheet in src/lib or the packaged dist directory. */
 @source './';
 
+/* Explicit document modes win; without one, follow the browser preference. */
+@custom-variant dark {
+	&:where(.dark, .dark *, [data-theme='dark'], [data-theme='dark'] *) {
+		@slot;
+	}
+	@media (prefers-color-scheme: dark) {
+		&:not(:where(.light, .light *, [data-theme='light'], [data-theme='light'] *)) {
+			@slot;
+		}
+	}
+}
+
 @theme inline {
 	--color-base-50: var(--base-50);
 	--color-base-100: var(--base-100);
@@ -15,7 +27,9 @@
 	--color-base-700: var(--base-700);
 	--color-base-800: var(--base-800);
 	--color-base-900: var(--base-900);
+	--color-base-925: var(--base-925);
 	--color-base-950: var(--base-950);
+	--color-base-975: var(--base-975);
 	--color-accent-50: var(--accent-50);
 	--color-accent-100: var(--accent-100);
 	--color-accent-200: var(--accent-200);
@@ -26,19 +40,9 @@
 	--color-accent-700: var(--accent-700);
 	--color-accent-800: var(--accent-800);
 	--color-accent-900: var(--accent-900);
+	--color-accent-925: var(--accent-925);
 	--color-accent-950: var(--accent-950);
-	--color-page: var(--ui-page);
-	--color-recess: var(--ui-recess);
-	--color-surface: var(--ui-surface);
-	--color-ink: var(--ui-ink);
-	--color-muted: var(--ui-muted);
-	--color-line: var(--ui-line);
-	--color-control-line: var(--ui-control-line);
-	--color-control-hover: var(--ui-control-hover);
-	--color-field: var(--ui-field);
-	--color-action: var(--ui-action);
-	--color-accent-soft: var(--ui-accent-soft);
-	--color-focus: var(--ui-focus);
+	--color-accent-975: var(--accent-975);
 	--font-sans: var(--atmo-font-sans);
 	--radius-ui: var(--atmo-radius-control);
 	--radius-panel: var(--atmo-radius-panel);
@@ -82,9 +86,8 @@
 		color-scheme: light;
 	}
 
-	/* Recompute semantic tokens at palette boundaries, not only at :root.
-	   A red button inside a blue section must resolve its own complete palette.
-	   Add atmo-theme to a custom-ramp boundary to get the same behavior. */
+	/* Derive the extra shades at palette boundaries, including custom ramps
+	   marked with atmo-theme. Ratios preserve the existing page/field colors. */
 	:where(
 		:root,
 		.atmo,
@@ -118,38 +121,14 @@
 		.pink,
 		.rose
 	) {
-		--ui-page: light-dark(var(--base-50), color-mix(in srgb, var(--base-900) 50%, var(--base-950)));
-		--ui-recess: light-dark(
-			color-mix(in srgb, var(--base-100) 75%, var(--base-200)),
-			var(--base-950)
-		);
-		--ui-surface: light-dark(var(--base-50), var(--base-900));
-		--ui-ink: light-dark(var(--base-950), var(--base-50));
-		--ui-muted: light-dark(var(--base-600), var(--base-400));
-		--ui-line: light-dark(
-			var(--base-300),
-			color-mix(in srgb, var(--base-800) 80%, var(--base-950))
-		);
-		--ui-field: light-dark(
-			color-mix(in srgb, var(--base-100) 75%, var(--base-200)),
-			color-mix(in srgb, var(--base-950) 80%, black)
-		);
-		--ui-control-line: light-dark(var(--base-300), var(--base-800));
-		--ui-control-hover: light-dark(var(--base-400), var(--base-700));
-		--ui-action: light-dark(var(--accent-700), var(--accent-300));
-		--ui-accent-soft: light-dark(
-			var(--accent-50),
-			color-mix(in srgb, var(--accent-950) 65%, var(--base-950))
-		);
-		--ui-focus: light-dark(var(--accent-700), var(--accent-300));
-		--ui-shadow: light-dark(color-mix(in srgb, var(--base-950) 8%, transparent), #0006);
-		--ui-shadow-soft: light-dark(color-mix(in srgb, var(--base-950) 2%, transparent), #0002);
-		--ui-recess-shadow: inset 0 2px 4px var(--ui-shadow), inset 0 5px 12px var(--ui-shadow-soft);
+		--base-925: color-mix(in srgb, var(--base-900) 50%, var(--base-950));
+		--base-975: color-mix(in srgb, var(--base-950) 80%, black);
+		--accent-925: color-mix(in srgb, var(--accent-900) 50%, var(--accent-950));
+		--accent-975: color-mix(in srgb, var(--accent-950) 80%, black);
 	}
 	.atmo {
 		font-family: var(--atmo-font-sans);
-		color: var(--ui-ink);
-		background: var(--ui-page);
+		@apply bg-base-50 text-base-950 dark:bg-base-925 dark:text-base-50;
 		-webkit-font-smoothing: antialiased;
 	}
 	.gray {

package/dist/theme.js

@@ -1,10 +1,9 @@
-// Portals leave their original DOM ancestry. Carry the originating palette,
-// semantic tokens, font, and color scheme with them; behavior stays in Bits UI.
+// Portals inherit the document's light/dark mode normally. Only carry scoped
+// palettes and typography, which would otherwise be lost outside their ancestry.
 export function readTheme(element) {
     const style = getComputedStyle(element);
-    const variables = Array.from(style).filter((name) => ['--base-', '--accent-', '--ui-', '--atmo-'].some((prefix) => name.startsWith(prefix)));
+    const variables = Array.from(style).filter((name) => ['--base-', '--accent-', '--atmo-'].some((prefix) => name.startsWith(prefix)));
     return [
-        `color-scheme:${style.colorScheme}`,
         `font-family:${style.fontFamily}`,
         ...variables.map((name) => `${name}:${style.getPropertyValue(name)}`)
     ].join(';');
@@ -19,12 +18,5 @@ export function observeTheme(element, update) {
         });
         parent = parent.parentElement;
     }
-    // readTheme snapshots computed semantic colors for portals. Those colors
-    // change with the system scheme even when no ancestor attribute changes.
-    const scheme = window.matchMedia('(prefers-color-scheme: dark)');
-    scheme.addEventListener('change', update);
-    return () => {
-        observer.disconnect();
-        scheme.removeEventListener('change', update);
-    };
+    return () => observer.disconnect();
 }

package/dist/urls.d.ts

@@ -0,0 +1,9 @@
+/** Untrusted external destinations: absolute HTTP(S) URLs without credentials.
+ * This validates browser destinations, not hosts for server-side fetching (SSRF).
+ */
+export declare function safeHttpUrl(value: unknown): string | undefined;
+/** Navigation also supports root-relative app paths, fragments and mail/phone actions.
+ * Use safeHttpUrl instead when a record field must contain an external website.
+ * Invalid destinations return undefined so renderers omit href rather than falling back to it.
+ */
+export declare function safeLinkHref(value: unknown): string | undefined;

package/dist/urls.js

@@ -0,0 +1,39 @@
+/** Untrusted external destinations: absolute HTTP(S) URLs without credentials.
+ * This validates browser destinations, not hosts for server-side fetching (SSRF).
+ */
+export function safeHttpUrl(value) {
+    if (typeof value !== 'string' || !value)
+        return undefined;
+    try {
+        const url = new URL(value);
+        return (url.protocol === 'https:' || url.protocol === 'http:') && !url.username && !url.password
+            ? url.href
+            : undefined;
+    }
+    catch {
+        return undefined;
+    }
+}
+/** Navigation also supports root-relative app paths, fragments and mail/phone actions.
+ * Use safeHttpUrl instead when a record field must contain an external website.
+ * Invalid destinations return undefined so renderers omit href rather than falling back to it.
+ */
+export function safeLinkHref(value) {
+    const http = safeHttpUrl(value);
+    if (http)
+        return http;
+    if (typeof value !== 'string' || !value)
+        return undefined;
+    // Never normalize an ambiguous local/contact link into a different destination.
+    if (Array.from(value).some((c) => c === '\\' || c.charCodeAt(0) <= 0x20 || c.charCodeAt(0) === 0x7f))
+        return undefined;
+    if (value.startsWith('#') || (value.startsWith('/') && !value.startsWith('//')))
+        return value;
+    try {
+        const url = new URL(value);
+        return url.protocol === 'mailto:' || url.protocol === 'tel:' ? url.href : undefined;
+    }
+    catch {
+        return undefined;
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atmo-dev/kit",
-  "version": "0.8.0",
+  "version": "0.10.0",
   "description": "The shared UI foundation for Atmo apps.",
   "license": "MIT",
   "repository": {
@@ -56,6 +56,10 @@
       "types": "./dist/media.d.ts",
       "default": "./dist/media.js"
     },
+    "./urls": {
+      "types": "./dist/urls.d.ts",
+      "default": "./dist/urls.js"
+    },
     "./richtext": {
       "types": "./dist/richtext.d.ts",
       "default": "./dist/richtext.js"