@atmo-dev/kit 0.0.0-stage → 0.0.1

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('(max-width: 900px)', 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 [@media(max-width:900px)]: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;

package/dist/components/login/ActorSearchField.svelte

@@ -0,0 +1,238 @@
+<script lang="ts">
+	import { untrack } from 'svelte';
+	import { Combobox } from 'bits-ui';
+	import { AtSign, LoaderCircle } from '@sketchyicons/svelte';
+	import type { ActorSearch, ActorSummary } from './types.js';
+	import { actorName } from './types.js';
+	import { cleanActors } from './search.js';
+	import Input from '../Input.svelte';
+	import Avatar from '../Avatar.svelte';
+	import Icon from '../Icon.svelte';
+	import { control } from '../../styles.js';
+	import { cn } from '../../utils.js';
+	import { readTheme, observeTheme } from '../../theme.js';
+	let {
+		value = $bindable(''),
+		searchActors,
+		onSelect,
+		label = 'Your handle',
+		placeholder = 'yourname.bsky.social',
+		id,
+		name = 'handle',
+		disabled = false,
+		invalid = false,
+		describedby,
+		debounce = 250,
+		class: className,
+		ref = $bindable(null)
+	}: {
+		value?: string;
+		searchActors?: ActorSearch;
+		onSelect?: (actor: ActorSummary) => void;
+		label?: string;
+		placeholder?: string;
+		id?: string;
+		name?: string;
+		disabled?: boolean;
+		invalid?: boolean;
+		describedby?: string;
+		debounce?: number;
+		class?: string;
+		ref?: HTMLInputElement | null;
+	} = $props();
+	const uid = $props.id();
+	const listId = `${uid}-suggestions`;
+	let open = $state(false),
+		focused = $state(false),
+		selection = $state('');
+	let results = $state<ActorSummary[]>([]);
+	let status = $state<'idle' | 'loading' | 'ready' | 'error'>('idle');
+	let inherited = $state('');
+	let dismissedQuery = '';
+	const message = $derived(
+		status === 'error'
+			? 'Search unavailable. Enter your full handle to continue.'
+			: status === 'ready' && !results.length
+				? 'No suggestions. You can still enter a full handle.'
+				: ''
+	);
+	const announcement = $derived(
+		status === 'loading'
+			? 'Searching accounts.'
+			: message || (status === 'ready' ? `${results.length} accounts found.` : '')
+	);
+	const descriptionIds = $derived(
+		[describedby, message ? `${uid}-status` : undefined].filter(Boolean).join(' ') || undefined
+	);
+	$effect(() => {
+		const query = value.trim().replace(/^@+/, '');
+		const provider = searchActors;
+		if (disabled || !provider || query.length < 2) {
+			results = [];
+			status = 'idle';
+			open = false;
+			return;
+		}
+		if (!focused) {
+			open = false;
+			untrack(() => {
+				if (status === 'loading') status = 'idle';
+			});
+			return;
+		}
+		const controller = new AbortController();
+		results = [];
+		status = 'loading';
+		open = false;
+		const timer = setTimeout(
+			async () => {
+				try {
+					const found = await provider(query, controller.signal);
+					if (controller.signal.aborted) return;
+					results = cleanActors(found);
+					status = 'ready';
+					if (dismissedQuery !== query) open = results.length > 0;
+				} catch {
+					if (controller.signal.aborted) return;
+					results = [];
+					status = 'error';
+				}
+			},
+			Math.max(0, debounce)
+		);
+		return () => {
+			clearTimeout(timer);
+			controller.abort();
+		};
+	});
+	$effect(() => {
+		if (open && !results.length) open = false;
+	});
+	$effect(() => {
+		if (!open || !ref) {
+			inherited = '';
+			return;
+		}
+		const element = ref;
+		const sync = () => (inherited = readTheme(element));
+		sync();
+		return observeTheme(element, sync);
+	});
+	function choose(handle: string) {
+		const actor = results.find((actor) => actor.handle === handle);
+		if (!actor) return;
+		selection = handle;
+		value = actor.handle;
+		open = false;
+		onSelect?.(actor);
+	}
+	function keydown(event: KeyboardEvent) {
+		if (event.key === 'Escape') dismissedQuery = value.trim().replace(/^@+/, '');
+		if (
+			event.key === 'Enter' &&
+			!event.isComposing &&
+			!ref?.getAttribute('aria-activedescendant')
+		) {
+			event.preventDefault();
+			open = false;
+			ref?.form?.requestSubmit();
+		}
+	}
+</script>
+
+<div class={cn('relative min-w-0', className)} data-slot="actor-search">
+	<Icon
+		img={AtSign}
+		size={18}
+		class="pointer-events-none absolute top-[13px] left-3 z-1 text-muted"
+	/>
+	{#if searchActors}
+		<Combobox.Root
+			type="single"
+			{disabled}
+			bind:open
+			value={selection}
+			inputValue={value}
+			allowDeselect={false}
+			onValueChange={choose}
+		>
+			<Combobox.Input
+				{id}
+				{name}
+				aria-label={label}
+				aria-controls={open ? listId : undefined}
+				aria-describedby={descriptionIds}
+				aria-invalid={invalid || undefined}
+				{placeholder}
+				bind:ref
+				data-autofocus
+				autocomplete="off"
+				autocapitalize="none"
+				spellcheck="false"
+				class={cn(control, 'pr-10 pl-10')}
+				oninput={(event) => {
+					value = event.currentTarget.value;
+					selection = '';
+					dismissedQuery = '';
+				}}
+				onfocus={() => {
+					focused = true;
+					dismissedQuery = '';
+				}}
+				onblur={() => (focused = false)}
+				onkeydown={keydown}
+			/>
+			{#if inherited}<Combobox.Portal
+					><Combobox.Content
+						id={listId}
+						aria-label={`${label} suggestions`}
+						sideOffset={6}
+						collisionPadding={12}
+						style={inherited}
+						class="z-70 max-h-[min(20rem,var(--bits-combobox-content-available-height))] w-(--bits-combobox-anchor-width) min-w-52 overflow-y-auto overscroll-contain rounded-ui border border-line bg-field p-1.5 font-sans text-ink outline-none"
+					>
+						{#each results as actor (actor.did)}<Combobox.Item
+								value={actor.handle}
+								label={actor.handle}
+								class="flex min-h-14 cursor-pointer items-center gap-3 rounded-ui px-2.5 py-2 outline-none data-highlighted:bg-accent-soft data-highlighted:text-action"
+								><Avatar
+									name={actorName(actor)}
+									src={actor.avatar}
+									size={32}
+									aria-hidden="true"
+								/><span class="grid min-w-0 gap-0.5"
+									><strong class="truncate text-[.8125rem] font-medium">{actorName(actor)}</strong
+									>{#if actor.displayName}<span class="truncate text-xs text-muted"
+											>@{actor.handle}</span
+										>{/if}</span
+								></Combobox.Item
+							>{/each}
+					</Combobox.Content></Combobox.Portal
+				>{/if}
+		</Combobox.Root>
+		{#if status === 'loading'}<Icon
+				img={LoaderCircle}
+				size={16}
+				class="pointer-events-none absolute top-3.5 right-3 text-muted motion-safe:animate-spin"
+			/>{/if}
+	{:else}<Input
+			{id}
+			{name}
+			bind:value
+			bind:ref
+			aria-label={label}
+			aria-describedby={describedby}
+			aria-invalid={invalid || undefined}
+			{disabled}
+			{placeholder}
+			autocomplete="username"
+			autocapitalize="none"
+			spellcheck="false"
+			data-autofocus
+			class="pl-10"
+		/>{/if}
+	{#if message}<p id={`${uid}-status`} class="mt-2 text-xs leading-relaxed text-muted">
+			{message}
+		</p>{/if}
+	<span class="sr-only" role="status">{announcement}</span>
+</div>

package/dist/components/login/ActorSearchField.svelte.d.ts

@@ -0,0 +1,19 @@
+import type { ActorSearch, ActorSummary } from './types.js';
+type $$ComponentProps = {
+    value?: string;
+    searchActors?: ActorSearch;
+    onSelect?: (actor: ActorSummary) => void;
+    label?: string;
+    placeholder?: string;
+    id?: string;
+    name?: string;
+    disabled?: boolean;
+    invalid?: boolean;
+    describedby?: string;
+    debounce?: number;
+    class?: string;
+    ref?: HTMLInputElement | null;
+};
+declare const ActorSearchField: import("svelte").Component<$$ComponentProps, {}, "value" | "ref">;
+type ActorSearchField = ReturnType<typeof ActorSearchField>;
+export default ActorSearchField;

package/dist/components/login/AtmosphereApps.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	import bluesky from './brands/bluesky.svg?url';
+	import blacksky from './brands/blacksky.svg?url';
+	import graze from './brands/graze.svg?url';
+	import leaflet from './brands/leaflet.svg?url';
+	import tangled from './brands/tangled.svg?url';
+	import bookhive from './brands/bookhive.svg?url';
+	import surf from './brands/surf.svg?url';
+	import pckt from './brands/pckt.svg?url';
+	const apps = [bluesky, blacksky, graze, leaflet, tangled, bookhive, surf, pckt];
+</script>
+
+<!-- Existing brand marks, not replacement UI icons. Static: no endless decorative motion. -->
+<div class="flex items-center justify-between gap-2 py-2" aria-hidden="true">
+	{#each apps as src (src)}<span
+			class="size-5 shrink-0 bg-muted [mask-size:contain] [mask-position:center] [mask-repeat:no-repeat] opacity-70 sm:size-6"
+			style:mask-image={`url("${src}")`}
+		></span>{/each}
+</div>

package/dist/components/login/AtmosphereApps.svelte.d.ts

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const AtmosphereApps: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type AtmosphereApps = InstanceType<typeof AtmosphereApps>;
+export default AtmosphereApps;

package/dist/components/login/LoginDialog.svelte

@@ -0,0 +1,78 @@
+<script lang="ts" module>
+	import type { LoginFormProps } from './LoginForm.svelte';
+	export type LoginDialogProps = Omit<LoginFormProps, 'showHeader' | 'ref'> & {
+		open?: boolean;
+		closeOnSuccess?: boolean;
+		formClass?: string;
+	};
+</script>
+
+<script lang="ts">
+	import { tick } from 'svelte';
+	import Modal from '../Modal.svelte';
+	import LoginForm from './LoginForm.svelte';
+	import type { ActorSummary, LoginStep } from './types.js';
+	import { cn } from '../../utils.js';
+	let {
+		open = $bindable(false),
+		recentAccounts = $bindable([]),
+		closeOnSuccess = true,
+		title = 'Log in with your Atmosphere account',
+		description,
+		onSuccess,
+		onStepChange,
+		class: className,
+		formClass,
+		...formProps
+	}: LoginDialogProps = $props();
+	const uid = $props.id();
+	let step = $state<LoginStep>('login');
+	const dialogTitle = $derived(
+		step === 'permissions'
+			? 'Requested permissions'
+			: step === 'signup'
+				? 'Already have an account?'
+				: title
+	);
+	const dialogDescription = $derived(
+		step === 'permissions'
+			? 'Choose what this app can access. Required permissions stay on.'
+			: step === 'signup'
+				? 'You can use a Bluesky, Blacksky, or other Atmosphere account here. Otherwise, continue to create one.'
+				: description
+	);
+	$effect(() => {
+		if (!open) step = 'login';
+	});
+	async function changed(next: LoginStep) {
+		step = next;
+		onStepChange?.(next);
+		if (next !== 'login') {
+			await tick();
+			document.getElementById(uid)?.querySelector<HTMLElement>('h2')?.focus();
+		}
+	}
+	function completed(handle: string, actor?: ActorSummary) {
+		if (closeOnSuccess) open = false;
+		onSuccess?.(handle, actor);
+	}
+</script>
+
+<Modal
+	bind:open
+	id={uid}
+	title={dialogTitle}
+	description={dialogDescription}
+	class={cn('max-w-sm [&>header]:mb-4', className)}
+>
+	<LoginForm
+		{...formProps}
+		bind:recentAccounts
+		{title}
+		{description}
+		showHeader={false}
+		class={formClass}
+		onSuccess={completed}
+		onStepChange={changed}
+	/>
+</Modal>

package/dist/components/login/LoginDialog.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { LoginFormProps } from './LoginForm.svelte';
+export type LoginDialogProps = Omit<LoginFormProps, 'showHeader' | 'ref'> & {
+    open?: boolean;
+    closeOnSuccess?: boolean;
+    formClass?: string;
+};
+declare const LoginDialog: import("svelte").Component<LoginDialogProps, {}, "open" | "recentAccounts">;
+type LoginDialog = ReturnType<typeof LoginDialog>;
+export default LoginDialog;