@connve/ui 0.0.0-stage → 0.1.0

package/dist/SidePane.svelte

@@ -0,0 +1,148 @@
+<script lang="ts">
+	import Icon from '@iconify/svelte';
+	import * as icons from './icons.js';
+	import { getAllContexts, tick, type Snippet } from 'svelte';
+	import { MediaQuery } from 'svelte/reactivity';
+	import ContextBridge from './ContextBridge.svelte';
+	import PaneResizer from './PaneResizer.svelte';
+	import { keepFocusWithin } from './focus.js';
+	import { MOBILE_QUERY, PANE_OVER_PAGE } from './mobile.js';
+	import { sidePaneWidth as pane } from './paneSize.svelte.js';
+	import { getShell } from './shell.svelte.js';
+
+	interface Props {
+		open: boolean;
+		/** Names the pane above its content, e.g. "Folders". */
+		title: string;
+		collapseLabel: string;
+		expandLabel: string;
+		ontoggle: () => void;
+		/** Closes the pane from the backdrop or Escape on a phone. */
+		onclose: () => void;
+		children: Snippet;
+		/** Actions kept on the narrow rail while the pane is collapsed. */
+		rail?: Snippet;
+	}
+
+	let { open, title, collapseLabel, expandLabel, ontoggle, onclose, children, rail }: Props =
+		$props();
+
+	const shell = getShell('SidePane');
+	// The shell renders the pane, so its content gets this page's contexts passed along.
+	const contexts = getAllContexts();
+	const titleId = $props.id();
+
+	/** Below this window width an open inspector folds the pane. */
+	const roomy = new MediaQuery('min-width: 1280px', true);
+	const phone = new MediaQuery(MOBILE_QUERY);
+
+	const anyInspector = $derived(shell.inspectors > 0);
+	// Unfolded by hand while an inspector is open; folds again when the first opens or the last closes.
+	let unfolded = $derived.by(() => {
+		void anyInspector;
+		return false;
+	});
+	let folded = $derived(open && !unfolded && anyInspector && !roomy.current);
+	let shown = $derived(open && !folded);
+	/** On a phone the open pane covers the page, so it acts as a dialog. */
+	let covers = $derived(shown && phone.current);
+	let panel = $state<HTMLElement | null>(null);
+
+	function toggle() {
+		if (folded) unfolded = true;
+		else ontoggle();
+	}
+
+	$effect(() => {
+		shell.pane = aside;
+		return () => {
+			if (shell.pane === aside) shell.pane = null;
+		};
+	});
+
+	$effect(() => {
+		shell.expand = shown ? null : { label: expandLabel, onclick: toggle };
+		return () => {
+			if (shell.expand?.onclick === toggle) shell.expand = null;
+		};
+	});
+
+	// Covering the page, the pane takes focus, and gives it to the top bar's expand button when it closes.
+	$effect(() => {
+		if (!covers || !panel) return;
+		const el = panel;
+		el.focus();
+		return () => {
+			const active = document.activeElement;
+			if (active && active !== document.body && !el.contains(active)) return;
+			tick().then(() => shell.expandButton?.focus());
+		};
+	});
+
+	function onkeydown(event: KeyboardEvent) {
+		if (!covers || !panel) return;
+		if (event.key === 'Escape' && !event.defaultPrevented) onclose();
+		else keepFocusWithin(event, panel);
+	}
+</script>
+
+{#if shown}
+	<div class="fixed inset-0 z-20 bg-black/30 md:hidden" aria-hidden="true" onclick={onclose}></div>
+{/if}
+
+{#snippet aside()}
+	<ContextBridge {contexts}>
+		<aside
+			bind:this={panel}
+			tabindex="-1"
+			role={covers ? 'dialog' : undefined}
+			aria-modal={covers ? 'true' : undefined}
+			aria-labelledby={shown ? titleId : undefined}
+			aria-label={shown ? undefined : title}
+			{onkeydown}
+			class={[
+				'relative flex h-full shrink-0 flex-col bg-base-100 outline-none',
+				!pane.dragging && 'transition-[width] duration-200 ease-out motion-reduce:transition-none',
+				shown ? ['border-r border-base-200', PANE_OVER_PAGE] : 'w-14 max-md:hidden'
+			]}
+			style:width={shown ? `min(${pane.size}px, 35vw)` : undefined}
+		>
+			{#if shown && !phone.current}
+				<PaneResizer {pane} />
+			{/if}
+			<div
+				class={[
+					'flex h-16 shrink-0 items-center',
+					shown ? 'justify-between pr-3 pl-6' : 'justify-center'
+				]}
+			>
+				{#if shown}
+					<h2 id={titleId} class="truncate text-[0.9375rem] font-semibold">{title}</h2>
+				{/if}
+				<div class="tooltip tooltip-right" data-tip={shown ? collapseLabel : expandLabel}>
+					<button
+						type="button"
+						aria-label={shown ? collapseLabel : expandLabel}
+						aria-expanded={shown}
+						class="flex h-8 w-8 items-center justify-center rounded-md text-base-content/60 transition-colors hover:bg-base-200 hover:text-base-content"
+						onclick={toggle}
+					>
+						<Icon
+							icon={shown ? icons.layoutSidebarLeftCollapse : icons.layoutSidebarLeftExpand}
+							class="h-5 w-5"
+						/>
+					</button>
+				</div>
+			</div>
+			{#if shown}
+				<div class="flex min-h-0 flex-1 flex-col">
+					{@render children()}
+				</div>
+			{:else if rail}
+				<div class="flex flex-col items-center gap-1">
+					{@render rail()}
+				</div>
+			{/if}
+		</aside>
+	</ContextBridge>
+{/snippet}

package/dist/SidePane.svelte.d.ts

@@ -0,0 +1,17 @@
+import { type Snippet } from 'svelte';
+interface Props {
+    open: boolean;
+    /** Names the pane above its content, e.g. "Folders". */
+    title: string;
+    collapseLabel: string;
+    expandLabel: string;
+    ontoggle: () => void;
+    /** Closes the pane from the backdrop or Escape on a phone. */
+    onclose: () => void;
+    children: Snippet;
+    /** Actions kept on the narrow rail while the pane is collapsed. */
+    rail?: Snippet;
+}
+declare const SidePane: import("svelte").Component<Props, {}, "">;
+type SidePane = ReturnType<typeof SidePane>;
+export default SidePane;

package/dist/StateMessage.svelte

@@ -0,0 +1,110 @@
+<script lang="ts">
+	// Full-panel empty/error state with a brand glow. `notice` for "nothing
+	// here yet", `oops` for a failed load.
+	import Icon, { type IconifyIcon } from '@iconify/svelte';
+	import * as icons from './icons.js';
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { labels } from './labels.svelte.js';
+
+	interface Props extends HTMLAttributes<HTMLDivElement> {
+		tone?: 'notice' | 'oops';
+		/** `labels.stateNotice` or `labels.stateOops` when unset. */
+		title?: string;
+		message: string;
+		icon?: string | IconifyIcon;
+		/** Actions under the message, e.g. a retry button. */
+		children?: Snippet;
+	}
+
+	let {
+		tone = 'notice',
+		title,
+		message,
+		icon,
+		class: className,
+		children,
+		...rest
+	}: Props = $props();
+
+	let resolvedTitle = $derived(title ?? (tone === 'oops' ? labels.stateOops : labels.stateNotice));
+	let resolvedIcon = $derived(icon ?? (tone === 'oops' ? icons.moodSad : icons.sparkles));
+</script>
+
+<!-- A failed load is announced as it appears. -->
+<div
+	role={tone === 'oops' ? 'alert' : undefined}
+	{...rest}
+	class={[
+		'state-message relative flex min-h-full flex-1 flex-col items-center justify-center gap-3 px-6 py-16 text-center',
+		className
+	]}
+>
+	<div class="state-glow pointer-events-none absolute inset-0" aria-hidden="true">
+		<div class="state-blob state-blob-1"></div>
+		<div class="state-blob state-blob-2"></div>
+		<div class="state-blob state-blob-3"></div>
+	</div>
+
+	<span class="state-icon relative flex h-12 w-12 items-center justify-center rounded-full">
+		<Icon icon={resolvedIcon} class="h-6 w-6" />
+	</span>
+
+	<div class="relative">
+		<h2 class="state-title text-lg font-semibold">{resolvedTitle}</h2>
+		<p class="mt-1 max-w-md text-sm opacity-70">{message}</p>
+	</div>
+
+	{#if children}
+		<div class="relative mt-2">{@render children()}</div>
+	{/if}
+</div>
+
+<style>
+	/* Brand glow — matches the agents hero. The theme sets its strength. */
+	.state-glow {
+		filter: blur(80px);
+		opacity: var(--state-glow-opacity, 0.22);
+	}
+	/* The blobs sit around the centre of the message, so the glow is behind it
+	   whatever the width of the page or the panes beside it. */
+	.state-blob {
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		border-radius: 9999px;
+		mix-blend-mode: var(--state-glow-blend, multiply);
+	}
+	.state-blob-1 {
+		width: min(30vw, 26rem);
+		height: min(30vw, 26rem);
+		transform: translate(-80%, -70%);
+		background: radial-gradient(circle, #00e168 0%, transparent 70%);
+	}
+	.state-blob-2 {
+		width: min(28vw, 24rem);
+		height: min(28vw, 24rem);
+		transform: translate(-20%, -55%);
+		background: radial-gradient(circle, #00b4a6 0%, transparent 70%);
+	}
+	.state-blob-3 {
+		width: min(26vw, 22rem);
+		height: min(26vw, 22rem);
+		transform: translate(-50%, -20%);
+		background: radial-gradient(circle, #006b55 0%, transparent 75%);
+	}
+
+	.state-icon {
+		background: color-mix(in oklab, var(--color-primary) 12%, transparent);
+		color: var(--color-primary);
+	}
+
+	/* Accent-gradient title, matching connve.com's shimmering headline; the theme sets
+	   stops that read on its base. */
+	.state-title {
+		background: var(--state-title);
+		background-clip: text;
+		-webkit-background-clip: text;
+		color: transparent;
+	}
+</style>

package/dist/StateMessage.svelte.d.ts

@@ -0,0 +1,15 @@
+import { type IconifyIcon } from '@iconify/svelte';
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+interface Props extends HTMLAttributes<HTMLDivElement> {
+    tone?: 'notice' | 'oops';
+    /** `labels.stateNotice` or `labels.stateOops` when unset. */
+    title?: string;
+    message: string;
+    icon?: string | IconifyIcon;
+    /** Actions under the message, e.g. a retry button. */
+    children?: Snippet;
+}
+declare const StateMessage: import("svelte").Component<Props, {}, "">;
+type StateMessage = ReturnType<typeof StateMessage>;
+export default StateMessage;

package/dist/StatusDot.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	type Variant = 'neutral' | 'success' | 'warning' | 'error';
+
+	interface Props extends HTMLAttributes<HTMLSpanElement> {
+		variant?: Variant;
+		/** The status in words; the dot only repeats it. */
+		label: string;
+	}
+
+	let { variant = 'neutral', label, class: className, ...rest }: Props = $props();
+
+	const DOT: Record<Variant, string> = {
+		neutral: 'bg-base-content/30',
+		success: 'bg-primary',
+		warning: 'bg-warning',
+		error: 'bg-error'
+	};
+</script>
+
+<span
+	{...rest}
+	class={[
+		'inline-flex items-center gap-1.5 whitespace-nowrap',
+		variant === 'error' && 'text-error',
+		className
+	]}
+>
+	<span class={['h-2 w-2 shrink-0 rounded-full', DOT[variant]]} aria-hidden="true"></span>
+	{label}
+</span>

package/dist/StatusDot.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { HTMLAttributes } from 'svelte/elements';
+type Variant = 'neutral' | 'success' | 'warning' | 'error';
+interface Props extends HTMLAttributes<HTMLSpanElement> {
+    variant?: Variant;
+    /** The status in words; the dot only repeats it. */
+    label: string;
+}
+declare const StatusDot: import("svelte").Component<Props, {}, "">;
+type StatusDot = ReturnType<typeof StatusDot>;
+export default StatusDot;

package/dist/ThemeToggle.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+	import Icon, { type IconifyIcon } from '@iconify/svelte';
+	import * as icons from './icons.js';
+	import { labels } from './labels.svelte.js';
+	import { theme, type ThemePref } from './theme.svelte.js';
+
+	let options = $derived<{ pref: ThemePref; icon: IconifyIcon; label: string }[]>([
+		{ pref: 'system', icon: icons.deviceDesktop, label: labels.themeSystem },
+		{ pref: 'light', icon: icons.sun, label: labels.themeLight },
+		{ pref: 'dark', icon: icons.moon, label: labels.themeDark }
+	]);
+</script>
+
+<div
+	class="flex items-center gap-0.5 rounded-full border border-base-300 bg-base-200/50 p-0.5"
+	role="group"
+	aria-label={labels.theme}
+>
+	{#each options as option (option.pref)}
+		<div class="tooltip tooltip-bottom" data-tip={option.label}>
+			<button
+				type="button"
+				class={[
+					'flex h-7 w-7 items-center justify-center rounded-full transition-colors',
+					theme.pref === option.pref
+						? 'bg-base-100 text-primary shadow-sm'
+						: 'text-base-content/60 hover:text-base-content'
+				]}
+				aria-label={labels.themeOption(option.label)}
+				aria-pressed={theme.pref === option.pref}
+				onclick={() => theme.set(option.pref)}
+			>
+				<Icon icon={option.icon} class="h-4 w-4" />
+			</button>
+		</div>
+	{/each}
+</div>

package/dist/ThemeToggle.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const ThemeToggle: import("svelte").Component<Record<string, never>, {}, "">;
+type ThemeToggle = ReturnType<typeof ThemeToggle>;
+export default ThemeToggle;

package/dist/focus.d.ts

@@ -0,0 +1,2 @@
+/** Keeps Tab and Shift+Tab inside `container`, for a panel that covers the page; the container itself may hold focus. */
+export declare function keepFocusWithin(event: KeyboardEvent, container: HTMLElement): void;

package/dist/focus.js

@@ -0,0 +1,39 @@
+const FOCUSABLE = [
+    'a[href]',
+    'area[href]',
+    'button:not([disabled])',
+    'input:not([disabled]):not([type="hidden"])',
+    'select:not([disabled])',
+    'textarea:not([disabled])',
+    'summary',
+    'iframe',
+    'audio[controls]',
+    'video[controls]',
+    '[contenteditable]:not([contenteditable="false"])',
+    '[tabindex]:not([tabindex="-1"])'
+].join(',');
+/** The elements Tab reaches inside `container`, in order; hidden and inert ones are skipped. */
+function tabbable(container) {
+    return [...container.querySelectorAll(FOCUSABLE)].filter((el) => !el.closest('[inert]') && el.checkVisibility({ visibilityProperty: true }));
+}
+/** Keeps Tab and Shift+Tab inside `container`, for a panel that covers the page; the container itself may hold focus. */
+export function keepFocusWithin(event, container) {
+    if (event.key !== 'Tab')
+        return;
+    const focusable = tabbable(container);
+    const first = focusable[0];
+    const last = focusable[focusable.length - 1];
+    if (!first) {
+        event.preventDefault();
+        return;
+    }
+    const atStart = document.activeElement === first || document.activeElement === container;
+    if (event.shiftKey && atStart) {
+        event.preventDefault();
+        last.focus();
+    }
+    else if (!event.shiftKey && document.activeElement === last) {
+        event.preventDefault();
+        first.focus();
+    }
+}

package/dist/icons.d.ts

@@ -0,0 +1,19 @@
+import type { IconifyIcon } from '@iconify/svelte';
+export declare const check: IconifyIcon;
+export declare const chevronLeft: IconifyIcon;
+export declare const chevronRight: IconifyIcon;
+export declare const copy: IconifyIcon;
+export declare const deviceDesktop: IconifyIcon;
+export declare const folder: IconifyIcon;
+export declare const folderOpen: IconifyIcon;
+export declare const gitPullRequest: IconifyIcon;
+export declare const layoutSidebarLeftCollapse: IconifyIcon;
+export declare const layoutSidebarLeftExpand: IconifyIcon;
+export declare const menu2: IconifyIcon;
+export declare const moodSad: IconifyIcon;
+export declare const moon: IconifyIcon;
+export declare const pencil: IconifyIcon;
+export declare const plus: IconifyIcon;
+export declare const sparkles: IconifyIcon;
+export declare const sun: IconifyIcon;
+export declare const x: IconifyIcon;

package/dist/icons.js

@@ -0,0 +1,90 @@
+export const check = {
+    body: '<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m5 12l5 5L20 7"/>',
+    width: 24,
+    height: 24
+};
+export const chevronLeft = {
+    body: '<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m15 6l-6 6l6 6"/>',
+    width: 24,
+    height: 24
+};
+export const chevronRight = {
+    body: '<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m9 6l6 6l-6 6"/>',
+    width: 24,
+    height: 24
+};
+export const copy = {
+    body: '<g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M7 9.667A2.667 2.667 0 0 1 9.667 7h8.666A2.667 2.667 0 0 1 21 9.667v8.666A2.667 2.667 0 0 1 18.333 21H9.667A2.667 2.667 0 0 1 7 18.333z"/><path d="M4.012 16.737A2 2 0 0 1 3 15V5c0-1.1.9-2 2-2h10c.75 0 1.158.385 1.5 1"/></g>',
+    width: 24,
+    height: 24
+};
+export const deviceDesktop = {
+    body: '<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a1 1 0 0 1 1-1h16a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1zm4 15h10m-8-4v4m6-4v4"/>',
+    width: 24,
+    height: 24
+};
+export const folder = {
+    body: '<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 4h4l3 3h7a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2"/>',
+    width: 24,
+    height: 24
+};
+export const folderOpen = {
+    body: '<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m5 19l2.757-7.351A1 1 0 0 1 8.693 11H21a1 1 0 0 1 .986 1.164l-.996 5.211A2 2 0 0 1 19.026 19za2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h4l3 3h7a2 2 0 0 1 2 2v2"/>',
+    width: 24,
+    height: 24
+};
+export const gitPullRequest = {
+    body: '<g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M4 18a2 2 0 1 0 4 0a2 2 0 1 0-4 0M4 6a2 2 0 1 0 4 0a2 2 0 1 0-4 0m12 12a2 2 0 1 0 4 0a2 2 0 1 0-4 0M6 8v8"/><path d="M11 6h5a2 2 0 0 1 2 2v8"/><path d="m14 9l-3-3l3-3"/></g>',
+    width: 24,
+    height: 24
+};
+export const layoutSidebarLeftCollapse = {
+    body: '<g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M4 6a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2zm5-2v16"/><path d="m15 10l-2 2l2 2"/></g>',
+    width: 24,
+    height: 24
+};
+export const layoutSidebarLeftExpand = {
+    body: '<g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M4 6a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2zm5-2v16"/><path d="m14 10l2 2l-2 2"/></g>',
+    width: 24,
+    height: 24
+};
+export const menu2 = {
+    body: '<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>',
+    width: 24,
+    height: 24
+};
+export const moodSad = {
+    body: '<g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M3 12a9 9 0 1 0 18 0a9 9 0 1 0-18 0m6-2h.01M15 10h.01"/><path d="M9.5 15.25a3.5 3.5 0 0 1 5 0"/></g>',
+    width: 24,
+    height: 24
+};
+export const moon = {
+    body: '<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3h.393a7.5 7.5 0 0 0 7.92 12.446A9 9 0 1 1 12 2.992z"/>',
+    width: 24,
+    height: 24
+};
+export const pencil = {
+    body: '<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 20h4L18.5 9.5a2.828 2.828 0 1 0-4-4L4 16zm9.5-13.5l4 4"/>',
+    width: 24,
+    height: 24
+};
+export const plus = {
+    body: '<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 5v14m-7-7h14"/>',
+    width: 24,
+    height: 24
+};
+export const sparkles = {
+    body: '<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 18a2 2 0 0 1 2 2a2 2 0 0 1 2-2a2 2 0 0 1-2-2a2 2 0 0 1-2 2m0-12a2 2 0 0 1 2 2a2 2 0 0 1 2-2a2 2 0 0 1-2-2a2 2 0 0 1-2 2M9 18a6 6 0 0 1 6-6a6 6 0 0 1-6-6a6 6 0 0 1-6 6a6 6 0 0 1 6 6"/>',
+    width: 24,
+    height: 24
+};
+export const sun = {
+    body: '<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12a4 4 0 1 0 8 0a4 4 0 1 0-8 0m-5 0h1m8-9v1m8 8h1m-9 8v1M5.6 5.6l.7.7m12.1-.7l-.7.7m0 11.4l.7.7m-12.1-.7l-.7.7"/>',
+    width: 24,
+    height: 24
+};
+export const x = {
+    body: '<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18 6L6 18M6 6l12 12"/>',
+    width: 24,
+    height: 24
+};

package/dist/index.d.ts

@@ -0,0 +1,24 @@
+export { default as AppShell, type NavItem } from './AppShell.svelte';
+export { default as Badge } from './Badge.svelte';
+export { default as CopyButton } from './CopyButton.svelte';
+export { default as EditButton } from './EditButton.svelte';
+export { default as FolderTree } from './FolderTree.svelte';
+export { default as IconButton } from './IconButton.svelte';
+export { default as Inspector } from './Inspector.svelte';
+export { default as InspectorSection } from './InspectorSection.svelte';
+export { default as ListHeader } from './ListHeader.svelte';
+export { default as Loading } from './Loading.svelte';
+export { default as Logo } from './Logo.svelte';
+export { default as NavList, type NavGroup, type NavLink } from './NavList.svelte';
+export { default as PaneResizer } from './PaneResizer.svelte';
+export { default as Segmented } from './Segmented.svelte';
+export { default as SidePane } from './SidePane.svelte';
+export { default as StateMessage } from './StateMessage.svelte';
+export { default as StatusDot } from './StatusDot.svelte';
+export { default as ThemeToggle } from './ThemeToggle.svelte';
+export { labels, type Labels } from './labels.svelte.js';
+export { isMobile, MOBILE_QUERY, PANE_OVER_PAGE } from './mobile.js';
+export { PaneSize, inspectorWidth, sidePaneWidth, type PaneBounds } from './paneSize.svelte.js';
+export { theme, type ThemePref } from './theme.svelte.js';
+export type { TooltipSide } from './tooltip.js';
+export { buildTree, type TreeNode } from './tree.js';

package/dist/index.js

@@ -0,0 +1,23 @@
+export { default as AppShell } from './AppShell.svelte';
+export { default as Badge } from './Badge.svelte';
+export { default as CopyButton } from './CopyButton.svelte';
+export { default as EditButton } from './EditButton.svelte';
+export { default as FolderTree } from './FolderTree.svelte';
+export { default as IconButton } from './IconButton.svelte';
+export { default as Inspector } from './Inspector.svelte';
+export { default as InspectorSection } from './InspectorSection.svelte';
+export { default as ListHeader } from './ListHeader.svelte';
+export { default as Loading } from './Loading.svelte';
+export { default as Logo } from './Logo.svelte';
+export { default as NavList } from './NavList.svelte';
+export { default as PaneResizer } from './PaneResizer.svelte';
+export { default as Segmented } from './Segmented.svelte';
+export { default as SidePane } from './SidePane.svelte';
+export { default as StateMessage } from './StateMessage.svelte';
+export { default as StatusDot } from './StatusDot.svelte';
+export { default as ThemeToggle } from './ThemeToggle.svelte';
+export { labels } from './labels.svelte.js';
+export { isMobile, MOBILE_QUERY, PANE_OVER_PAGE } from './mobile.js';
+export { PaneSize, inspectorWidth, sidePaneWidth } from './paneSize.svelte.js';
+export { theme } from './theme.svelte.js';
+export { buildTree } from './tree.js';

package/dist/labels.svelte.d.ts

@@ -0,0 +1,28 @@
+/** Texts the components show; an app replaces them with its translations at startup. */
+export declare const labels: {
+    back: string;
+    close: string;
+    copy: string;
+    copied: string;
+    loading: string;
+    resize: string;
+    new: string;
+    edit: string;
+    editReadOnly: string;
+    menu: string;
+    /** Names the main navigation; screen readers add "navigation". */
+    navigation: string;
+    navExpand: string;
+    navCollapse: string;
+    /** Names a navigation item that shows a count, when it has no `badgeLabel`. */
+    navBadge: (label: string, count: number) => string;
+    breadcrumb: string;
+    theme: string;
+    themeSystem: string;
+    themeLight: string;
+    themeDark: string;
+    themeOption: (theme: string) => string;
+    stateNotice: string;
+    stateOops: string;
+};
+export type Labels = typeof labels;

package/dist/labels.svelte.js

@@ -0,0 +1,27 @@
+/** Texts the components show; an app replaces them with its translations at startup. */
+export const labels = $state({
+    back: 'Back',
+    close: 'Close',
+    copy: 'Copy',
+    copied: 'Copied',
+    loading: 'Loading',
+    resize: 'Resize the side panel with the arrow keys; Home or double-click resets it',
+    new: 'New',
+    edit: 'Edit',
+    editReadOnly: 'Read-only, managed in the repository',
+    menu: 'Menu',
+    /** Names the main navigation; screen readers add "navigation". */
+    navigation: 'Main',
+    navExpand: 'Expand sidebar',
+    navCollapse: 'Collapse sidebar',
+    /** Names a navigation item that shows a count, when it has no `badgeLabel`. */
+    navBadge: (label, count) => `${label}, ${count}`,
+    breadcrumb: 'Breadcrumb',
+    theme: 'Color theme',
+    themeSystem: 'System',
+    themeLight: 'Light',
+    themeDark: 'Dark',
+    themeOption: (theme) => `${theme} theme`,
+    stateNotice: 'Nothing here yet',
+    stateOops: 'Oops, something went wrong'
+});

package/dist/mobile.d.ts

@@ -0,0 +1,5 @@
+/** Below Tailwind's `md` breakpoint, where side panes open over the page instead of beside it and start closed. */
+export declare const MOBILE_QUERY = "(max-width: 767px)";
+export declare function isMobile(): boolean;
+/** Classes that lay an open side pane over the page on mobile. */
+export declare const PANE_OVER_PAGE = "max-md:absolute max-md:inset-y-0 max-md:left-0 max-md:z-30 max-md:w-72! max-md:max-w-[85vw] max-md:shadow-xl";

package/dist/mobile.js

@@ -0,0 +1,7 @@
+/** Below Tailwind's `md` breakpoint, where side panes open over the page instead of beside it and start closed. */
+export const MOBILE_QUERY = '(max-width: 767px)';
+export function isMobile() {
+    return typeof window !== 'undefined' && window.matchMedia(MOBILE_QUERY).matches;
+}
+/** Classes that lay an open side pane over the page on mobile. */
+export const PANE_OVER_PAGE = 'max-md:absolute max-md:inset-y-0 max-md:left-0 max-md:z-30 max-md:w-72! max-md:max-w-[85vw] max-md:shadow-xl';