@atmo-dev/kit 0.0.0-stage → 0.0.2

package/dist/components/PostContent.svelte

@@ -0,0 +1,62 @@
+<script lang="ts">
+	import type { PostData } from '../social/posts.js';
+	import { richTextSegments, safeWebUrl } from '../social/richtext.js';
+	import LinkCard from './LinkCard.svelte';
+	import PostVideo from './PostVideo.svelte';
+	import PostContent from './PostContent.svelte';
+	let { post }: { post: PostData } = $props();
+</script>
+
+<p class="text-sm leading-relaxed break-words whitespace-pre-wrap text-ink">
+	{#each richTextSegments(post.text, post.facets) as segment, index (index)}{#if segment.href}<a
+				href={segment.href}
+				target="_blank"
+				rel="noopener noreferrer nofollow"
+				class="text-action underline decoration-action/40 underline-offset-2 hover:decoration-action"
+				>{segment.text}</a
+			>{:else}{segment.text}{/if}{/each}
+</p>
+{#each post.embeds ?? [] as embed, index (index)}
+	<div class="mt-3">
+		{#if embed.type === 'external'}<LinkCard
+				href={embed.uri}
+				meta={{ title: embed.title, description: embed.description, image: embed.image }}
+			/>
+		{:else if embed.type === 'images'}<div
+				class="grid gap-1 overflow-hidden rounded-ui border border-line"
+				class:grid-cols-2={embed.images.length > 1}
+			>
+				{#each embed.images as image (image.src)}<a
+						href={safeWebUrl(image.fullsize ?? image.src)}
+						target="_blank"
+						rel="noopener noreferrer"
+						><img
+							src={safeWebUrl(image.src)}
+							alt={image.alt}
+							loading="lazy"
+							width={image.width}
+							height={image.height}
+							class="max-h-80 w-full object-cover"
+							class:aspect-square={embed.images.length > 1}
+						/></a
+					>{/each}
+			</div>
+		{:else if embed.type === 'video'}<PostVideo
+				playlist={embed.playlist}
+				poster={embed.poster}
+				label={embed.alt}
+				href={post.href}
+			/>
+		{:else if embed.type === 'quote'}<div class="rounded-ui border border-line p-3">
+				{#if embed.post}<a
+						href={safeWebUrl(embed.post.href)}
+						target="_blank"
+						rel="noopener noreferrer"
+						class="mb-2 block text-xs font-medium text-muted"
+						>{embed.post.author.name} · @{embed.post.author.handle}</a
+					><PostContent post={embed.post} />{:else}<p class="text-xs text-muted">
+						Post unavailable
+					</p>{/if}
+			</div>{/if}
+	</div>
+{/each}

package/dist/components/PostContent.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { PostData } from '../social/posts.js';
+import PostContent from './PostContent.svelte';
+type $$ComponentProps = {
+    post: PostData;
+};
+declare const PostContent: import("svelte").Component<$$ComponentProps, {}, "">;
+type PostContent = ReturnType<typeof PostContent>;
+export default PostContent;

package/dist/components/PostVideo.svelte

@@ -0,0 +1,74 @@
+<script lang="ts">
+	import { safeWebUrl } from '../social/richtext.js';
+	import Icon from './Icon.svelte';
+	import { ArrowUpRight } from '@sketchyicons/svelte';
+	let {
+		playlist,
+		poster,
+		label,
+		href
+	}: { playlist: string; poster?: string; label?: string; href: string } = $props();
+	let video = $state<HTMLVideoElement | null>(null);
+	// Writable derived state resets a playback failure when the source changes.
+	let failed = $derived(!safeWebUrl(playlist));
+	$effect(() => {
+		const source = safeWebUrl(playlist),
+			media = video;
+		if (!source || !media || failed) return;
+		let cancelled = false;
+		let destroy: (() => void) | undefined;
+		if (media.canPlayType('application/vnd.apple.mpegurl')) media.src = source;
+		else
+			void import('hls.js')
+				.then(({ default: Hls }) => {
+					if (cancelled) return;
+					if (!Hls.isSupported()) {
+						failed = true;
+						return;
+					}
+					const hls = new Hls({ autoStartLoad: false });
+					hls.loadSource(source);
+					hls.attachMedia(media);
+					const play = () => hls.startLoad();
+					media.addEventListener('play', play);
+					hls.on(Hls.Events.ERROR, (_event, data) => {
+						if (data.fatal && !cancelled) failed = true;
+					});
+					destroy = () => {
+						media.removeEventListener('play', play);
+						hls.destroy();
+					};
+				})
+				.catch(() => {
+					if (!cancelled) failed = true;
+				});
+		return () => {
+			cancelled = true;
+			destroy?.();
+			media.pause();
+			media.removeAttribute('src');
+			media.load();
+		};
+	});
+</script>
+
+{#if !failed}
+	<!-- Bluesky's video view supplies alt text, but no caption track. -->
+	<video
+		bind:this={video}
+		poster={safeWebUrl(poster)}
+		aria-label={label || 'Bluesky video'}
+		controls
+		playsinline
+		preload="none"
+		class="max-h-96 w-full rounded-ui bg-black"
+		onerror={() => (failed = true)}
+	></video>
+{/if}
+<a
+	href={safeWebUrl(href)}
+	target="_blank"
+	rel="noopener noreferrer"
+	class="mt-1 inline-flex items-center gap-1 text-xs text-action hover:underline"
+	>Watch on Bluesky <Icon img={ArrowUpRight} size={14} /></a
+>

package/dist/components/PostVideo.svelte.d.ts

@@ -0,0 +1,9 @@
+type $$ComponentProps = {
+    playlist: string;
+    poster?: string;
+    label?: string;
+    href: string;
+};
+declare const PostVideo: import("svelte").Component<$$ComponentProps, {}, "">;
+type PostVideo = ReturnType<typeof PostVideo>;
+export default PostVideo;

package/dist/components/Select.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+	import type { HTMLSelectAttributes } from 'svelte/elements';
+	import { cn } from '../utils.js';
+	import { control } from '../styles.js';
+	import Icon from './Icon.svelte';
+	import { ChevronDown } from '@sketchyicons/svelte';
+	let {
+		class: className,
+		value = $bindable<string | undefined>(),
+		ref = $bindable(null),
+		children,
+		...rest
+	}: Omit<HTMLSelectAttributes, 'value' | 'multiple'> & {
+		value?: string;
+		multiple?: never;
+		ref?: HTMLSelectElement | null;
+	} = $props();
+</script>
+
+<span class="relative block">
+	<select
+		{...rest}
+		bind:value
+		bind:this={ref}
+		data-slot="select"
+		class={cn(control, 'cursor-pointer appearance-none pr-11', className)}
+		>{@render children?.()}</select
+	>
+	<Icon
+		img={ChevronDown}
+		size={17}
+		class="pointer-events-none absolute top-1/2 right-3 -translate-y-1/2 text-muted"
+	/>
+</span>

package/dist/components/Select.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { HTMLSelectAttributes } from 'svelte/elements';
+type $$ComponentProps = Omit<HTMLSelectAttributes, 'value' | 'multiple'> & {
+    value?: string;
+    multiple?: never;
+    ref?: HTMLSelectElement | null;
+};
+declare const Select: import("svelte").Component<$$ComponentProps, {}, "value" | "ref">;
+type Select = ReturnType<typeof Select>;
+export default Select;

package/dist/components/Subheading.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn } from '../utils.js';
+	let {
+		class: className,
+		level = 2,
+		ref = $bindable(null),
+		children,
+		...rest
+	}: HTMLAttributes<HTMLHeadingElement> & {
+		level?: 1 | 2 | 3 | 4 | 5 | 6;
+		ref?: HTMLHeadingElement | null;
+	} = $props();
+</script>
+
+<svelte:element
+	this={`h${level}`}
+	{...rest}
+	bind:this={ref}
+	class={cn('m-0 text-lg leading-snug font-medium tracking-tight text-ink', className)}
+	>{@render children?.()}</svelte:element
+>

package/dist/components/Subheading.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { HTMLAttributes } from 'svelte/elements';
+type $$ComponentProps = HTMLAttributes<HTMLHeadingElement> & {
+    level?: 1 | 2 | 3 | 4 | 5 | 6;
+    ref?: HTMLHeadingElement | null;
+};
+declare const Subheading: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type Subheading = ReturnType<typeof Subheading>;
+export default Subheading;

package/dist/components/Surface.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn } from '../utils.js';
+	import { focus } from '../styles.js';
+	let {
+		class: className,
+		as = 'div',
+		variant = 'recessed',
+		ref = $bindable(null),
+		type,
+		disabled,
+		children,
+		...rest
+	}: HTMLAttributes<HTMLElement> & {
+		as?: 'div' | 'section' | 'article' | 'aside' | 'main' | 'button';
+		type?: 'button' | 'submit' | 'reset';
+		disabled?: boolean;
+		variant?: 'recessed' | 'plain';
+		ref?: HTMLElement | null;
+	} = $props();
+</script>
+
+<svelte:element
+	this={as}
+	{...rest}
+	type={as === 'button' ? (type ?? 'button') : undefined}
+	disabled={as === 'button' ? disabled : undefined}
+	bind:this={ref}
+	data-slot="surface"
+	class={cn(
+		'rounded-panel p-6 text-ink',
+		variant === 'recessed' && 'border border-line bg-recess shadow-(--ui-recess-shadow)',
+		as === 'button' &&
+			cn(
+				'cursor-pointer touch-manipulation disabled:pointer-events-none disabled:opacity-45',
+				focus
+			),
+		className
+	)}>{@render children?.()}</svelte:element
+>

package/dist/components/Surface.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { HTMLAttributes } from 'svelte/elements';
+type $$ComponentProps = HTMLAttributes<HTMLElement> & {
+    as?: 'div' | 'section' | 'article' | 'aside' | 'main' | 'button';
+    type?: 'button' | 'submit' | 'reset';
+    disabled?: boolean;
+    variant?: 'recessed' | 'plain';
+    ref?: HTMLElement | null;
+};
+declare const Surface: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type Surface = ReturnType<typeof Surface>;
+export default Surface;

package/dist/components/Tabs.svelte

@@ -0,0 +1,47 @@
+<script lang="ts" module>
+	export type TabItem = { value: string; label: string; disabled?: boolean };
+</script>
+
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { Tabs as Primitive } from 'bits-ui';
+	import { cn } from '../utils.js';
+	import { focus } from '../styles.js';
+	let {
+		items,
+		value = $bindable(''),
+		label,
+		class: className,
+		children,
+		...rest
+	}: Omit<Primitive.RootProps, 'children' | 'child' | 'value'> & {
+		items: readonly TabItem[];
+		value?: string;
+		label: string;
+		children: Snippet<[string]>;
+	} = $props();
+	$effect(() => {
+		if (!items.some((item) => item.value === value && !item.disabled))
+			value = items.find((item) => !item.disabled)?.value ?? '';
+	});
+</script>
+
+<Primitive.Root {...rest} bind:value class={cn('min-w-0', className)}>
+	<Primitive.List
+		aria-label={label}
+		class="flex w-fit max-w-full flex-wrap items-center gap-1 rounded-[12px_14px_11px_13px] border border-line bg-recess p-1 shadow-[inset_0_2px_4px_var(--ui-shadow)]"
+	>
+		{#each items as item (item.value)}<Primitive.Trigger
+				value={item.value}
+				disabled={item.disabled}
+				class={cn(
+					'cursor-pointer rounded-[8px_10px_7px_9px] px-3.5 py-1.75 text-[.8125rem] leading-normal text-muted hover:text-ink disabled:cursor-default disabled:opacity-45 data-[state=active]:bg-surface data-[state=active]:text-ink',
+					focus
+				)}>{item.label}</Primitive.Trigger
+			>{/each}
+	</Primitive.List>
+	{#each items as item (item.value)}<Primitive.Content
+			value={item.value}
+			class={cn('rounded pt-6', focus)}>{@render children(item.value)}</Primitive.Content
+		>{/each}
+</Primitive.Root>

package/dist/components/Tabs.svelte.d.ts

@@ -0,0 +1,16 @@
+export type TabItem = {
+    value: string;
+    label: string;
+    disabled?: boolean;
+};
+import type { Snippet } from 'svelte';
+import { Tabs as Primitive } from 'bits-ui';
+type $$ComponentProps = Omit<Primitive.RootProps, 'children' | 'child' | 'value'> & {
+    items: readonly TabItem[];
+    value?: string;
+    label: string;
+    children: Snippet<[string]>;
+};
+declare const Tabs: import("svelte").Component<$$ComponentProps, {}, "value">;
+type Tabs = ReturnType<typeof Tabs>;
+export default Tabs;

package/dist/components/Textarea.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import type { HTMLTextareaAttributes } from 'svelte/elements';
+	import { cn } from '../utils.js';
+	import { control } from '../styles.js';
+	let {
+		class: className,
+		value = $bindable(''),
+		ref = $bindable(null),
+		rows = 4,
+		...rest
+	}: HTMLTextareaAttributes & { ref?: HTMLTextAreaElement | null } = $props();
+</script>
+
+<textarea
+	{...rest}
+	{rows}
+	bind:value
+	bind:this={ref}
+	data-slot="textarea"
+	class={cn(control, 'min-h-28 resize-y', className)}></textarea>

package/dist/components/Textarea.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { HTMLTextareaAttributes } from 'svelte/elements';
+type $$ComponentProps = HTMLTextareaAttributes & {
+    ref?: HTMLTextAreaElement | null;
+};
+declare const Textarea: import("svelte").Component<$$ComponentProps, {}, "value" | "ref">;
+type Textarea = ReturnType<typeof Textarea>;
+export default Textarea;

package/dist/components/ToggleGroup.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+	import { ToggleGroup } from 'bits-ui';
+	import { cn } from '../utils.js';
+	let {
+		value = $bindable(''),
+		size = 'sm',
+		class: className,
+		children,
+		...rest
+	}: Omit<
+		Extract<ToggleGroup.RootProps, { type: 'single' }>,
+		'type' | 'value' | 'children' | 'child'
+	> & {
+		type?: 'single';
+		value?: string;
+		size?: 'xs' | 'sm';
+		children?: import('svelte').Snippet;
+	} = $props();
+</script>
+
+<ToggleGroup.Root
+	{...rest}
+	type="single"
+	bind:value
+	data-size={size}
+	class={cn(
+		'inline-flex flex-wrap gap-1 rounded-ui bg-recess p-1 [box-shadow:var(--ui-recess-shadow)]',
+		className
+	)}
+>
+	{@render children?.()}
+</ToggleGroup.Root>

package/dist/components/ToggleGroup.svelte.d.ts

@@ -0,0 +1,12 @@
+import { ToggleGroup } from 'bits-ui';
+type $$ComponentProps = Omit<Extract<ToggleGroup.RootProps, {
+    type: 'single';
+}>, 'type' | 'value' | 'children' | 'child'> & {
+    type?: 'single';
+    value?: string;
+    size?: 'xs' | 'sm';
+    children?: import('svelte').Snippet;
+};
+declare const ToggleGroup: import("svelte").Component<$$ComponentProps, {}, "value">;
+type ToggleGroup = ReturnType<typeof ToggleGroup>;
+export default ToggleGroup;

package/dist/components/ToggleGroupItem.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+	import { ToggleGroup } from 'bits-ui';
+	import { cn } from '../utils.js';
+	import { focus } from '../styles.js';
+	let {
+		class: className,
+		size = 'sm',
+		children,
+		...rest
+	}: Omit<ToggleGroup.ItemProps, 'children'> & {
+		size?: 'xs' | 'sm';
+		children?: import('svelte').Snippet;
+	} = $props();
+</script>
+
+<ToggleGroup.Item
+	{...rest}
+	class={cn(
+		'cursor-pointer rounded-ui px-3 py-1.5 text-xs font-medium text-muted transition-colors duration-(--atmo-duration) hover:text-ink disabled:pointer-events-none disabled:opacity-45 data-[state=on]:bg-surface data-[state=on]:text-action motion-reduce:transition-none',
+		focus,
+		size === 'xs' && 'px-2 py-1 text-[.6875rem]',
+		className
+	)}
+>
+	{@render children?.()}
+</ToggleGroup.Item>

package/dist/components/ToggleGroupItem.svelte.d.ts

@@ -0,0 +1,8 @@
+import { ToggleGroup } from 'bits-ui';
+type $$ComponentProps = Omit<ToggleGroup.ItemProps, 'children'> & {
+    size?: 'xs' | 'sm';
+    children?: import('svelte').Snippet;
+};
+declare const ToggleGroupItem: import("svelte").Component<$$ComponentProps, {}, "">;
+type ToggleGroupItem = ReturnType<typeof ToggleGroupItem>;
+export default ToggleGroupItem;

package/dist/components/WorkspaceSidebar.svelte

@@ -0,0 +1,82 @@
+<script lang="ts">
+	import { tick, type Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { MediaQuery } from 'svelte/reactivity';
+	import Surface from './Surface.svelte';
+	import Modal from './Modal.svelte';
+	import { cn } from '../utils.js';
+	let {
+		label,
+		open = $bindable(false),
+		children,
+		class: className,
+		style,
+		...rest
+	}: Omit<HTMLAttributes<HTMLElement>, 'children'> & {
+		label: string;
+		open?: boolean;
+		children: Snippet;
+	} = $props();
+	// Native null means “remove the attribute”; Bits UI accepts undefined instead.
+	const modalAttributes = $derived(
+		Object.fromEntries(Object.entries(rest).filter(([, value]) => value !== null))
+	);
+	let desktop = $state<HTMLElement | null>(null);
+	const mobile = new MediaQuery('(width < 48rem)', false);
+	let drawerWasOpen = false;
+	$effect(() => {
+		const leavingDrawer = !mobile.current && drawerWasOpen;
+		drawerWasOpen = mobile.current && open;
+		if (!mobile.current) open = false;
+		if (leavingDrawer) {
+			void tick().then(() => {
+				if (!mobile.current)
+					desktop
+						?.querySelector<HTMLElement>(
+							'a[href], button:not(:disabled), input:not(:disabled), [tabindex="0"]'
+						)
+						?.focus();
+			});
+		}
+	});
+</script>
+
+{#if !mobile.current}
+	<Surface
+		{...rest}
+		as="aside"
+		bind:ref={desktop}
+		{style}
+		aria-label={label}
+		data-slot="workspace-sidebar"
+		class={cn(
+			'fixed top-[calc(var(--atmo-nav-top,0px)+12px)] bottom-3 left-3 z-40 w-[var(--atmo-sidebar-width,238px)] overflow-hidden rounded-[21px_18px_23px_19px] p-0 max-md:hidden',
+			className
+		)}
+	>
+		<nav aria-label={label} class="h-full overflow-y-auto overscroll-contain px-3 py-4">
+			{@render children()}
+		</nav>
+	</Surface>
+{:else}
+	<Modal
+		{...modalAttributes}
+		bind:open
+		title={label}
+		onCloseAutoFocus={(event) => {
+			if (!mobile.current) {
+				event.preventDefault();
+			}
+		}}
+		style={style ?? undefined}
+		data-slot="workspace-sidebar"
+		class={cn(
+			'top-[calc(var(--atmo-nav-top,0px)+12px)] bottom-3 left-3 flex h-auto max-h-none w-[min(280px,calc(100%-24px))] max-w-none translate-x-0 translate-y-0 flex-col overflow-hidden rounded-[21px_18px_23px_19px] bg-recess p-3 shadow-(--ui-recess-shadow) sm:p-3 [&>header]:mb-3 [&>header]:px-2 [&>header]:pt-2 [&>header_h2]:text-sm',
+			className
+		)}
+	>
+		<nav aria-label={label} class="min-h-0 flex-1 overflow-y-auto overscroll-contain">
+			{@render children()}
+		</nav>
+	</Modal>
+{/if}

package/dist/components/WorkspaceSidebar.svelte.d.ts

@@ -0,0 +1,10 @@
+import { type Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+type $$ComponentProps = Omit<HTMLAttributes<HTMLElement>, 'children'> & {
+    label: string;
+    open?: boolean;
+    children: Snippet;
+};
+declare const WorkspaceSidebar: import("svelte").Component<$$ComponentProps, {}, "open">;
+type WorkspaceSidebar = ReturnType<typeof WorkspaceSidebar>;
+export default WorkspaceSidebar;