@atmo-dev/kit 0.0.0-stage → 0.0.2

package/dist/social/richtext.js

@@ -0,0 +1,100 @@
+import { tokenize } from '@atcute/bluesky-richtext-parser';
+export function safeWebUrl(url) {
+    if (!url)
+        return undefined;
+    try {
+        const parsed = new URL(url);
+        return ['https:', 'http:'].includes(parsed.protocol) ? parsed.href : undefined;
+    }
+    catch {
+        return undefined;
+    }
+}
+export function textToDoc(text) {
+    return {
+        type: 'doc',
+        content: text
+            .split('\n')
+            .map((line) => ({ type: 'paragraph', content: line ? [{ type: 'text', text: line }] : [] }))
+    };
+}
+/** Serialize mention nodes first, then detect links/tags using UTF-8 byte offsets. */
+export function editorJsonToBlueskyPost(doc) {
+    let text = '';
+    const mentions = [];
+    const bytes = (value) => new TextEncoder().encode(value).length;
+    function visit(node) {
+        if (node.type === 'text')
+            text += node.text ?? '';
+        else if (node.type === 'hardBreak')
+            text += '\n';
+        else if (node.type === 'mention') {
+            const label = `@${node.attrs?.label ?? node.attrs?.id ?? ''}`;
+            const byteStart = bytes(text);
+            text += label;
+            if (typeof node.attrs?.id === 'string' && node.attrs.id.startsWith('did:'))
+                mentions.push({
+                    index: { byteStart, byteEnd: bytes(text) },
+                    features: [{ $type: 'app.bsky.richtext.facet#mention', did: node.attrs.id }]
+                });
+        }
+        else
+            node.content?.forEach(visit);
+    }
+    (doc.content ?? []).forEach((node, index) => {
+        if (index)
+            text += '\n';
+        visit(node);
+    });
+    const facets = [...mentions];
+    let byteStart = 0;
+    for (const token of tokenize(text)) {
+        const byteEnd = byteStart + bytes(token.raw);
+        if (!mentions.some((m) => byteStart < m.index.byteEnd && byteEnd > m.index.byteStart)) {
+            if (token.type === 'autolink')
+                facets.push({
+                    index: { byteStart, byteEnd },
+                    features: [{ $type: 'app.bsky.richtext.facet#link', uri: token.url }]
+                });
+            if (token.type === 'topic')
+                facets.push({
+                    index: { byteStart, byteEnd },
+                    features: [{ $type: 'app.bsky.richtext.facet#tag', tag: token.name }]
+                });
+        }
+        byteStart = byteEnd;
+    }
+    return { text, facets: facets.sort((a, b) => a.index.byteStart - b.index.byteStart) };
+}
+export function richTextSegments(text, facets = []) {
+    const encoded = new TextEncoder().encode(text);
+    const decoder = new TextDecoder();
+    const segments = [];
+    let cursor = 0;
+    for (const facet of [...facets].sort((a, b) => a.index.byteStart - b.index.byteStart)) {
+        const { byteStart, byteEnd } = facet.index;
+        if (!Number.isInteger(byteStart) ||
+            !Number.isInteger(byteEnd) ||
+            byteStart < cursor ||
+            byteEnd <= byteStart ||
+            byteEnd > encoded.length)
+            continue;
+        const feature = facet.features?.[0];
+        const href = feature?.did
+            ? `https://bsky.app/profile/${encodeURIComponent(feature.did)}`
+            : feature?.uri
+                ? safeWebUrl(feature.uri)
+                : feature?.tag
+                    ? `https://bsky.app/hashtag/${encodeURIComponent(feature.tag)}`
+                    : undefined;
+        segments.push({ text: decoder.decode(encoded.slice(cursor, byteStart)) });
+        segments.push({ text: decoder.decode(encoded.slice(byteStart, byteEnd)), href });
+        cursor = byteEnd;
+    }
+    segments.push({ text: decoder.decode(encoded.slice(cursor)) });
+    return segments;
+}
+export function graphemeLength(text) {
+    return Array.from(new Intl.Segmenter(undefined, { granularity: 'grapheme' }).segment(text))
+        .length;
+}

