@heyramzi/ui 1.54.1 → 2.0.0

package/src/onboarding/tour-runner.svelte

@@ -0,0 +1,197 @@
+<script lang="ts">
+	// The only file that knows Zag. Swap the machine and nothing else in the package changes.
+	import * as zag from "@zag-js/tour";
+	import { normalizeProps, portal, useMachine } from "@zag-js/svelte";
+	import { onMount, tick, untrack } from "svelte";
+	import TourCard from "./tour-card.svelte";
+	import type { Outcome, Step, Strings, Tour } from "./types.js";
+
+	let {
+		tour,
+		steps,
+		strings,
+		onfinish,
+	}: {
+		tour: Tour;
+		steps: Step[];
+		strings: Strings;
+		/** `null` means the tour never showed, so nothing is worth recording. */
+		onfinish: (outcome: Outcome | null) => void;
+	} = $props();
+
+	// The provider keys this component per run, so the tour never changes under it.
+	const { tour: fixed, steps: fixedSteps } = untrack(() => ({ tour, steps }));
+	const intro = fixed.kind === "intro" ? fixed : null;
+
+	const zagSteps: zag.StepDetails[] = intro
+		? [{ id: "intro", type: "dialog", title: intro.title, description: intro.body, backdrop: true }]
+		: fixedSteps.map((step, i) => ({
+				id: `step-${i}`,
+				type: "tooltip",
+				target: () => document.querySelector<HTMLElement>(step.target),
+				title: step.title,
+				description: step.body,
+				placement: step.placement ?? "bottom",
+				offset: { mainAxis: 12 },
+				backdrop: true,
+			}));
+
+	let finished = false;
+	function finish(outcome: Outcome | null) {
+		if (finished) return;
+		finished = true;
+		onfinish(outcome);
+	}
+
+	// Dismissing on the last step reports "dismissed" and then "completed" in one go, so the
+	// dismissal waits a microtask and the completion wins.
+	function onStatusChange({ status }: zag.StatusChangeDetails) {
+		if (status === "completed") finish("completed");
+		else if (status === "dismissed" || status === "skipped") queueMicrotask(() => finish("dismissed"));
+		else if (status === "not-found") finish(null);
+	}
+
+	const id = $props.id();
+	const service = useMachine(zag.machine, () => ({
+		id,
+		steps: zagSteps,
+		onStatusChange,
+		closeOnInteractOutside: false,
+		spotlightOffset: { x: 8, y: 8 },
+		spotlightRadius: 10,
+		translations: {
+			progressText: ({ current, total }) => strings.progress(current + 1, total),
+			nextStep: strings.next,
+			prevStep: strings.back,
+			close: strings.skip,
+			skip: strings.skip,
+		},
+	}));
+	const api = $derived(zag.connect(service, normalizeProps));
+
+	const dismiss = () => service.send({ type: "DISMISS" });
+
+	onMount(() => api.start());
+
+	// Zag marks a repositioning (scroll, resize) with a zero-length spotlight transition. The
+	// backdrop hole has to snap with it, or it trails the ring.
+	const instant = $derived(String(api.getSpotlightProps().style ?? "").includes("0ms"));
+
+	let card = $state<HTMLElement | null>(null);
+	let cleanupMargin: (() => void) | null = null;
+
+	// Under 640px the card is a sheet over the bottom of the screen. Scroll the target above it.
+	$effect(() => {
+		const step = api.open ? api.step : null;
+		cleanupMargin?.();
+		cleanupMargin = null;
+		if (!step?.target || !matchMedia("(max-width: 639px)").matches) return;
+		let cancelled = false;
+		void tick().then(() => {
+			const target = step.target?.();
+			if (cancelled || !target || !card) return;
+			const previous = target.style.scrollMarginBottom;
+			target.style.scrollMarginBottom = `${card.offsetHeight + 16}px`;
+			target.scrollIntoView({ block: "nearest", behavior: "instant" });
+			cleanupMargin = () => {
+				target.style.scrollMarginBottom = previous;
+			};
+		});
+		return () => {
+			cancelled = true;
+		};
+	});
+
+	const index = $derived(Math.max(api.stepIndex, 0));
+	const step = $derived(api.step);
+</script>
+
+{#if step}
+	<div use:portal {...api.getBackdropProps()} class="tour-backdrop" data-instant={instant || undefined}></div>
+	<div use:portal {...api.getSpotlightProps()} class="tour-spotlight"></div>
+	<div use:portal {...api.getPositionerProps()} class="tour-positioner">
+		<div
+			{...api.getContentProps()}
+			bind:this={card}
+			class={["tour-card bg-popover text-popover-foreground ring-foreground/10 shadow-overlay pointer-events-auto max-w-full text-sm ring-1 outline-none", intro ? "w-96 rounded-2xl" : "w-80 rounded-xl"]}
+		>
+			<TourCard
+				title={String(step.title)}
+				body={String(step.description)}
+				image={intro?.image}
+				intro={intro !== null}
+				{index}
+				total={api.totalSteps}
+				{strings}
+				titleAttrs={api.getTitleProps()}
+				bodyAttrs={api.getDescriptionProps()}
+				onclose={dismiss}
+				onprev={() => api.prev()}
+				onnext={() => (api.lastStep ? dismiss() : api.next())}
+			/>
+		</div>
+	</div>
+{/if}
+
+<style>
+	.tour-backdrop,
+	.tour-spotlight,
+	.tour-positioner {
+		--tour-z-index: 60;
+		z-index: calc(var(--tour-layer) + var(--tour-z-index));
+	}
+	.tour-backdrop {
+		background: oklch(0 0 0 / 0.5);
+		transition: clip-path var(--duration-fast) var(--ease-smooth-out);
+	}
+	.tour-backdrop[data-instant] {
+		transition-duration: 0ms;
+	}
+	.tour-spotlight {
+		outline: 2px solid oklch(1 0 0 / 0.7);
+		transition-property: left, top, width, height;
+		transition-duration: var(--duration-fast);
+		transition-timing-function: var(--ease-smooth-out);
+	}
+	.tour-positioner[data-type="dialog"] {
+		position: fixed;
+		inset: 0;
+		display: grid;
+		place-items: center;
+		padding: 1rem;
+		pointer-events: none;
+	}
+	.tour-card[data-state="open"] {
+		animation: tour-in var(--duration-fast) var(--ease-smooth-out);
+	}
+	@keyframes tour-in {
+		from {
+			opacity: 0;
+			scale: 0.97;
+		}
+	}
+	@media (max-width: 639px) {
+		.tour-positioner {
+			position: fixed !important;
+			inset: auto 0 0 0 !important;
+			transform: none !important;
+			translate: none !important;
+			min-width: 0 !important;
+			width: auto !important;
+			display: block !important;
+			padding: 0.75rem 0.75rem calc(0.75rem + env(safe-area-inset-bottom));
+		}
+		.tour-card {
+			width: 100%;
+		}
+	}
+	@media (prefers-reduced-motion: reduce) {
+		.tour-backdrop,
+		.tour-spotlight {
+			transition: none;
+		}
+		.tour-card[data-state="open"] {
+			animation: none;
+		}
+	}
+</style>

package/src/onboarding/types.ts

@@ -0,0 +1,34 @@
+export type Side = "top" | "bottom" | "left" | "right";
+export type Placement = Side | `${Side}-${"start" | "end"}`;
+
+/** One stop on a page. `target` is a CSS selector, usually `[data-tour="name"]`. */
+export type Step = { target: string; title: string; body: string; placement?: Placement };
+
+/**
+ * `route` is a SvelteKit route id such as `/(app)/projects/[id]`, so params never matter.
+ * `version` starts at 1. Raise it and everyone who saw the old one sees the tour again.
+ */
+export type Tour =
+	| { id: string; version?: number; route: string; kind: "steps"; steps: Step[] }
+	| { id: string; version?: number; route: string; kind: "intro"; title: string; body: string; image?: string };
+
+export type Outcome = "completed" | "dismissed";
+
+/** Where seen-state lives. `load` runs once per session. */
+export interface SeenStore {
+	/** Tour id to the version seen. */
+	load(): Promise<Record<string, number>>;
+	markSeen(tourId: string, version: number, outcome: Outcome): Promise<void>;
+	/** One tour, or all of them when no id is given. */
+	reset(tourId?: string): Promise<void>;
+}
+
+export type Strings = {
+	next: string;
+	back: string;
+	done: string;
+	skip: string;
+	progress: (n: number, total: number) => string;
+};
+
+export const MAX_STEPS = 6;

package/src/onboarding/wait.ts

@@ -0,0 +1,29 @@
+const find = (selector: string) => document.querySelector(selector);
+
+/** Resolves with the element once the selector matches, or null after `timeoutMs` or an abort. */
+export function waitForElement(
+	selector: string,
+	timeoutMs: number,
+	signal?: AbortSignal,
+): Promise<Element | null> {
+	return new Promise((resolve) => {
+		const now = find(selector);
+		if (now) return resolve(now);
+		if (signal?.aborted) return resolve(null);
+
+		const finish = (el: Element | null) => {
+			observer.disconnect();
+			clearTimeout(timer);
+			signal?.removeEventListener("abort", onAbort);
+			resolve(el);
+		};
+		const onAbort = () => finish(null);
+		const observer = new MutationObserver(() => {
+			const el = find(selector);
+			if (el) finish(el);
+		});
+		const timer = setTimeout(() => finish(find(selector)), timeoutMs);
+		observer.observe(document.documentElement, { childList: true, subtree: true });
+		signal?.addEventListener("abort", onAbort);
+	});
+}

package/src/shadcn/accordion/accordion-content.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { Accordion as AccordionPrimitive } from "bits-ui";
-	import { cn, type WithoutChild } from "@heyramzi/utils";
+	import { cn, type WithoutChild } from "../../lib/utils.js";
 
 	let {
 		ref = $bindable(null),

package/src/shadcn/accordion/accordion-item.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { Accordion as AccordionPrimitive } from "bits-ui";
-	import { cn } from "@heyramzi/utils";
+	import { cn } from "../../lib/utils.js";
 
 	let {
 		ref = $bindable(null),

package/src/shadcn/accordion/accordion-trigger.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { CaretDown } from "phosphor-svelte";
 	import { Accordion as AccordionPrimitive } from "bits-ui";
-	import { cn, type WithoutChild } from "@heyramzi/utils";
+	import { cn, type WithoutChild } from "../../lib/utils.js";
 	import type { Snippet } from "svelte";
 
 	let {

package/src/shadcn/accordion/accordion.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { Accordion as AccordionPrimitive } from "bits-ui";
-	import { cn } from "@heyramzi/utils";
+	import { cn } from "../../lib/utils.js";
 
 	let {
 		ref = $bindable(null),

package/src/shadcn/alert/alert-description.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import type { HTMLAttributes } from "svelte/elements";
-	import { cn, type WithElementRef } from "@heyramzi/utils";
+	import { cn, type WithElementRef } from "../../lib/utils.js";
 
 	let {
 		ref = $bindable(null),

package/src/shadcn/alert/alert-title.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import type { HTMLAttributes } from "svelte/elements";
-	import { cn, type WithElementRef } from "@heyramzi/utils";
+	import { cn, type WithElementRef } from "../../lib/utils.js";
 
 	let {
 		ref = $bindable(null),

package/src/shadcn/alert/alert.svelte

@@ -20,7 +20,7 @@
 
 <script lang="ts">
 	import type { HTMLAttributes } from "svelte/elements";
-	import { cn, type WithElementRef } from "@heyramzi/utils";
+	import { cn, type WithElementRef } from "../../lib/utils.js";
 
 	let {
 		ref = $bindable(null),

package/src/shadcn/alert-dialog/alert-dialog-action.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
 	import { buttonVariants } from "../button/index.js";
-	import { cn } from "@heyramzi/utils";
+	import { cn } from "../../lib/utils.js";
 
 	let {
 		ref = $bindable(null),

package/src/shadcn/alert-dialog/alert-dialog-cancel.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
 	import { buttonVariants } from "../button/index.js";
-	import { cn } from "@heyramzi/utils";
+	import { cn } from "../../lib/utils.js";
 
 	let {
 		ref = $bindable(null),

package/src/shadcn/alert-dialog/alert-dialog-content.svelte

@@ -2,7 +2,7 @@
 	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
 	import AlertDialogPortal from "./alert-dialog-portal.svelte";
 	import AlertDialogOverlay from "./alert-dialog-overlay.svelte";
-	import { cn, type WithoutChild, type WithoutChildrenOrChild } from "@heyramzi/utils";
+	import { cn, type WithoutChild, type WithoutChildrenOrChild } from "../../lib/utils.js";
 	import type { ComponentProps } from "svelte";
 
 	let {

package/src/shadcn/alert-dialog/alert-dialog-description.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
-	import { cn } from "@heyramzi/utils";
+	import { cn } from "../../lib/utils.js";
 
 	let {
 		ref = $bindable(null),

package/src/shadcn/alert-dialog/alert-dialog-footer.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { cn, type WithElementRef } from "@heyramzi/utils";
+	import { cn, type WithElementRef } from "../../lib/utils.js";
 	import type { HTMLAttributes } from "svelte/elements";
 
 	let {

package/src/shadcn/alert-dialog/alert-dialog-header.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import type { HTMLAttributes } from "svelte/elements";
-	import { cn, type WithElementRef } from "@heyramzi/utils";
+	import { cn, type WithElementRef } from "../../lib/utils.js";
 
 	let {
 		ref = $bindable(null),

package/src/shadcn/alert-dialog/alert-dialog-overlay.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
-	import { cn } from "@heyramzi/utils";
+	import { cn } from "../../lib/utils.js";
 
 	let {
 		ref = $bindable(null),

package/src/shadcn/alert-dialog/alert-dialog-title.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
-	import { cn } from "@heyramzi/utils";
+	import { cn } from "../../lib/utils.js";
 
 	let {
 		ref = $bindable(null),

package/src/shadcn/attachment/attachment-action.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { Button, type ButtonProps } from "../button/index.js";
-	import { cn } from "@heyramzi/utils";
+	import { cn } from "../../lib/utils.js";
 
 	let {
 		ref = $bindable(null),

package/src/shadcn/attachment/attachment-actions.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { cn, type WithElementRef } from "@heyramzi/utils";
+	import { cn, type WithElementRef } from "../../lib/utils.js";
 	import type { HTMLAttributes } from "svelte/elements";
 
 	let {

package/src/shadcn/attachment/attachment-content.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { cn, type WithElementRef } from "@heyramzi/utils";
+	import { cn, type WithElementRef } from "../../lib/utils.js";
 	import type { HTMLAttributes } from "svelte/elements";
 
 	let {

package/src/shadcn/attachment/attachment-description.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { cn, type WithElementRef } from "@heyramzi/utils";
+	import { cn, type WithElementRef } from "../../lib/utils.js";
 	import type { HTMLAttributes } from "svelte/elements";
 
 	let {

package/src/shadcn/attachment/attachment-group.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { cn, type WithElementRef } from "@heyramzi/utils";
+	import { cn, type WithElementRef } from "../../lib/utils.js";
 	import type { HTMLAttributes } from "svelte/elements";
 
 	let {

package/src/shadcn/attachment/attachment-media.svelte

@@ -19,7 +19,7 @@
 </script>
 
 <script lang="ts">
-	import { cn, type WithElementRef } from "@heyramzi/utils";
+	import { cn, type WithElementRef } from "../../lib/utils.js";
 	import type { HTMLAttributes } from "svelte/elements";
 
 	let {

package/src/shadcn/attachment/attachment-title.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { cn, type WithElementRef } from "@heyramzi/utils";
+	import { cn, type WithElementRef } from "../../lib/utils.js";
 	import type { HTMLAttributes } from "svelte/elements";
 
 	let {

package/src/shadcn/attachment/attachment-trigger.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { cn, type WithElementRef } from "@heyramzi/utils";
+	import { cn, type WithElementRef } from "../../lib/utils.js";
 	import type { Snippet } from "svelte";
 	import type { HTMLButtonAttributes } from "svelte/elements";
 

package/src/shadcn/attachment/attachment.svelte

@@ -24,7 +24,7 @@
 </script>
 
 <script lang="ts">
-	import { cn, type WithElementRef } from "@heyramzi/utils";
+	import { cn, type WithElementRef } from "../../lib/utils.js";
 	import type { HTMLAttributes } from "svelte/elements";
 
 	let {

package/src/shadcn/avatar/avatar-badge.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import type { HTMLAttributes } from "svelte/elements";
-	import { cn, type WithElementRef } from "@heyramzi/utils";
+	import { cn, type WithElementRef } from "../../lib/utils.js";
 
 	let {
 		ref = $bindable(null),

package/src/shadcn/avatar/avatar-fallback.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { Avatar as AvatarPrimitive } from "bits-ui";
-	import { cn } from "@heyramzi/utils";
+	import { cn } from "../../lib/utils.js";
 
 	let {
 		ref = $bindable(null),

package/src/shadcn/avatar/avatar-group-count.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import type { HTMLAttributes } from "svelte/elements";
-	import { cn, type WithElementRef } from "@heyramzi/utils";
+	import { cn, type WithElementRef } from "../../lib/utils.js";
 
 	let {
 		ref = $bindable(null),

package/src/shadcn/avatar/avatar-group.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import type { HTMLAttributes } from "svelte/elements";
-	import { cn, type WithElementRef } from "@heyramzi/utils";
+	import { cn, type WithElementRef } from "../../lib/utils.js";
 
 	let {
 		ref = $bindable(null),

package/src/shadcn/avatar/avatar-image.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { Avatar as AvatarPrimitive } from "bits-ui";
-	import { cn } from "@heyramzi/utils";
+	import { cn } from "../../lib/utils.js";
 
 	let {
 		ref = $bindable(null),

package/src/shadcn/avatar/avatar.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { Avatar as AvatarPrimitive } from "bits-ui";
-	import { cn } from "@heyramzi/utils";
+	import { cn } from "../../lib/utils.js";
 
 	let {
 		ref = $bindable(null),

package/src/shadcn/badge/badge.svelte

@@ -24,7 +24,7 @@
 
 <script lang="ts">
 	import type { HTMLAnchorAttributes } from "svelte/elements";
-	import { cn, type WithElementRef } from "@heyramzi/utils";
+	import { cn, type WithElementRef } from "../../lib/utils.js";
 	import { TONE_CLASS, type Tone } from "../../lib/tone.js";
 
 	let {

package/src/shadcn/breadcrumb/breadcrumb-ellipsis.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { DotsThree } from "phosphor-svelte";
 	import type { HTMLAttributes } from "svelte/elements";
-	import { cn, type WithElementRef, type WithoutChildren } from "@heyramzi/utils";
+	import { cn, type WithElementRef, type WithoutChildren } from "../../lib/utils.js";
 
 	let {
 		ref = $bindable(null),

package/src/shadcn/breadcrumb/breadcrumb-item.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import type { HTMLLiAttributes } from "svelte/elements";
-	import { cn, type WithElementRef } from "@heyramzi/utils";
+	import { cn, type WithElementRef } from "../../lib/utils.js";
 
 	let {
 		ref = $bindable(null),

package/src/shadcn/breadcrumb/breadcrumb-link.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import type { HTMLAnchorAttributes } from "svelte/elements";
 	import type { Snippet } from "svelte";
-	import { cn, type WithElementRef } from "@heyramzi/utils";
+	import { cn, type WithElementRef } from "../../lib/utils.js";
 
 	let {
 		ref = $bindable(null),

package/src/shadcn/breadcrumb/breadcrumb-list.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import type { HTMLOlAttributes } from "svelte/elements";
-	import { cn, type WithElementRef } from "@heyramzi/utils";
+	import { cn, type WithElementRef } from "../../lib/utils.js";
 
 	let {
 		ref = $bindable(null),

package/src/shadcn/breadcrumb/breadcrumb-page.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import type { HTMLAttributes } from "svelte/elements";
-	import { cn, type WithElementRef } from "@heyramzi/utils";
+	import { cn, type WithElementRef } from "../../lib/utils.js";
 
 	let {
 		ref = $bindable(null),

package/src/shadcn/breadcrumb/breadcrumb-separator.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { CaretRight } from "phosphor-svelte";
-	import { cn, type WithElementRef } from "@heyramzi/utils";
+	import { cn, type WithElementRef } from "../../lib/utils.js";
 	import type { HTMLLiAttributes } from "svelte/elements";
 
 	let {

package/src/shadcn/breadcrumb/breadcrumb.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import type { WithElementRef } from "@heyramzi/utils";
+	import type { WithElementRef } from "../../lib/utils.js";
 	import type { HTMLAttributes } from "svelte/elements";
 
 	let {

package/src/shadcn/bubble/bubble-content.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { cn, type WithElementRef } from "@heyramzi/utils";
+	import { cn, type WithElementRef } from "../../lib/utils.js";
 	import type { Snippet } from "svelte";
 	import type { HTMLAttributes } from "svelte/elements";
 

package/src/shadcn/bubble/bubble-group.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { cn, type WithElementRef } from "@heyramzi/utils";
+	import { cn, type WithElementRef } from "../../lib/utils.js";
 	import type { HTMLAttributes } from "svelte/elements";
 
 	let {

package/src/shadcn/bubble/bubble-reactions.svelte

@@ -24,7 +24,7 @@
 </script>
 
 <script lang="ts">
-	import { cn, type WithElementRef } from "@heyramzi/utils";
+	import { cn, type WithElementRef } from "../../lib/utils.js";
 	import type { HTMLAttributes } from "svelte/elements";
 
 	let {

package/src/shadcn/bubble/bubble.svelte

@@ -30,7 +30,7 @@
 </script>
 
 <script lang="ts">
-	import { cn, type WithElementRef } from "@heyramzi/utils";
+	import { cn, type WithElementRef } from "../../lib/utils.js";
 	import type { HTMLAttributes } from "svelte/elements";
 
 	let {