@orochibraru/ui 1.0.0-canary.2 → 1.0.1-canary.1

package/README.md

@@ -55,6 +55,66 @@ spinner, switch, table, tabs, textarea, toggle, toggle-group, tooltip.
 `input` turns password managers off on fields that don't set `autocomplete`, so
 a search box never gets a login suggestion.
 
+## Components
+
+Under `@orochibraru/ui/components/<name>`: one import, data in. Where a
+primitive is assembled from parts, a component takes an array or an object and
+renders the whole thing, phones included.
+
+```svelte
+<script lang="ts">
+  import Input from "@orochibraru/ui/components/input";
+</script>
+
+<Input label="Email" name="email" type="email" required bind:value={email} />
+```
+
+Every form component takes the same field props: `name`, `label`, `description`,
+`error` (a string or the array a form action returns), `required`, `disabled`,
+`id` and a bindable `value` (`checked` for `checkbox` and `switch`, `files` for
+`file-dropzone`). The label, the description or the error, and the ARIA wiring
+between them come with it.
+
+`form` renders them from an array and posts to a form action. A failed action
+that returns `fail(400, { errors: { field: ["message"] } })` puts each message
+under its field; a toast narrates the submit:
+
+```svelte
+<Form
+  action="?/create"
+  fields={[
+    { name: "name", label: "Project name", required: true },
+    { name: "role", type: "select", label: "Role", options: roles },
+    { name: "notify", type: "switch", label: "Notify the team" },
+  ]}
+  messages={{ submit: "Create project", success: "Project created." }}
+/>
+```
+
+| Component           | What it does                                                                                   |
+| ------------------- | ---------------------------------------------------------------------------------------------- |
+| `accordion`         | Questions and answers from an array: plain text or a snippet per item.                         |
+| `avatar-group`      | Overlapping avatars with initials, a +N count and names in tooltips.                           |
+| `bar-list`          | A ranked list with proportional bars, links and a show-more toggle.                            |
+| `breadcrumbs`       | A trail of pages from an array, collapsing the middle into a menu on phones.                   |
+| `checkbox`          | One checkbox with its label and description, the whole row tappable.                           |
+| `checkbox-list`     | Options in, a labelled group of checkboxes out, posting every checked value.                   |
+| `confirm-dialog`    | Ask before acting: waits on an async confirm, a drawer on phones.                              |
+| `data-table`        | Columns and rows in, a sortable table out: cards on phones, links per row.                     |
+| `date-field`        | A date with its label: calendar in a popover, a drawer on phones, ISO value.                   |
+| `file-dropzone`     | Drop or pick files, folders too: type and size limits, a list to review, posted with the form. |
+| `form`              | Fields from an array, laid out and posted to a form action, with errors under each field.      |
+| `input`             | A text field with its label, description and error in one: passwords get a reveal button.      |
+| `menu`              | Actions from an array: a dropdown on desktop, a drawer of big rows on phones.                  |
+| `pagination`        | Page numbers from a total and a page size, prev and next on phones.                            |
+| `radio-list`        | Pick one option from a list or from cards, with a legend and errors.                           |
+| `segmented-control` | A single choice as equal segments that fold to icons when space runs out.                      |
+| `select`            | Options in, a labelled select out: searchable, and a drawer on phones.                         |
+| `status-badge`      | A status pill with a tone, a dot and an optional pulse for live states.                        |
+| `switch`            | A labelled switch row that posts true when on.                                                 |
+| `tabs`              | Tabs from an array, scrolling sideways when they run out of room.                              |
+| `textarea`          | A multi-line field with its label, error and an optional character counter.                    |
+
 ## Blocks
 
 Under `@orochibraru/ui/blocks/<name>`:
@@ -64,6 +124,7 @@ Under `@orochibraru/ui/blocks/<name>`:
 | `accent-toggle`       | The accent presets: swatch strip on desktop, labelled rows on phones.         |
 | `auth-shell`          | Centered sign-in layout: heading, optional `brand` and `footer` snippets.     |
 | `bottom-nav`          | Phone tab bar of top-level destinations, the current one lit.                 |