package/dist/styles.d.ts

@@ -0,0 +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";

package/dist/styles.js

@@ -0,0 +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';

package/dist/theme.css

@@ -0,0 +1,499 @@
+@import '@fontsource-variable/figtree';
+
+/* Resolve relative to this stylesheet in src/lib or the packaged dist directory. */
+@source './';
+
+@theme inline {
+	--color-base-50: var(--base-50);
+	--color-base-100: var(--base-100);
+	--color-base-200: var(--base-200);
+	--color-base-300: var(--base-300);
+	--color-base-400: var(--base-400);
+	--color-base-500: var(--base-500);
+	--color-base-600: var(--base-600);
+	--color-base-700: var(--base-700);
+	--color-base-800: var(--base-800);
+	--color-base-900: var(--base-900);
+	--color-base-950: var(--base-950);
+	--color-accent-50: var(--accent-50);
+	--color-accent-100: var(--accent-100);
+	--color-accent-200: var(--accent-200);
+	--color-accent-300: var(--accent-300);
+	--color-accent-400: var(--accent-400);
+	--color-accent-500: var(--accent-500);
+	--color-accent-600: var(--accent-600);
+	--color-accent-700: var(--accent-700);
+	--color-accent-800: var(--accent-800);
+	--color-accent-900: var(--accent-900);
+	--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);
+	--font-sans: var(--atmo-font-sans);
+	--radius-ui: var(--atmo-radius-control);
+	--radius-panel: var(--atmo-radius-panel);
+}
+
+@layer base {
+	:root {
+		--base-50: var(--color-zinc-50);
+		--base-100: var(--color-zinc-100);
+		--base-200: var(--color-zinc-200);
+		--base-300: var(--color-zinc-300);
+		--base-400: var(--color-zinc-400);
+		--base-500: var(--color-zinc-500);
+		--base-600: var(--color-zinc-600);
+		--base-700: var(--color-zinc-700);
+		--base-800: var(--color-zinc-800);
+		--base-900: var(--color-zinc-900);
+		--base-950: var(--color-zinc-950);
+		--accent-50: var(--color-pink-50);
+		--accent-100: var(--color-pink-100);
+		--accent-200: var(--color-pink-200);
+		--accent-300: var(--color-pink-300);
+		--accent-400: var(--color-pink-400);
+		--accent-500: var(--color-pink-500);
+		--accent-600: var(--color-pink-600);
+		--accent-700: var(--color-pink-700);
+		--accent-800: var(--color-pink-800);
+		--accent-900: var(--color-pink-900);
+		--accent-950: var(--color-pink-950);
+		--atmo-font-sans: 'Figtree Variable', ui-sans-serif, system-ui, sans-serif;
+		--atmo-radius-control: 10px 12px 9px 11px / 11px 9px 12px 10px;
+		--atmo-radius-button: 11px 13px 10px 12px / 12px 10px 13px 11px;
+		--atmo-radius-panel: 24px 21px 25px 22px / 22px 25px 21px 24px;
+		--atmo-duration: 120ms;
+		color-scheme: light dark;
+	}
+	:where(.dark, [data-theme='dark']) {
+		color-scheme: dark;
+	}
+	:where(.light, [data-theme='light']) {
+		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. */
+	:where(
+		:root,
+		.atmo,
+		.atmo-theme,
+		.gray,
+		.zinc,
+		.neutral,
+		.stone,
+		.slate,
+		.mist,
+		.mauve,
+		.olive,
+		.taupe,
+		.sand,
+		.sage,
+		.red,
+		.orange,
+		.amber,
+		.yellow,
+		.lime,
+		.green,
+		.emerald,
+		.teal,
+		.cyan,
+		.sky,
+		.blue,
+		.indigo,
+		.violet,
+		.purple,
+		.fuchsia,
+		.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);
+	}
+	.atmo {
+		font-family: var(--atmo-font-sans);
+		color: var(--ui-ink);
+		background: var(--ui-page);
+		-webkit-font-smoothing: antialiased;
+	}
+	.gray {
+		--base-50: var(--color-gray-50);
+		--base-100: var(--color-gray-100);
+		--base-200: var(--color-gray-200);
+		--base-300: var(--color-gray-300);
+		--base-400: var(--color-gray-400);
+		--base-500: var(--color-gray-500);
+		--base-600: var(--color-gray-600);
+		--base-700: var(--color-gray-700);
+		--base-800: var(--color-gray-800);
+		--base-900: var(--color-gray-900);
+		--base-950: var(--color-gray-950);
+	}
+	.zinc {
+		--base-50: var(--color-zinc-50);
+		--base-100: var(--color-zinc-100);
+		--base-200: var(--color-zinc-200);
+		--base-300: var(--color-zinc-300);
+		--base-400: var(--color-zinc-400);
+		--base-500: var(--color-zinc-500);
+		--base-600: var(--color-zinc-600);
+		--base-700: var(--color-zinc-700);
+		--base-800: var(--color-zinc-800);
+		--base-900: var(--color-zinc-900);
+		--base-950: var(--color-zinc-950);
+	}
+	.neutral {
+		--base-50: var(--color-neutral-50);
+		--base-100: var(--color-neutral-100);
+		--base-200: var(--color-neutral-200);
+		--base-300: var(--color-neutral-300);
+		--base-400: var(--color-neutral-400);
+		--base-500: var(--color-neutral-500);
+		--base-600: var(--color-neutral-600);
+		--base-700: var(--color-neutral-700);
+		--base-800: var(--color-neutral-800);
+		--base-900: var(--color-neutral-900);
+		--base-950: var(--color-neutral-950);
+	}
+	.stone {
+		--base-50: var(--color-stone-50);
+		--base-100: var(--color-stone-100);
+		--base-200: var(--color-stone-200);
+		--base-300: var(--color-stone-300);
+		--base-400: var(--color-stone-400);
+		--base-500: var(--color-stone-500);
+		--base-600: var(--color-stone-600);
+		--base-700: var(--color-stone-700);
+		--base-800: var(--color-stone-800);
+		--base-900: var(--color-stone-900);
+		--base-950: var(--color-stone-950);
+	}
+	.slate {
+		--base-50: var(--color-slate-50);
+		--base-100: var(--color-slate-100);
+		--base-200: var(--color-slate-200);
+		--base-300: var(--color-slate-300);
+		--base-400: var(--color-slate-400);
+		--base-500: var(--color-slate-500);
+		--base-600: var(--color-slate-600);
+		--base-700: var(--color-slate-700);
+		--base-800: var(--color-slate-800);
+		--base-900: var(--color-slate-900);
+		--base-950: var(--color-slate-950);
+	}
+	.mist {
+		--base-50: var(--color-mist-50);
+		--base-100: var(--color-mist-100);
+		--base-200: var(--color-mist-200);
+		--base-300: var(--color-mist-300);
+		--base-400: var(--color-mist-400);
+		--base-500: var(--color-mist-500);
+		--base-600: var(--color-mist-600);
+		--base-700: var(--color-mist-700);
+		--base-800: var(--color-mist-800);
+		--base-900: var(--color-mist-900);
+		--base-950: var(--color-mist-950);
+	}
+	.mauve {
+		--base-50: var(--color-mauve-50);
+		--base-100: var(--color-mauve-100);
+		--base-200: var(--color-mauve-200);
+		--base-300: var(--color-mauve-300);
+		--base-400: var(--color-mauve-400);
+		--base-500: var(--color-mauve-500);
+		--base-600: var(--color-mauve-600);
+		--base-700: var(--color-mauve-700);
+		--base-800: var(--color-mauve-800);
+		--base-900: var(--color-mauve-900);
+		--base-950: var(--color-mauve-950);
+	}
+	.olive,
+	.sage {
+		--base-50: var(--color-olive-50);
+		--base-100: var(--color-olive-100);
+		--base-200: var(--color-olive-200);
+		--base-300: var(--color-olive-300);
+		--base-400: var(--color-olive-400);
+		--base-500: var(--color-olive-500);
+		--base-600: var(--color-olive-600);
+		--base-700: var(--color-olive-700);
+		--base-800: var(--color-olive-800);
+		--base-900: var(--color-olive-900);
+		--base-950: var(--color-olive-950);
+	}
+	.taupe,
+	.sand {
+		--base-50: var(--color-taupe-50);
+		--base-100: var(--color-taupe-100);
+		--base-200: var(--color-taupe-200);
+		--base-300: var(--color-taupe-300);
+		--base-400: var(--color-taupe-400);
+		--base-500: var(--color-taupe-500);
+		--base-600: var(--color-taupe-600);
+		--base-700: var(--color-taupe-700);
+		--base-800: var(--color-taupe-800);
+		--base-900: var(--color-taupe-900);
+		--base-950: var(--color-taupe-950);
+	}
+	.red {
+		--accent-50: var(--color-red-50);
+		--accent-100: var(--color-red-100);
+		--accent-200: var(--color-red-200);
+		--accent-300: var(--color-red-300);
+		--accent-400: var(--color-red-400);
+		--accent-500: var(--color-red-500);
+		--accent-600: var(--color-red-600);
+		--accent-700: var(--color-red-700);
+		--accent-800: var(--color-red-800);
+		--accent-900: var(--color-red-900);
+		--accent-950: var(--color-red-950);
+	}
+	.orange {
+		--accent-50: var(--color-orange-50);
+		--accent-100: var(--color-orange-100);
+		--accent-200: var(--color-orange-200);
+		--accent-300: var(--color-orange-300);
+		--accent-400: var(--color-orange-400);
+		--accent-500: var(--color-orange-500);
+		--accent-600: var(--color-orange-600);
+		--accent-700: var(--color-orange-700);
+		--accent-800: var(--color-orange-800);
+		--accent-900: var(--color-orange-900);
+		--accent-950: var(--color-orange-950);
+	}
+	.amber {
+		--accent-50: var(--color-amber-50);
+		--accent-100: var(--color-amber-100);
+		--accent-200: var(--color-amber-200);
+		--accent-300: var(--color-amber-300);
+		--accent-400: var(--color-amber-400);
+		--accent-500: var(--color-amber-500);
+		--accent-600: var(--color-amber-600);
+		--accent-700: var(--color-amber-700);
+		--accent-800: var(--color-amber-800);
+		--accent-900: var(--color-amber-900);
+		--accent-950: var(--color-amber-950);
+	}
+	.yellow {
+		--accent-50: var(--color-yellow-50);
+		--accent-100: var(--color-yellow-100);
+		--accent-200: var(--color-yellow-200);
+		--accent-300: var(--color-yellow-300);
+		--accent-400: var(--color-yellow-400);
+		--accent-500: var(--color-yellow-500);
+		--accent-600: var(--color-yellow-600);
+		--accent-700: var(--color-yellow-700);
+		--accent-800: var(--color-yellow-800);
+		--accent-900: var(--color-yellow-900);
+		--accent-950: var(--color-yellow-950);
+	}
+	.lime {
+		--accent-50: var(--color-lime-50);
+		--accent-100: var(--color-lime-100);
+		--accent-200: var(--color-lime-200);
+		--accent-300: var(--color-lime-300);
+		--accent-400: var(--color-lime-400);
+		--accent-500: var(--color-lime-500);
+		--accent-600: var(--color-lime-600);
+		--accent-700: var(--color-lime-700);
+		--accent-800: var(--color-lime-800);
+		--accent-900: var(--color-lime-900);
+		--accent-950: var(--color-lime-950);
+	}
+	.green {
+		--accent-50: var(--color-green-50);
+		--accent-100: var(--color-green-100);
+		--accent-200: var(--color-green-200);
+		--accent-300: var(--color-green-300);
+		--accent-400: var(--color-green-400);
+		--accent-500: var(--color-green-500);
+		--accent-600: var(--color-green-600);
+		--accent-700: var(--color-green-700);
+		--accent-800: var(--color-green-800);
+		--accent-900: var(--color-green-900);
+		--accent-950: var(--color-green-950);
+	}
+	.emerald {
+		--accent-50: var(--color-emerald-50);
+		--accent-100: var(--color-emerald-100);
+		--accent-200: var(--color-emerald-200);
+		--accent-300: var(--color-emerald-300);
+		--accent-400: var(--color-emerald-400);
+		--accent-500: var(--color-emerald-500);
+		--accent-600: var(--color-emerald-600);
+		--accent-700: var(--color-emerald-700);
+		--accent-800: var(--color-emerald-800);
+		--accent-900: var(--color-emerald-900);
+		--accent-950: var(--color-emerald-950);
+	}
+	.teal {
+		--accent-50: var(--color-teal-50);
+		--accent-100: var(--color-teal-100);
+		--accent-200: var(--color-teal-200);
+		--accent-300: var(--color-teal-300);
+		--accent-400: var(--color-teal-400);
+		--accent-500: var(--color-teal-500);
+		--accent-600: var(--color-teal-600);
+		--accent-700: var(--color-teal-700);
+		--accent-800: var(--color-teal-800);
+		--accent-900: var(--color-teal-900);
+		--accent-950: var(--color-teal-950);
+	}
+	.cyan {
+		--accent-50: var(--color-cyan-50);
+		--accent-100: var(--color-cyan-100);
+		--accent-200: var(--color-cyan-200);
+		--accent-300: var(--color-cyan-300);
+		--accent-400: var(--color-cyan-400);
+		--accent-500: var(--color-cyan-500);
+		--accent-600: var(--color-cyan-600);
+		--accent-700: var(--color-cyan-700);
+		--accent-800: var(--color-cyan-800);
+		--accent-900: var(--color-cyan-900);
+		--accent-950: var(--color-cyan-950);
+	}
+	.sky {
+		--accent-50: var(--color-sky-50);
+		--accent-100: var(--color-sky-100);
+		--accent-200: var(--color-sky-200);
+		--accent-300: var(--color-sky-300);
+		--accent-400: var(--color-sky-400);
+		--accent-500: var(--color-sky-500);
+		--accent-600: var(--color-sky-600);
+		--accent-700: var(--color-sky-700);
+		--accent-800: var(--color-sky-800);
+		--accent-900: var(--color-sky-900);
+		--accent-950: var(--color-sky-950);
+	}
+	.blue {
+		--accent-50: var(--color-blue-50);
+		--accent-100: var(--color-blue-100);
+		--accent-200: var(--color-blue-200);
+		--accent-300: var(--color-blue-300);
+		--accent-400: var(--color-blue-400);
+		--accent-500: var(--color-blue-500);
+		--accent-600: var(--color-blue-600);
+		--accent-700: var(--color-blue-700);
+		--accent-800: var(--color-blue-800);
+		--accent-900: var(--color-blue-900);
+		--accent-950: var(--color-blue-950);
+	}
+	.indigo {
+		--accent-50: var(--color-indigo-50);
+		--accent-100: var(--color-indigo-100);
+		--accent-200: var(--color-indigo-200);
+		--accent-300: var(--color-indigo-300);
+		--accent-400: var(--color-indigo-400);
+		--accent-500: var(--color-indigo-500);
+		--accent-600: var(--color-indigo-600);
+		--accent-700: var(--color-indigo-700);
+		--accent-800: var(--color-indigo-800);
+		--accent-900: var(--color-indigo-900);
+		--accent-950: var(--color-indigo-950);
+	}
+	.violet {
+		--accent-50: var(--color-violet-50);
+		--accent-100: var(--color-violet-100);
+		--accent-200: var(--color-violet-200);
+		--accent-300: var(--color-violet-300);
+		--accent-400: var(--color-violet-400);
+		--accent-500: var(--color-violet-500);
+		--accent-600: var(--color-violet-600);
+		--accent-700: var(--color-violet-700);
+		--accent-800: var(--color-violet-800);
+		--accent-900: var(--color-violet-900);
+		--accent-950: var(--color-violet-950);
+	}
+	.purple {
+		--accent-50: var(--color-purple-50);
+		--accent-100: var(--color-purple-100);
+		--accent-200: var(--color-purple-200);
+		--accent-300: var(--color-purple-300);
+		--accent-400: var(--color-purple-400);
+		--accent-500: var(--color-purple-500);
+		--accent-600: var(--color-purple-600);
+		--accent-700: var(--color-purple-700);
+		--accent-800: var(--color-purple-800);
+		--accent-900: var(--color-purple-900);
+		--accent-950: var(--color-purple-950);
+	}
+	.fuchsia {
+		--accent-50: var(--color-fuchsia-50);
+		--accent-100: var(--color-fuchsia-100);
+		--accent-200: var(--color-fuchsia-200);
+		--accent-300: var(--color-fuchsia-300);
+		--accent-400: var(--color-fuchsia-400);
+		--accent-500: var(--color-fuchsia-500);
+		--accent-600: var(--color-fuchsia-600);
+		--accent-700: var(--color-fuchsia-700);
+		--accent-800: var(--color-fuchsia-800);
+		--accent-900: var(--color-fuchsia-900);
+		--accent-950: var(--color-fuchsia-950);
+	}
+	.pink {
+		--accent-50: var(--color-pink-50);
+		--accent-100: var(--color-pink-100);
+		--accent-200: var(--color-pink-200);
+		--accent-300: var(--color-pink-300);
+		--accent-400: var(--color-pink-400);
+		--accent-500: var(--color-pink-500);
+		--accent-600: var(--color-pink-600);
+		--accent-700: var(--color-pink-700);
+		--accent-800: var(--color-pink-800);
+		--accent-900: var(--color-pink-900);
+		--accent-950: var(--color-pink-950);
+	}
+	.rose {
+		--accent-50: var(--color-rose-50);
+		--accent-100: var(--color-rose-100);
+		--accent-200: var(--color-rose-200);
+		--accent-300: var(--color-rose-300);
+		--accent-400: var(--color-rose-400);
+		--accent-500: var(--color-rose-500);
+		--accent-600: var(--color-rose-600);
+		--accent-700: var(--color-rose-700);
+		--accent-800: var(--color-rose-800);
+		--accent-900: var(--color-rose-900);
+		--accent-950: var(--color-rose-950);
+	}
+	@media (prefers-reduced-motion: reduce) {
+		:root {
+			--atmo-duration: 0ms;
+		}
+	}
+}

