@connve/ui 0.0.0-stage → 0.1.0

package/dist/IconButton.svelte.d.ts

@@ -0,0 +1,16 @@
+import { type IconifyIcon } from '@iconify/svelte';
+import { type TooltipSide } from './tooltip.js';
+interface Props {
+    /** An Iconify name, or icon data, which needs no request. */
+    icon: string | IconifyIcon;
+    /** Names the button, and shows as its tooltip. */
+    label: string;
+    /** A link when set, otherwise a button. */
+    href?: string;
+    onclick?: (event: MouseEvent) => void;
+    tooltip?: TooltipSide;
+    ref?: HTMLAnchorElement | HTMLButtonElement | null;
+}
+declare const IconButton: import("svelte").Component<Props, {}, "ref">;
+type IconButton = ReturnType<typeof IconButton>;
+export default IconButton;

package/dist/Inspector.svelte

@@ -0,0 +1,115 @@
+<script lang="ts">
+	import { onMount, untrack, type Snippet } from 'svelte';
+	import { cubicOut } from 'svelte/easing';
+	import { prefersReducedMotion } from 'svelte/motion';
+	import { MediaQuery } from 'svelte/reactivity';
+	import { slide } from 'svelte/transition';
+	import IconButton from './IconButton.svelte';
+	import * as icons from './icons.js';
+	import PaneResizer from './PaneResizer.svelte';
+	import { keepFocusWithin } from './focus.js';
+	import { labels } from './labels.svelte.js';
+	import { MOBILE_QUERY } from './mobile.js';
+	import { inspectorWidth as pane } from './paneSize.svelte.js';
+	import { getShell } from './shell.svelte.js';
+
+	interface Props {
+		/** Names the inspected item, e.g. a tool or a log's task. */
+		title: string;
+		/** Names the panel for assistive tech. */
+		label: string;
+		onclose: () => void;
+		/** Steps back to the list this item was opened from. */
+		onback?: () => void;
+		/** Names that list on the back button. */
+		backLabel?: string;
+		/** A line under the title, e.g. the item's status or path. */
+		subtitle?: Snippet;
+		/** Buttons before the close button. */
+		actions?: Snippet;
+		children: Snippet;
+	}
+
+	let { title, label, onclose, onback, backLabel, subtitle, actions, children }: Props = $props();
+
+	const shell = getShell('Inspector');
+
+	let width = $derived(`min(${pane.size}px, 50vw)`);
+
+	/** On a phone the inspector covers the page, so it acts as a dialog; it follows the window as it resizes or turns. */
+	const phone = new MediaQuery(MOBILE_QUERY);
+	let covers = $derived(phone.current);
+	let panel = $state<HTMLElement | null>(null);
+
+	onMount(() => {
+		shell.inspectors += 1;
+		return () => (shell.inspectors -= 1);
+	});
+
+	// Covering the page, it takes focus as it opens: the panel rather than a button, so the Enter
+	// that opened it can't also press that button. Closing gives focus back to where it came from,
+	// unless it has moved on outside the panel.
+	$effect(() => {
+		if (!panel) return;
+		const el = panel;
+		const opener = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+		if (untrack(() => covers)) el.focus();
+		return () => {
+			const active = document.activeElement;
+			if (!active || active === document.body || el.contains(active)) opener?.focus();
+		};
+	});
+
+	function onkeydown(event: KeyboardEvent) {
+		if (!covers || !panel) return;
+		if (event.key === 'Escape' && !event.defaultPrevented) onclose();
+		else keepFocusWithin(event, panel);
+	}
+</script>
+
+<aside
+	bind:this={panel}
+	tabindex="-1"
+	class="relative flex shrink-0 flex-col border-l border-base-200 bg-base-100 outline-none max-md:fixed max-md:inset-y-0 max-md:right-0 max-md:z-40 max-md:w-full! max-md:shadow-xl"
+	style:width
+	role={covers ? 'dialog' : undefined}
+	aria-modal={covers ? 'true' : undefined}
+	aria-label={label}
+	{onkeydown}
+	transition:slide={{
+		axis: 'x',
+		duration: prefersReducedMotion.current ? 0 : 200,
+		easing: cubicOut
+	}}
+>
+	{#if !covers}
+		<PaneResizer {pane} />
+	{/if}
+	<div class="flex min-h-0 flex-1 flex-col max-md:w-full!" style:width>
+		<div class={['flex h-16 shrink-0 items-center gap-1 pr-3', onback ? 'pl-3' : 'pl-6']}>
+			{#if onback}
+				<IconButton
+					icon={icons.chevronLeft}
+					label={backLabel ?? labels.back}
+					tooltip="right"
+					onclick={onback}
+				/>
+			{/if}
+			<div class="min-w-0 flex-1">
+				<h2 class="truncate text-[0.9375rem] font-semibold">{title}</h2>
+				{#if subtitle}
+					<div
+						class="mt-0.5 flex min-w-0 items-center gap-1.5 truncate text-xs text-base-content/60"
+					>
+						{@render subtitle()}
+					</div>
+				{/if}
+			</div>
+			{@render actions?.()}
+			<IconButton icon={icons.x} label={labels.close} tooltip="left" onclick={onclose} />
+		</div>
+		<div class="min-h-0 flex-1 space-y-6 overflow-y-auto px-6 pb-6 text-sm">
+			{@render children()}
+		</div>
+	</div>
+</aside>

package/dist/Inspector.svelte.d.ts

@@ -0,0 +1,20 @@
+import { type Snippet } from 'svelte';
+interface Props {
+    /** Names the inspected item, e.g. a tool or a log's task. */
+    title: string;
+    /** Names the panel for assistive tech. */
+    label: string;
+    onclose: () => void;
+    /** Steps back to the list this item was opened from. */
+    onback?: () => void;
+    /** Names that list on the back button. */
+    backLabel?: string;
+    /** A line under the title, e.g. the item's status or path. */
+    subtitle?: Snippet;
+    /** Buttons before the close button. */
+    actions?: Snippet;
+    children: Snippet;
+}
+declare const Inspector: import("svelte").Component<Props, {}, "">;
+type Inspector = ReturnType<typeof Inspector>;
+export default Inspector;

package/dist/InspectorSection.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	interface Props extends HTMLAttributes<HTMLElement> {
+		title?: string;
+		children: Snippet;
+	}
+
+	let { title, class: className, children, ...rest }: Props = $props();
+</script>
+
+<section {...rest} class={['space-y-2', className]}>
+	{#if title}
+		<h3 class="text-xs font-medium text-base-content/60">{title}</h3>
+	{/if}
+	{@render children()}
+</section>

package/dist/InspectorSection.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+interface Props extends HTMLAttributes<HTMLElement> {
+    title?: string;
+    children: Snippet;
+}
+declare const InspectorSection: import("svelte").Component<Props, {}, "">;
+type InspectorSection = ReturnType<typeof InspectorSection>;
+export default InspectorSection;

package/dist/ListHeader.svelte

@@ -0,0 +1,73 @@
+<script lang="ts">
+	import Icon from '@iconify/svelte';
+	import * as icons from './icons.js';
+	import { labels } from './labels.svelte.js';
+
+	interface Props {
+		/** Names the whole list, e.g. "All flows". */
+		allLabel: string;
+		/** The open folder, shown as a breadcrumb after `allLabel`. */
+		folder: string | null;
+		onselect: (folder: string | null) => void;
+		/** The number of items shown, e.g. "26 flows". */
+		count: string;
+		/** Pending changes, or null when authoring is off. */
+		pending: number | null;
+		/** Names the pending changes, count included, e.g. "3 pending changes". */
+		pendingLabel: string;
+		pendingHref: string;
+		newHref: string;
+	}
+
+	let { allLabel, folder, onselect, count, pending, pendingLabel, pendingHref, newHref }: Props =
+		$props();
+
+	let segments = $derived(folder ? folder.split('/') : []);
+
+	const ANCESTOR = 'shrink-0 text-base-content/60 transition-colors hover:text-base-content';
+</script>
+
+<!-- Lives in an `@container` column, so it folds to what fits beside an inspector. -->
+<div class="flex min-h-8 items-center justify-between gap-3">
+	<div class="flex min-w-0 items-baseline gap-1.5 text-[0.9375rem] font-semibold whitespace-nowrap">
+		<nav aria-label={labels.breadcrumb} class="flex min-w-0 items-baseline gap-1.5">
+			{#if folder}
+				<button type="button" class={ANCESTOR} onclick={() => onselect(null)}>{allLabel}</button>
+				{#each segments as segment, i (i)}
+					<span class="shrink-0 opacity-40" aria-hidden="true">/</span>
+					{#if i < segments.length - 1}
+						<button
+							type="button"
+							class={ANCESTOR}
+							onclick={() => onselect(segments.slice(0, i + 1).join('/'))}
+						>
+							{segment}
+						</button>
+					{:else}
+						<span class="truncate" aria-current="location">{segment}</span>
+					{/if}
+				{/each}
+			{:else}
+				<span class="truncate" aria-current="location">{allLabel}</span>
+			{/if}
+		</nav>
+		<span class="shrink-0 text-xs font-normal opacity-60 @max-sm:hidden">· {count}</span>
+	</div>
+	{#if pending !== null}
+		<div class="flex shrink-0 items-center gap-2">
+			<a
+				href={pendingHref}
+				class={['btn gap-1.5 btn-ghost btn-sm', pending > 0 && 'text-attention']}
+				aria-label={pendingLabel}
+			>
+				<Icon icon={icons.gitPullRequest} class="h-4 w-4" />
+				<span class="@max-2xl:hidden">{pendingLabel}</span>
+				<span class="tabular-nums @2xl:hidden">{pending}</span>
+			</a>
+			<a href={newHref} class="btn gap-1.5 btn-primary btn-sm">
+				<Icon icon={icons.plus} class="h-4 w-4" />
+				{labels.new}
+			</a>
+		</div>
+	{/if}
+</div>

package/dist/ListHeader.svelte.d.ts

@@ -0,0 +1,18 @@
+interface Props {
+    /** Names the whole list, e.g. "All flows". */
+    allLabel: string;
+    /** The open folder, shown as a breadcrumb after `allLabel`. */
+    folder: string | null;
+    onselect: (folder: string | null) => void;
+    /** The number of items shown, e.g. "26 flows". */
+    count: string;
+    /** Pending changes, or null when authoring is off. */
+    pending: number | null;
+    /** Names the pending changes, count included, e.g. "3 pending changes". */
+    pendingLabel: string;
+    pendingHref: string;
+    newHref: string;
+}
+declare const ListHeader: import("svelte").Component<Props, {}, "">;
+type ListHeader = ReturnType<typeof ListHeader>;
+export default ListHeader;

package/dist/Loading.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+	// Spinner centred in the panel it fills, shown while a page or inspector loads.
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { labels } from './labels.svelte.js';
+
+	interface Props extends HTMLAttributes<HTMLDivElement> {
+		size?: 'md' | 'lg';
+		/** Says what is loading to screen readers; `labels.loading` when unset. */
+		label?: string;
+	}
+
+	let { size = 'lg', label, class: className, ...rest }: Props = $props();
+</script>
+
+<div
+	{...rest}
+	role="status"
+	class={['flex min-h-full flex-1 items-center justify-center py-12', className]}
+>
+	<span
+		class={['loading loading-spinner text-primary', size === 'lg' ? 'loading-lg' : 'loading-md']}
+		aria-hidden="true"
+	></span>
+	<span class="sr-only">{label ?? labels.loading}</span>
+</div>

package/dist/Loading.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { HTMLAttributes } from 'svelte/elements';
+interface Props extends HTMLAttributes<HTMLDivElement> {
+    size?: 'md' | 'lg';
+    /** Says what is loading to screen readers; `labels.loading` when unset. */
+    label?: string;
+}
+declare const Loading: import("svelte").Component<Props, {}, "">;
+type Loading = ReturnType<typeof Loading>;
+export default Loading;

package/dist/Logo.svelte

@@ -0,0 +1,93 @@
+<script lang="ts">
+	import { untrack } from 'svelte';
+	import type { ClassValue } from 'svelte/elements';
+
+	interface Props {
+		class?: ClassValue;
+		/** Changes when events flow; each change plays one wave, at most one at a time. */
+		beat?: number;
+	}
+
+	let { class: className, beat = 0 }: Props = $props();
+
+	const MIN_GAP_MS = 1600;
+	let wave = $state(0);
+	let lastWave = 0;
+
+	$effect(() => {
+		if (!beat) return;
+		untrack(() => {
+			const now = Date.now();
+			if (now - lastWave < MIN_GAP_MS) return;
+			lastWave = now;
+			wave += 1;
+		});
+	});
+
+	const DOTS = [
+		{ cx: 44.61, cy: 6.03, dx: -8, delay: 0 },
+		{ cx: 61.65, cy: 15.42, dx: 8, delay: 0.1 },
+		{ cx: 20.63, cy: 19.99, dx: 8, delay: 0.2 },
+		{ cx: 35.24, cy: 33.96, dx: -8, delay: 0.3 },
+		{ cx: 20.63, cy: 48.24, dx: 8, delay: 0.4 }
+	];
+</script>
+
+<svg
+	class={['logo', className]}
+	viewBox="0 0 86 55"
+	xmlns="http://www.w3.org/2000/svg"
+	aria-hidden="true"
+>
+	<g
+		fill="none"
+		stroke="currentColor"
+		stroke-width="1.114"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+	>
+		<path d="M0.56 6.03H44.61" />
+		<path d="M61.65 15.42H85.16" />
+		<path d="M20.63 19.99H45.44L57.64 31.96H85.16" />
+		<path d="M0.56 33.96H35.24" />
+		<path d="M20.63 48.24H50.43L57.34 41.33H85.16" />
+	</g>
+	{#key wave}
+		{#each DOTS as dot (dot.cx + dot.cy)}
+			<circle
+				class="logo-dot"
+				cx={dot.cx}
+				cy={dot.cy}
+				r="6.03"
+				style="--dx: {dot.dx}px; animation-delay: {dot.delay}s"
+			/>
+		{/each}
+	{/key}
+</svg>
+
+<style>
+	.logo-dot {
+		fill: currentColor;
+		animation: logo-slide 1.2s ease-in-out 1;
+	}
+	:global(a:hover) > .logo .logo-dot,
+	.logo:hover .logo-dot {
+		animation-iteration-count: infinite;
+	}
+	@keyframes logo-slide {
+		0%,
+		100% {
+			transform: translateX(0);
+			fill: currentColor;
+		}
+		50% {
+			transform: translateX(var(--dx));
+			fill: var(--color-accent);
+		}
+	}
+	@media (prefers-reduced-motion: reduce) {
+		.logo-dot {
+			animation: none;
+		}
+	}
+</style>

package/dist/Logo.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { ClassValue } from 'svelte/elements';
+interface Props {
+    class?: ClassValue;
+    /** Changes when events flow; each change plays one wave, at most one at a time. */
+    beat?: number;
+}
+declare const Logo: import("svelte").Component<Props, {}, "">;
+type Logo = ReturnType<typeof Logo>;
+export default Logo;

package/dist/NavList.svelte

@@ -0,0 +1,74 @@
+<script lang="ts" module>
+	export interface NavLink {
+		href: string;
+		label: string;
+		active: boolean;
+	}
+
+	export interface NavGroup {
+		title: string;
+		/** An image URL shown before the title, such as a product icon. */
+		icon?: string;
+		links: NavLink[];
+		/** Groups nested under this one, indented. */
+		groups?: NavGroup[];
+	}
+</script>
+
+<script lang="ts">
+	import Self from './NavList.svelte';
+
+	interface Props {
+		/** Each group's `title` and each link's `href` must be unique within its list. */
+		groups: NavGroup[];
+		/** Called when a link is followed, e.g. to close a drawer on a phone. */
+		onnavigate?: () => void;
+		/** Set by the list itself for `groups` within a group. */
+		nested?: boolean;
+	}
+
+	let { groups, onnavigate, nested = false }: Props = $props();
+</script>
+
+<div class={nested ? 'mt-1 space-y-2 pl-3' : 'space-y-5'}>
+	{#each groups as group (group.title)}
+		<section>
+			<svelte:element
+				this={nested ? 'h3' : 'h2'}
+				class={[
+					'mb-1 flex items-center gap-1.5 px-2 tracking-wider uppercase',
+					nested
+						? 'text-[10px] font-medium text-base-content/60'
+						: 'text-xs font-semibold text-base-content/60'
+				]}
+			>
+				{#if group.icon}
+					<img src={group.icon} alt="" class="h-4 w-4" />
+				{/if}
+				{group.title}
+			</svelte:element>
+			<ul class="space-y-0.5">
+				{#each group.links as link (link.href)}
+					<li>
+						<a
+							href={link.href}
+							aria-current={link.active ? 'page' : undefined}
+							class={[
+								'block truncate rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-base-200',
+								link.active
+									? 'bg-base-200 font-medium text-base-content'
+									: 'text-base-content/70 hover:text-base-content'
+							]}
+							onclick={onnavigate}
+						>
+							{link.label}
+						</a>
+					</li>
+				{/each}
+			</ul>
+			{#if group.groups && group.groups.length > 0}
+				<Self groups={group.groups} {onnavigate} nested />
+			{/if}
+		</section>
+	{/each}
+</div>

package/dist/NavList.svelte.d.ts

@@ -0,0 +1,24 @@
+export interface NavLink {
+    href: string;
+    label: string;
+    active: boolean;
+}
+export interface NavGroup {
+    title: string;
+    /** An image URL shown before the title, such as a product icon. */
+    icon?: string;
+    links: NavLink[];
+    /** Groups nested under this one, indented. */
+    groups?: NavGroup[];
+}
+interface Props {
+    /** Each group's `title` and each link's `href` must be unique within its list. */
+    groups: NavGroup[];
+    /** Called when a link is followed, e.g. to close a drawer on a phone. */
+    onnavigate?: () => void;
+    /** Set by the list itself for `groups` within a group. */
+    nested?: boolean;
+}
+declare const NavList: import("svelte").Component<Props, {}, "">;
+type NavList = ReturnType<typeof NavList>;
+export default NavList;

package/dist/PaneResizer.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+	import { labels } from './labels.svelte.js';
+	import type { PaneSize } from './paneSize.svelte.js';
+
+	let { pane }: { pane: PaneSize } = $props();
+
+	const EDGE = {
+		left: 'inset-y-0 -left-1.5 w-3 cursor-col-resize justify-center',
+		right: 'inset-y-0 -right-1.5 w-3 cursor-col-resize justify-center',
+		top: 'inset-x-0 -top-1.5 h-3 cursor-row-resize items-center'
+	};
+</script>
+
+<!-- Drag the pane's inner edge, or use the arrow keys, to resize it; Home or a
+     double-click restores the default. The hit area is wider than the line.
+     A focusable separator, as in the WAI-ARIA window splitter pattern. -->
+<!-- svelte-ignore a11y_no_noninteractive_tabindex, a11y_no_noninteractive_element_interactions (a focusable separator is a widget in WAI-ARIA) -->
+<div
+	role="separator"
+	tabindex="0"
+	aria-label={labels.resize}
+	aria-orientation={pane.vertical ? 'horizontal' : 'vertical'}
+	aria-valuenow={pane.size}
+	aria-valuemin={pane.min}
+	aria-valuemax={pane.max}
+	class="group absolute z-10 flex touch-none focus-visible:outline-none {EDGE[pane.edge]}"
+	onpointerdown={pane.start}
+	ondblclick={pane.reset}
+	onkeydown={pane.keydown}
+>
+	<span
+		class="transition-colors group-hover:bg-primary/60 group-focus-visible:bg-primary {pane.vertical
+			? 'h-px w-full'
+			: 'h-full w-px'} {pane.dragging ? 'bg-primary' : ''}"
+	></span>
+</div>

package/dist/PaneResizer.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { PaneSize } from './paneSize.svelte.js';
+type $$ComponentProps = {
+    pane: PaneSize;
+};
+declare const PaneResizer: import("svelte").Component<$$ComponentProps, {}, "">;
+type PaneResizer = ReturnType<typeof PaneResizer>;
+export default PaneResizer;

package/dist/Segmented.svelte

@@ -0,0 +1,38 @@
+<script lang="ts" generics="T extends string">
+	interface Props {
+		/** Names the group for assistive tech. */
+		label: string;
+		options: { id: T; label: string }[];
+		value: T;
+		onchange?: (value: T) => void;
+	}
+
+	let { label, options, value = $bindable(), onchange }: Props = $props();
+
+	function select(id: T) {
+		value = id;
+		onchange?.(id);
+	}
+</script>
+
+<div
+	class="flex items-center gap-0.5 rounded-full border border-base-300 bg-base-200/50 p-0.5 text-xs"
+	role="group"
+	aria-label={label}
+>
+	{#each options as option (option.id)}
+		<button
+			type="button"
+			class={[
+				'h-6 rounded-full px-3 transition-colors outline-none focus-visible:ring-2 focus-visible:ring-primary',
+				value === option.id
+					? 'bg-base-100 font-medium shadow-sm'
+					: 'text-base-content/60 hover:text-base-content'
+			]}
+			aria-pressed={value === option.id}
+			onclick={() => select(option.id)}
+		>
+			{option.label}
+		</button>
+	{/each}
+</div>

package/dist/Segmented.svelte.d.ts

@@ -0,0 +1,33 @@
+declare function $$render<T extends string>(): {
+    props: {
+        /** Names the group for assistive tech. */
+        label: string;
+        options: {
+            id: T;
+            label: string;
+        }[];
+        value: T;
+        onchange?: (value: T) => void;
+    };
+    exports: {};
+    bindings: "value";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T extends string> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "value";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T extends string>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T extends string>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const Segmented: $$IsomorphicComponent;
+type Segmented<T extends string> = InstanceType<typeof Segmented<T>>;
+export default Segmented;