+| `command-palette`     | ⌘K search over pages and actions: dialog on desktop, tall drawer on phones.   |
 | `copy-field`          | Monospace value with a copy button and a promise toast.                       |
 | `document-title`      | `<title>` from the page title, suffixed with `appName`.                       |
 | `empty-state`         | Icon, title, subtitle and an action slot for an empty list.                   |
@@ -80,6 +141,7 @@ Under `@orochibraru/ui/blocks/<name>`:
 | `responsive-sheet`    | A dialog on desktop, a bottom drawer under 768px.                             |
 | `setting-switch`      | Labelled switch row for settings forms, posting `name=true` when on.          |
 | `stat-card`           | Glass card with an icon, a value and a hint, optionally a link.               |
+| `stepper`             | Multi-step flow: markers on desktop, progress bar and current step on phones. |
 | `tab-nav`             | Pill tab bar of links, the current page's tab highlighted.                    |
 | `tab-section`         | Layout for a tabbed section: tabs on desktop, nav cards on phones.            |
 | `theme-picker`        | System, light and dark as radio cards, for an appearance page.                |
@@ -129,6 +191,16 @@ them, which apps put in their root layout.
 - `@orochibraru/ui/password`: `passwordRules` and `passwordScore`, the rules a
   new password must pass and a 0 to 4 strength, the same on the form and the
   server. `new-password-fields` renders them; `ruleLabels` translates them.
+- `@orochibraru/ui/server/logger`: `Logger` writes scoped lines as coloured text
+  or JSON lines (`LOG_FORMAT=json`) at `LOG_LEVEL` or above; `configureLogging`
+  sets both in code. JSON lines carry the active trace and span ids.
+- `@orochibraru/ui/server/telemetry`: `Telemetry` starts OpenTelemetry tracing
+  over OTLP from `instrumentation.server.ts`; with `tracing: { server: true }`
+  in the kit options, SvelteKit's own spans go with it. Its SDK packages are
+  optional peer dependencies, installed only by apps that trace.
+- `@orochibraru/ui/server/hooks`: `requestLog` logs one line per request and
+  `unexpectedErrors` logs a crash, records it on the span and returns its trace
+  id as the error id.
 - `@orochibraru/ui/haptics`: `haptic("tap" | "success" | "error")`, a no-op
   where vibration isn't supported.
 
@@ -148,8 +220,8 @@ On `<html>`:
 
 - `class="dark"` switches to the dark palette, `data-dark-variant="amoled"`
   makes it pure black.
-- `data-accent` picks a preset: `bordeaux`, `green`, `blue`, `violet`, `rose`,
-  `orange`, `amber`, `cyan` or `neutral`.
+- Bordeaux is the default. `data-accent` picks a preset: `bordeaux`, `green`,
+  `blue`, `violet`, `rose`, `orange`, `amber`, `cyan` or `neutral`.
 - `data-font` (`system`, `serif`, `mono`) and `data-corners="square"` change the
   type and the radius.
 
@@ -168,13 +240,22 @@ bun install
 bun run dev
 ```
 
-The dev server is the docs site: a page per block, primitive and module, with
+The dev server is the docs site: a page per block, component and module, with
 the component live and the code that renders it. That code is the example file
 itself, its `#lib` imports rewritten to the package subpaths, so the two can't
 drift apart. A file named `<slug>.<name>` next to an example is a companion,
 shown after it: the layout, action or page an app needs for what the preview
 can't hold. An example without a script is a note for the preview only.
 