package/dist/theme.d.ts

@@ -0,0 +1,2 @@
+export declare function readTheme(element: HTMLElement): string;
+export declare function observeTheme(element: HTMLElement, update: () => void): () => void;

package/dist/theme.js

@@ -0,0 +1,23 @@
+// Portals leave their original DOM ancestry. Carry the originating palette,
+// semantic tokens, font, and color scheme with them; behavior stays in Bits UI.
+export function readTheme(element) {
+    const style = getComputedStyle(element);
+    const variables = Array.from(style).filter((name) => ['--base-', '--accent-', '--ui-', '--atmo-'].some((prefix) => name.startsWith(prefix)));
+    return [
+        `color-scheme:${style.colorScheme}`,
+        `font-family:${style.fontFamily}`,
+        ...variables.map((name) => `${name}:${style.getPropertyValue(name)}`)
+    ].join(';');
+}
+export function observeTheme(element, update) {
+    const observer = new MutationObserver(update);
+    let parent = element;
+    while (parent) {
+        observer.observe(parent, {
+            attributes: true,
+            attributeFilter: ['class', 'style', 'data-theme']
+        });
+        parent = parent.parentElement;
+    }
+    return () => observer.disconnect();
+}

package/dist/utils.d.ts

@@ -0,0 +1,2 @@
+import { type ClassValue } from 'clsx';
+export declare function cn(...values: ClassValue[]): string;

package/dist/utils.js

@@ -0,0 +1,6 @@
+import { clsx } from 'clsx';
+import { extendTailwindMerge } from 'tailwind-merge';
+const twMerge = extendTailwindMerge({ extend: { theme: { radius: ['ui', 'panel'] } } });
+export function cn(...values) {
+    return twMerge(clsx(values));
+}