@wells-nelson/interactions 1.0.0 → 1.0.1

package/README.md

@@ -13,7 +13,8 @@ npm install @wells-nelson/displays @wells-nelson/interactions
 `TextField` (label, error, hint), `Checkbox` (optionally hidden label), `Toggle` (a switch for
 settings that apply at once), `Combobox` (type to filter, offers "Create …"; plus `sameName`),
 `AddRow` (inline "name + plus" that refocuses), `Segmented` (one of a few) and `SearchBar`
-(fixed at the bottom, with a clear button).
+(fixed at the bottom, with a clear button; it sits above a `TabBar` via `--footer-offset`, as
+does `UndoButton`).
 
 ```svelte
 <ActiveList
@@ -55,6 +56,17 @@ undo.push({ undo: () => setDone(task, false) });
 <UndoButton stack={undo} />
 ```
 
+## App version
+
+The running version, with an Update button once a newer deploy is out (in SvelteKit, feed it
+`updated` from `$app/state`; set `kit.version.name` to the release version and a
+`pollInterval`). Without an update, `oncheck` adds "Check for updates". `onupdate` defaults to
+reloading the page.
+
+```svelte
+<AppVersion version={version} updateAvailable={updated.current} oncheck={() => updated.check()} />
+```
+
 ## Dev wipe
 
 ```svelte
@@ -82,4 +94,5 @@ shape. Wording comes from `nouns` (`{ singular: 'project', plural: 'projects' }`
 
 With `roles`, `ShareModal` shows a role picker and protects the last owner, and
 `ContainerEditModal` offers "Leave" instead of "Delete" while other owners remain. Without roles
-every member counts as an owner. The sandbox's Account page drives every state with a mock.
+every member counts as an owner. `localOnlyReason` keeps a container local-only (e.g. built-in
+sample data): both modals show that text instead of offering to make it cloud-enabled. The sandbox's Account page drives every state with a mock.

package/dist/AppVersion.svelte

@@ -0,0 +1,79 @@
+<script lang="ts">
+	import { Button } from '@wells-nelson/displays';
+
+	/**
+	 * The running version, with an Update button once a newer deploy is out. Feed it the app's
+	 * update signal (in SvelteKit: `updated.current` from `$app/state`, with `updated.check` as
+	 * `oncheck`). Without an update, `oncheck` adds a "Check for updates" button.
+	 */
+	let {
+		version,
+		updateAvailable = false,
+		onupdate = () => location.reload(),
+		oncheck
+	}: {
+		version: string;
+		updateAvailable?: boolean;
+		/** Load the new version. Defaults to reloading the page. */
+		onupdate?: () => void;
+		/** Look for a new version now; resolves true when there is one. */
+		oncheck?: () => Promise<boolean>;
+	} = $props();
+
+	let checking = $state(false);
+	let found = $state(false);
+	let status = $state<'latest' | 'failed' | null>(null);
+	const available = $derived(updateAvailable || found);
+
+	async function check() {
+		if (!oncheck) return;
+		checking = true;
+		status = null;
+		try {
+			found = await oncheck();
+			if (!found) status = 'latest';
+		} catch {
+			status = 'failed';
+		} finally {
+			checking = false;
+		}
+	}
+</script>
+
+<section class="app-version" aria-label="Version">
+	<p class="line">
+		Version {version}{#if available}<span class="new"> · A new version is available.</span>{/if}
+	</p>
+	{#if available}
+		<Button variant="primary" icon="refresh" onclick={() => onupdate()}>Update</Button>
+	{:else if oncheck}
+		<Button variant="ghost" icon="refresh" onclick={check} disabled={checking}>
+			{checking ? 'Checking…' : 'Check for updates'}
+		</Button>
+		{#if status === 'latest'}
+			<p class="status" role="status">You have the latest version.</p>
+		{:else if status === 'failed'}
+			<p class="status" role="status">Couldn't check for updates. Try again when you're online.</p>
+		{/if}
+	{/if}
+</section>
+
+<style>
+	.app-version {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		gap: 0.4rem;
+		text-align: center;
+	}
+	.line,
+	.status {
+		margin: 0;
+		color: var(--muted);
+		font-size: 0.85rem;
+	}
+	.new {
+		color: var(--text);
+		font-weight: 600;
+	}
+</style>

package/dist/AppVersion.svelte.d.ts

@@ -0,0 +1,11 @@
+type $$ComponentProps = {
+    version: string;
+    updateAvailable?: boolean;
+    /** Load the new version. Defaults to reloading the page. */
+    onupdate?: () => void;
+    /** Look for a new version now; resolves true when there is one. */
+    oncheck?: () => Promise<boolean>;
+};
+declare const AppVersion: import("svelte").Component<$$ComponentProps, {}, "">;
+type AppVersion = ReturnType<typeof AppVersion>;
+export default AppVersion;

package/dist/SearchBar.svelte

@@ -21,9 +21,10 @@
 		position: fixed;
 		left: 0;
 		right: 0;
-		bottom: 0;
+		/* Above a bottom tab bar when there is one (--footer-offset includes the safe area then). */
+		bottom: var(--footer-offset, 0px);
 		z-index: 40;
-		padding: 0.5rem 1rem calc(0.5rem + env(safe-area-inset-bottom, 0px));
+		padding: 0.5rem 1rem calc(0.5rem + max(0px, env(safe-area-inset-bottom, 0px) - var(--footer-offset, 0px)));
 		background: linear-gradient(to top, var(--bg) 70%, transparent);
 	}
 	.inner {
@@ -55,6 +56,6 @@
 		display: none;
 	}
 	.spacer {
-		height: calc(4.5rem + env(safe-area-inset-bottom, 0px));
+		height: calc(4.5rem + max(0px, env(safe-area-inset-bottom, 0px) - var(--footer-offset, 0px)));
 	}
 </style>

package/dist/UndoButton.svelte

@@ -2,7 +2,7 @@
 	import { Icon } from '@wells-nelson/displays';
 	import type { UndoStack } from './undo.svelte.js';
 
-	/** Floating Undo button, bottom left (above a `SearchBar`), shown while `stack.visible`. */
+	/** Floating Undo button, bottom left (above a `SearchBar` and any `TabBar`), shown while `stack.visible`. */
 	let { stack, label = 'Undo' }: { stack: UndoStack; label?: string } = $props();
 </script>
 
@@ -17,7 +17,7 @@
 	.undo {
 		position: fixed;
 		left: max(1rem, calc(50vw - var(--content-w) / 2 + 1rem));
-		bottom: calc(4.75rem + env(safe-area-inset-bottom, 0px));
+		bottom: calc(4.75rem + max(env(safe-area-inset-bottom, 0px), var(--footer-offset, 0px)));
 		z-index: 45;
 		display: inline-flex;
 		align-items: center;

package/dist/account/ContainerEditModal.svelte

@@ -31,6 +31,7 @@
 		nouns,
 		signInHref,
 		contentsLabel = 'everything in it',
+		localOnlyReason,
 		isDefault,
 		ondefaultchange,
 		onrename,
@@ -53,6 +54,11 @@
 		signInHref: string;
 		/** What gets deleted along with it, e.g. "all its tasks and notes". */
 		contentsLabel?: string;
+		/**
+		 * Why this container has to stay local-only (e.g. built-in sample data). The cloud option
+		 * is replaced by this text while it is local.
+		 */
+		localOnlyReason?: string;
 		isDefault: boolean;
 		ondefaultchange: (isDefault: boolean) => void;
 		onrename: (name: string) => void;
@@ -172,7 +178,9 @@
 
 	<section class="group">
 		<h3>Sync</h3>
-		{#if signedIn}
+		{#if localOnlyReason && !isCloud}
+			<p class="muted small"><Icon name="wifi-off" size={16} /> {localOnlyReason}</p>
+		{:else if signedIn}
 			<Toggle
 				label="Cloud-enabled"
 				bind:checked={cloudToggle}

package/dist/account/ContainerEditModal.svelte.d.ts

@@ -13,6 +13,11 @@ type $$ComponentProps = {
     signInHref: string;
     /** What gets deleted along with it, e.g. "all its tasks and notes". */
     contentsLabel?: string;
+    /**
+     * Why this container has to stay local-only (e.g. built-in sample data). The cloud option
+     * is replaced by this text while it is local.
+     */
+    localOnlyReason?: string;
     isDefault: boolean;
     ondefaultchange: (isDefault: boolean) => void;
     onrename: (name: string) => void;

package/dist/account/ShareModal.svelte

@@ -33,6 +33,7 @@
 		signInHref,
 		signInPitch,
 		description,
+		localOnlyReason,
 		onmakecloud,
 		onclose
 	}: {
@@ -53,6 +54,11 @@
 		signInPitch?: string;
 		/** Who can do what, shown above the invite form. */
 		description?: string;
+		/**
+		 * Why this container has to stay local-only (e.g. built-in sample data). The cloud option
+		 * is replaced by this text while it is local.
+		 */
+		localOnlyReason?: string;
 		onmakecloud: () => Promise<unknown>;
 		onclose: () => void;
 	} = $props();
@@ -141,7 +147,9 @@
 </script>
 
 <Modal bind:open title={`Share “${name}”`} {onclose}>
-	{#if !cloud.configured}
+	{#if localOnlyReason && !isCloud}
+		<p>{localOnlyReason}</p>
+	{:else if !cloud.configured}
 		<p class="muted">Sharing isn't available because cloud sync isn't set up for this copy of {appName}.</p>
 	{:else if !signedIn}
 		<p>{pitch}</p>

package/dist/account/ShareModal.svelte.d.ts

@@ -19,6 +19,11 @@ type $$ComponentProps = {
     signInPitch?: string;
     /** Who can do what, shown above the invite form. */
     description?: string;
+    /**
+     * Why this container has to stay local-only (e.g. built-in sample data). The cloud option
+     * is replaced by this text while it is local.
+     */
+    localOnlyReason?: string;
     onmakecloud: () => Promise<unknown>;
     onclose: () => void;
 };

package/dist/index.d.ts

@@ -1,5 +1,6 @@
 export { default as ActiveList } from './ActiveList.svelte';
 export { default as AddRow } from './AddRow.svelte';
+export { default as AppVersion } from './AppVersion.svelte';
 export { default as Checkbox } from './Checkbox.svelte';
 export { default as CollapsibleSection } from './CollapsibleSection.svelte';
 export { default as Combobox, sameName, type ComboChoice, type ComboOption } from './Combobox.svelte';

package/dist/index.js

@@ -1,5 +1,6 @@
 export { default as ActiveList } from './ActiveList.svelte';
 export { default as AddRow } from './AddRow.svelte';
+export { default as AppVersion } from './AppVersion.svelte';
 export { default as Checkbox } from './Checkbox.svelte';
 export { default as CollapsibleSection } from './CollapsibleSection.svelte';
 export { default as Combobox, sameName } from './Combobox.svelte';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wells-nelson/interactions",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "Svelte 5 inputs, actions (long-press, drag and drop), undo, and account/sharing UI shared by Wells Nelson apps.",
   "license": "MIT",
   "repository": {
@@ -38,7 +38,7 @@
     "lint:package": "publint"
   },
   "peerDependencies": {
-    "@wells-nelson/displays": ">=1.0.0 <2.0.0",
+    "@wells-nelson/displays": ">=1.0.2 <2.0.0",
     "svelte": "^5.40.0"
   },
   "devDependencies": {