+Components built mostly for phones (drawers, steppers, cards, the media players)
+also show on their page inside an iPhone or Android frame: an iframe of a bare
+preview route at the device's real width, so phone layouts and drawers behave as
+they would on the device.
+
+The primitives are shadcn-svelte's components, so the site links to its docs
+instead of repeating them; llms.txt and the MCP server still carry their usage
+code. The privacy page lists what the site stores and loads, and the credits.
+
 Every component page can be copied as Markdown, viewed as Markdown, exported as
 a PDF (through the browser's print dialog, in the light theme), or opened in
 Claude or ChatGPT. The list pages filter by category.

package/dist/components/blocks/accent-toggle.svelte

@@ -16,8 +16,8 @@
 
 	const defaultMessages = {
 		label: "Accent",
-		blue: "Blue",
 		bordeaux: "Bordeaux",
+		blue: "Blue",
 		green: "Green",
 		violet: "Violet",
 		rose: "Rose",
@@ -33,11 +33,15 @@
 		messages?: Partial<typeof defaultMessages>;
 	}
 
-	let { value = $bindable("blue"), onchange, messages = {} }: Props = $props();
+	let {
+		value = $bindable("bordeaux"),
+		onchange,
+		messages = {},
+	}: Props = $props();
 
 	const accents: Accent[] = [
-		"blue",
 		"bordeaux",
+		"blue",
 		"green",
 		"violet",
 		"rose",

package/dist/components/blocks/accent-toggle.svelte.d.ts

@@ -3,8 +3,8 @@ declare const AccentToggle: import("svelte").Component<{
     onchange?: (accent: "blue" | "bordeaux" | "green" | "violet" | "rose" | "orange" | "amber" | "cyan" | "neutral") => void;
     messages?: Partial<{
         label: string;
-        blue: string;
         bordeaux: string;
+        blue: string;
         green: string;
         violet: string;
         rose: string;

package/dist/components/blocks/bottom-nav.svelte

@@ -42,7 +42,7 @@
 <svelte:window {onscroll} />
 
 <nav
-	class="group/nav fixed inset-x-0 bottom-0 z-40 px-4 pb-[max(0.75rem,env(safe-area-inset-bottom))] md:hidden print:hidden"
+	class="group/nav fixed inset-x-0 bottom-0 z-40 px-4 pb-[max(0.75rem,var(--safe-bottom))] md:hidden print:hidden"
 	style="view-transition-name: tab-bar"
 	aria-label={label}
 	data-compact={compact || undefined}

package/dist/components/blocks/command-palette.svelte

@@ -0,0 +1,268 @@
+<script lang="ts" module>
+	import type { Component } from "svelte";
+
+	export interface CommandItem {
+		label: string;
+		href?: string;
+		onSelect?: () => void;
+		icon?: Component<{ class?: string }>;
+		description?: string;
+		shortcut?: string;
+		keywords?: string[];
+	}
+
+	export interface CommandGroup {
+		heading: string;
+		items: CommandItem[];
+	}
+</script>
+
+<script lang="ts">
+	import { goto } from "$app/navigation";
+	import SearchIcon from "@lucide/svelte/icons/search";
+	import SearchXIcon from "@lucide/svelte/icons/search-x";
+	import { onMount } from "svelte";
+	import { MediaQuery } from "svelte/reactivity";
+
+	import * as Command from "../ui/command/index.js";
+	import * as Drawer from "../ui/drawer/index.js";
+	import { haptic } from "../../haptics.js";
+
+	const defaultMessages = {
+		trigger: "Search…",
+		label: "Search",
+		title: "Command palette",
+		description: "Search for a page or run a command",
+		empty: "No results.",
+		navigate: "to navigate",
+		open: "to open",
+		close: "to close",
+	};
+
+	interface Props {
+		groups: CommandGroup[];
+		open?: boolean;
+		placeholder?: string;
+		shortcut?: boolean;
+		trigger?: boolean;
+		filter?: boolean;
+		onsearch?: (term: string) => void;
+		messages?: Partial<typeof defaultMessages>;
+	}
+
+	let {
+		groups,
+		open = $bindable(false),
+		placeholder = "Type a command or search…",
+		shortcut = true,
+		trigger = true,
+		filter = true,
+		onsearch,
+		messages = {},
+	}: Props = $props();
+
+	const desktop = new MediaQuery("(min-width: 768px)");
+	const text = $derived({ ...defaultMessages, ...messages });
+
+	let search = $state("");
+	let mac = $state(false);
+
+	onMount(() => {
+		mac = /Mac|iPhone|iPad|iPod/.test(navigator.userAgent);
+	});
+
+	/** Every typed word has to appear in the label or a keyword; label matches rank first. */
+	function matchWords(value: string, term: string, keywords: string[] = []) {
+		const words = term.toLowerCase().split(/\s+/).filter(Boolean);
+		const label = value.toLowerCase();
+		const haystack = [label, ...keywords].join(" ").toLowerCase();
+		if (!words.every((word) => haystack.includes(word))) {
+			return 0;
+		}
+		return words.every((word) => label.includes(word)) ? 1 : 0.5;
+	}
+
+	function setSearch(term: string) {
+		search = term;
+		onsearch?.(term);
+	}
+
+	function isTyping(target: EventTarget | null): boolean {
+		return (
+			target instanceof HTMLElement &&
+			(target.isContentEditable || target.matches("input, textarea, select"))
+		);
+	}
+
+	function onkeydown(event: KeyboardEvent) {
+		if (
+			shortcut &&
+			event.key.toLowerCase() === "k" &&
+			(mac ? event.metaKey : event.ctrlKey) &&
+			(open || !isTyping(event.target))
+		) {
+			event.preventDefault();
+			open = !open;
+		}
+	}
+
+	function select(item: CommandItem) {
+		haptic("tap");
+		open = false;
+		setSearch("");
+		if (item.onSelect) {
+			item.onSelect();
+		} else if (item.href) {
+			void goto(item.href);
+		}
+	}
+</script>
+
+<svelte:window {onkeydown} />
+
+{#snippet results()}
+	<Command.Empty>
+		<div
+			class="text-muted-foreground flex flex-col items-center gap-2 py-10 text-sm"
+		>
+			<SearchXIcon class="size-6" />
+			{text.empty}
+		</div>
+	</Command.Empty>
+	{#each groups as group (group.heading)}
+		<Command.Group
+			heading={group.heading}
+			class="p-0 pb-2 **:data-command-group-heading:px-2.5 **:data-command-group-heading:pt-3 **:data-command-group-heading:pb-1.5 **:data-command-group-heading:text-[0.6875rem] **:data-command-group-heading:font-semibold **:data-command-group-heading:tracking-wider **:data-command-group-heading:uppercase"
+		>
+			{#each group.items as item (item.label)}
+				<Command.Item
+					value={item.label}
+					keywords={item.description
+						? [...(item.keywords ?? []), item.description]
+						: item.keywords}
+					onSelect={() => select(item)}
+					class="group/item data-selected:bg-accent data-selected:**:[svg]:text-current min-h-11 gap-3 rounded-xl! px-2.5 py-1.5 max-md:min-h-13 max-md:text-base [&>svg:last-child]:hidden"
+				>
+					{#if item.icon}
+						<span
+							class="bg-muted text-muted-foreground group-data-selected/item:bg-primary group-data-selected/item:text-primary-foreground flex size-8 shrink-0 items-center justify-center rounded-lg transition-colors"
+						>
+							<item.icon class="size-4" />
+						</span>
+					{/if}
+					<span class="min-w-0 flex-1 truncate font-medium">{item.label}</span>
+					{#if item.description}
+						<span
+							class="text-muted-foreground bg-muted group-data-selected/item:bg-background/70 max-w-[40%] shrink-0 truncate rounded-full px-2 py-0.5 text-[0.6875rem]"
+						>
+							{item.description}
+						</span>
+					{/if}
+					{#if item.shortcut}
+						<kbd
+							class="bg-background text-muted-foreground shrink-0 rounded-md border px-1.5 py-0.5 font-sans text-[0.6875rem] font-medium tracking-widest max-md:hidden"
+						>
+							{item.shortcut}
+						</kbd>
+					{/if}
+				</Command.Item>
+			{/each}
+		</Command.Group>
+	{/each}
+{/snippet}
+
+{#snippet key(label: string)}
+	<kbd
+		class="bg-background text-foreground inline-flex h-5 min-w-5 items-center justify-center rounded-md border px-1 font-sans text-[0.6875rem] font-medium shadow-xs"
+		>{label}</kbd
+	>
+{/snippet}
+
+{#if trigger}
+	<button
+		type="button"
+		aria-label={text.label}
+		class="text-muted-foreground hover:text-foreground border-input focus-visible:ring-ring/50 dark:bg-input/30 flex h-11 w-full min-w-0 items-center gap-2 rounded-xl border bg-white px-3 text-base shadow-xs transition-colors outline-none focus-visible:ring-3 md:h-9 md:w-64 md:rounded-md md:px-2.5 md:text-sm"
+		onclick={() => {
+			open = true;
+		}}
+	>
+		<SearchIcon class="size-5 shrink-0 md:size-4" />
+		<span class="truncate">{text.trigger}</span>
+		{#if shortcut}
+			<kbd
+				class="bg-muted ml-auto hidden rounded px-1.5 font-sans text-[0.6875rem] font-medium tracking-widest md:inline"
+			>
+				{mac ? "⌘K" : "Ctrl K"}
+			</kbd>
+		{/if}
+	</button>
+{/if}
+
+{#if desktop.current}
+	<Command.Dialog
+		bind:open
+		class="rounded-2xl! shadow-2xl sm:max-w-2xl"
+		title={text.title}
+		description={text.description}
+		shouldFilter={filter}
+		filter={matchWords}
+	>
+		<div class="relative border-b">
+			<Command.Input
+				bind:value={() => search, setSearch}
+				{placeholder}
+				class="text-base"
+				wrapperClass="p-2"
+				groupClass="h-12! border-0! bg-transparent! *:data-[slot=input-group-addon]:pl-3!"
+			/>
+			<span class="absolute top-1/2 right-4 -translate-y-1/2">
+				{@render key("esc")}
+			</span>
+		</div>
+		<Command.List class="max-h-[min(26rem,60dvh)] scroll-py-2 p-2">
+			{@render results()}
+		</Command.List>
+		<div
+			class="text-muted-foreground bg-muted/40 flex items-center gap-4 border-t px-4 py-2.5 text-xs"
+		>
+			<span class="flex items-center gap-1.5">
+				{@render key("↑")}{@render key("↓")}
+				{text.navigate}
+			</span>
+			<span class="flex items-center gap-1.5">
+				{@render key("↵")}
+				{text.open}
+			</span>
+			<span class="ml-auto flex items-center gap-1.5">
+				{@render key("esc")}
+				{text.close}
+			</span>
+		</div>
+	</Command.Dialog>
+{:else}
+	<Drawer.Root bind:open autoFocus>
+		<Drawer.Content class="h-[85dvh]">
+			<Drawer.Header class="sr-only">
+				<Drawer.Title>{text.title}</Drawer.Title>
+				<Drawer.Description>{text.description}</Drawer.Description>
+			</Drawer.Header>
+			<Command.Root
+				shouldFilter={filter}
+				filter={matchWords}
+				class="min-h-0 flex-1 rounded-none! bg-transparent p-0"
+			>
+				<Command.Input
+					bind:value={() => search, setSearch}
+					{placeholder}
+					class="text-base"
+					wrapperClass="px-4 pb-3"
+					groupClass="h-12! rounded-xl! border-0! bg-muted! *:data-[slot=input-group-addon]:pl-3!"
+				/>
+				<Command.List class="pb-safe-bottom max-h-none flex-1 px-2">
+					{@render results()}
+				</Command.List>
+			</Command.Root>
+		</Drawer.Content>
+	</Drawer.Root>
+{/if}

package/dist/components/blocks/command-palette.svelte.d.ts

@@ -0,0 +1,37 @@
+import type { Component } from "svelte";
+export interface CommandItem {
+    label: string;
+    href?: string;
+    onSelect?: () => void;
+    icon?: Component<{
+        class?: string;
+    }>;
+    description?: string;
+    shortcut?: string;
+    keywords?: string[];
+}
+export interface CommandGroup {
+    heading: string;
+    items: CommandItem[];
+}
+declare const CommandPalette: Component<{
+    groups: CommandGroup[];
+    open?: boolean;
+    placeholder?: string;
+    shortcut?: boolean;
+    trigger?: boolean;
+    filter?: boolean;
+    onsearch?: (term: string) => void;
+    messages?: Partial<{
+        trigger: string;
+        label: string;
+        title: string;
+        description: string;
+        empty: string;
+        navigate: string;
+        open: string;
+        close: string;
+    }>;
+}, {}, "open">;
+type CommandPalette = ReturnType<typeof CommandPalette>;
+export default CommandPalette;

package/dist/components/blocks/error-page.svelte

@@ -2,6 +2,7 @@
 	import { page } from "$app/state";
 
 	import { Button } from "../ui/button/index.js";
+	import { cn } from "../../utils.js";
 
 	const defaultMessages = {
 		notFoundTitle: "Nothing here",
@@ -13,31 +14,46 @@
 
 	interface Props {
 		homeHref: string;
+		/** The status to show instead of the page's, to render an error screen outside +error.svelte. */
+		status?: number;
+		error?: App.Error | null;
 		messages?: Partial<typeof defaultMessages>;
+		class?: string;
 	}
 
-	const { homeHref, messages = {} }: Props = $props();
+	const {
+		homeHref,
+		status,
+		error,
+		messages = {},
+		class: className,
+	}: Props = $props();
 
 	const text = $derived({ ...defaultMessages, ...messages });
-	const notFound = $derived(page.status === 404);
+	const shownStatus = $derived(status ?? page.status);
+	const shownError = $derived(error === undefined ? page.error : error);
+	const notFound = $derived(shownStatus === 404);
 </script>
 
 <div
-	class="pt-safe-top pb-safe-bottom flex min-h-dvh flex-col items-center justify-center gap-6 px-6 text-center"
+	class={cn(
+		"pt-safe-top pb-safe-bottom flex min-h-dvh flex-col items-center justify-center gap-6 px-6 text-center",
+		className,
+	)}
 >
 	<p class="text-primary text-7xl font-bold tracking-tight tabular">
-		{page.status}
+		{shownStatus}
 	</p>
 	<div>
 		<h1 class="text-xl font-semibold">
 			{notFound ? text.notFoundTitle : text.errorTitle}
 		</h1>
 		<p class="text-muted-foreground mt-2 text-sm">
-			{notFound ? text.notFoundDescription : page.error?.message}
+			{notFound ? text.notFoundDescription : shownError?.message}
 		</p>
-		{#if page.error?.errorId}
+		{#if shownError?.errorId}
 			<p class="text-muted-foreground mt-3 font-mono text-xs">
-				{text.errorId}: {page.error.errorId}
+				{text.errorId}: {shownError.errorId}
 			</p>
 		{/if}
 	</div>

package/dist/components/blocks/error-page.svelte.d.ts

@@ -1,5 +1,8 @@
 declare const ErrorPage: import("svelte").Component<{
     homeHref: string;
+    /** The status to show instead of the page's, to render an error screen outside +error.svelte. */
+    status?: number;
+    error?: App.Error | null;
     messages?: Partial<{
         notFoundTitle: string;
         notFoundDescription: string;
@@ -7,6 +10,7 @@ declare const ErrorPage: import("svelte").Component<{
         errorId: string;
         home: string;
     }>;
+    class?: string;
 }, {}, "">;
 type ErrorPage = ReturnType<typeof ErrorPage>;
 export default ErrorPage;

package/dist/components/blocks/fab.svelte

@@ -19,7 +19,7 @@
 		haptic("tap");
 		onclick();
 	}}
-	class="from-primary glow fixed right-5 bottom-[calc(max(0.75rem,env(safe-area-inset-bottom))+5.25rem)] z-40 flex size-15 items-center justify-center rounded-2xl bg-linear-to-br to-[oklch(0.62_calc(var(--primary-chroma)*1.1)_calc(var(--hue)+40))] text-white transition-transform duration-200 active:scale-90 md:hidden"
+	class="from-primary glow fixed right-5 bottom-[calc(max(0.75rem,var(--safe-bottom))+5.25rem)] z-40 flex size-15 items-center justify-center rounded-2xl bg-linear-to-br to-[oklch(0.62_calc(var(--primary-chroma)*1.1)_calc(var(--hue)+40))] text-white transition-transform duration-200 active:scale-90 md:hidden"
 	style="view-transition-name: fab"
 >
 	<Icon class="size-7" />

package/dist/components/blocks/install-prompt.svelte

@@ -31,21 +31,27 @@
 		brand?: Snippet;
 		title?: string;
 		messages?: Partial<typeof defaultMessages>;
+		open?: boolean;
 	}
 
-	const {
+	let {
 		appName,
 		storageKey,
 		brand,
 		title = `Install ${appName}`,
 		messages = {},
+		open = $bindable(false),
 	}: Props = $props();
 
 	const text = $derived({ ...defaultMessages, ...messages });
 
-	let open = $state(false);
 	let mode = $state<"native" | "apple" | "menu">("native");
-	let deferred: InstallPromptEvent | undefined;
+	let deferred = $state.raw<InstallPromptEvent>();
+	let apple = $state(false);
+
+	const shownMode = $derived(
+		mode === "native" && !deferred ? (apple ? "apple" : "menu") : mode,
+	);
 
 	function alreadyPrompted(): boolean {
 		try {
@@ -69,6 +75,9 @@
 	}
 
 	onMount(() => {
+		apple =
+			/iPhone|iPad/.test(navigator.userAgent) ||
+			(/Macintosh/.test(navigator.userAgent) && navigator.maxTouchPoints > 1);
 		const standalone =
 			matchMedia("(display-mode: standalone)").matches ||
 			("standalone" in navigator && navigator.standalone === true);
@@ -76,9 +85,6 @@
 		if (standalone || !touch || alreadyPrompted()) {
 			return;
 		}
-		const apple =
-			/iPhone|iPad/.test(navigator.userAgent) ||
-			(/Macintosh/.test(navigator.userAgent) && navigator.maxTouchPoints > 1);
 		if (apple) {
 			const timer = setTimeout(() => show("apple"), 1500);
 			return () => clearTimeout(timer);
@@ -128,7 +134,7 @@
 				{@render brand()}
 			</div>
 		{/if}
-		{#if mode === "native"}
+		{#if shownMode === "native"}
 			<Button class="glow h-12 rounded-xl text-base" onclick={install}>
 				<DownloadIcon />
 				{text.install}
@@ -140,7 +146,7 @@
 			>
 		{:else}
 			<ol class="flex flex-col gap-3 text-sm">
-				{#if mode === "apple"}
+				{#if shownMode === "apple"}
 					{@render step(ShareIcon, text.appleShare)}
 					{@render step(SquarePlusIcon, text.appleAdd)}
 				{:else}

package/dist/components/blocks/install-prompt.svelte.d.ts

@@ -14,6 +14,7 @@ declare const InstallPrompt: import("svelte").Component<{
         install: string;
         notNow: string;
     }>;
-}, {}, "">;
+    open?: boolean;
+}, {}, "open">;
 type InstallPrompt = ReturnType<typeof InstallPrompt>;
 export default InstallPrompt;