@kestack/web-platform 0.0.0-stage → 0.0.1

package/dist/recipes/key-bindings/key-bindings.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"key-bindings.js","names":[],"sources":["../../../src/recipes/key-bindings/key-bindings.tsx"],"sourcesContent":["import { Kbd, KbdGroup } from '#components/ui/kbd';\nimport { cn } from '#lib/utils';\nimport type { Binding, Shortcut } from '@kestack/use-keys';\n\n/** Whether this is an Apple device, where `mod` is Cmd. */\nconst mac = () =>\n  typeof navigator !== 'undefined' &&\n  /Mac|iPhone|iPad|iPod/.test(navigator.platform);\n\n/**\n * One recorded key, as a Shortcut: Cmd on a Mac or Ctrl elsewhere becomes\n * `mod`, so the key works on both.\n */\nexport const recorded = (name: string, held: ReadonlySet<string>): Shortcut => {\n  const apple = mac();\n  return {\n    type: 'shortcut',\n    key: name as Shortcut['key'],\n    mod: held.has(apple ? 'Meta' : 'Control'),\n    ctrl: apple && held.has('Control'),\n    alt: held.has('Alt'),\n    // A symbol is the character typed, so Shift is part of it.\n    shift: held.has('Shift') && /^[a-z]$|^[A-Z]/.test(name),\n    meta: !apple && held.has('Meta'),\n  };\n};\n\nconst KEY_NAMES: Readonly<Record<string, string>> = {\n  ArrowUp: '↑',\n  ArrowDown: '↓',\n  ArrowLeft: '←',\n  ArrowRight: '→',\n  Enter: '↵',\n  Escape: 'Esc',\n  Space: 'Space',\n};\n\n// A Shortcut as its keys read on this platform: ⌘K on a Mac, Ctrl K elsewhere.\nconst labels = (step: Shortcut) => {\n  const apple = mac();\n  return [\n    step.mod !== false && (apple ? '⌘' : 'Ctrl'),\n    step.ctrl !== false && (apple ? '⌃' : 'Ctrl'),\n    step.alt !== false && (apple ? '⌥' : 'Alt'),\n    step.shift !== false && '⇧',\n    step.meta !== false && (apple ? '⌘' : 'Win'),\n    KEY_NAMES[step.key] ?? step.key.toUpperCase(),\n  ].filter((label) => label !== false);\n};\n\n/**\n * A Binding's keys, step by step: `G` `G`, or `⌘` `K`. A hint shows only\n * where there is a keyboard and Keys are on; `always` shows it anyway, as\n * Settings lists every key.\n */\nexport function BindingKeys(props: {\n  readonly binding: Binding;\n  readonly always?: boolean;\n  readonly className?: string;\n}) {\n  const steps =\n    props.binding.type === 'shortcut' ? [props.binding] : props.binding.steps;\n  return (\n    <KbdGroup\n      className={cn(\n        'gap-0.5',\n        props.always !== true && 'hidden keys:inline-flex',\n        props.className,\n      )}\n    >\n      {steps.map((step, i) => (\n        <KbdGroup key={i} className=\"gap-0.5\">\n          {labels(step).map((label) => (\n            <Kbd key={label}>{label}</Kbd>\n          ))}\n        </KbdGroup>\n      ))}\n    </KbdGroup>\n  );\n}\n"],"mappings":";;;;;AAKA,MAAM,YACJ,OAAO,cAAc,eACrB,uBAAuB,KAAK,UAAU,QAAQ;;;;;AAMhD,MAAa,YAAY,MAAc,SAAwC;CAC7E,MAAM,QAAQ,IAAI;CAClB,OAAO;EACL,MAAM;EACN,KAAK;EACL,KAAK,KAAK,IAAI,QAAQ,SAAS,SAAS;EACxC,MAAM,SAAS,KAAK,IAAI,SAAS;EACjC,KAAK,KAAK,IAAI,KAAK;EAEnB,OAAO,KAAK,IAAI,OAAO,KAAK,iBAAiB,KAAK,IAAI;EACtD,MAAM,CAAC,SAAS,KAAK,IAAI,MAAM;CACjC;AACF;AAEA,MAAM,YAA8C;CAClD,SAAS;CACT,WAAW;CACX,WAAW;CACX,YAAY;CACZ,OAAO;CACP,QAAQ;CACR,OAAO;AACT;AAGA,MAAM,UAAU,SAAmB;CACjC,MAAM,QAAQ,IAAI;CAClB,OAAO;EACL,KAAK,QAAQ,UAAU,QAAQ,MAAM;EACrC,KAAK,SAAS,UAAU,QAAQ,MAAM;EACtC,KAAK,QAAQ,UAAU,QAAQ,MAAM;EACrC,KAAK,UAAU,SAAS;EACxB,KAAK,SAAS,UAAU,QAAQ,MAAM;EACtC,UAAU,KAAK,QAAQ,KAAK,IAAI,YAAY;CAC9C,CAAC,CAAC,QAAQ,UAAU,UAAU,KAAK;AACrC;;;;;;AAOA,SAAgB,YAAY,OAIzB;CACD,MAAM,QACJ,MAAM,QAAQ,SAAS,aAAa,CAAC,MAAM,OAAO,IAAI,MAAM,QAAQ;CACtE,OACE,oBAAC,UAAD;EACE,WAAW,GACT,WACA,MAAM,WAAW,QAAQ,2BACzB,MAAM,SACR;EAEC,UAAA,MAAM,KAAK,MAAM,MAChB,oBAAC,UAAD;GAAkB,WAAU;GACzB,UAAA,OAAO,IAAI,CAAC,CAAC,KAAK,UACjB,oBAAC,KAAD,EAAA,UAAkB,MAAW,GAAnB,KAAmB,CAC9B;EACO,GAJK,CAIL,CACX;CACO,CAAA;AAEd"}

package/dist/recipes/local-sign-in/index.d.ts

@@ -0,0 +1,2 @@
+import { LocalSignIn, LocalSignInChoice, LocalSignInProps } from "./local-sign-in.js";
+export { LocalSignIn, type LocalSignInChoice, type LocalSignInProps };

package/dist/recipes/local-sign-in/index.js

@@ -0,0 +1,2 @@
+import { LocalSignIn } from "./local-sign-in.js";
+export { LocalSignIn };

package/dist/recipes/local-sign-in/local-sign-in.d.ts

@@ -0,0 +1,18 @@
+//#region src/recipes/local-sign-in/local-sign-in.d.ts
+/** Who to sign in as, when sign-in is local. */
+export interface LocalSignInChoice {
+  email: string;
+  name?: string;
+}
+export interface LocalSignInProps {
+  open: boolean;
+  presets: ReadonlyArray<LocalSignInChoice>;
+  onChoose: (choice: LocalSignInChoice) => void;
+  /** Called when the User closes the dialog without choosing. */
+  onCancel: () => void;
+}
+/** Stands in for a real sign-in when an app runs on its own: the
+ * User picks a preset or types who they want to be. */
+export declare function LocalSignIn({ open, presets, onChoose, onCancel }: LocalSignInProps): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=local-sign-in.d.ts.map

package/dist/recipes/local-sign-in/local-sign-in.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"local-sign-in.d.ts","names":[],"sources":["../../../src/recipes/local-sign-in/local-sign-in.tsx"],"mappings":";;iBAkBiB;EACf;EACA;;iBAGe;EACf;EACA,SAAS,cAAc;EACvB,WAAW,QAAQ;;EAEnB;;;;wBA8Cc,cACd,MACA,SACA,UACA,YACC,mCAAgB,IAAA"}

package/dist/recipes/local-sign-in/local-sign-in.js

@@ -0,0 +1,109 @@
+import { Button } from "../../components/ui/button.js";
+import { Avatar, AvatarFallback } from "../../components/ui/avatar.js";
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "../../components/ui/dialog.js";
+import { Input } from "../../components/ui/input.js";
+import { Label } from "../../components/ui/label.js";
+import { cn } from "../../components/lib/utils.js";
+import { MaskedEmail } from "../parts/email-privacy/email-privacy.js";
+import { useId, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/recipes/local-sign-in/local-sign-in.tsx
+const initials = (choice) => (choice.name || choice.email).split(/[\s@]+/).filter(Boolean).slice(0, 2).map((part) => part.charAt(0).toUpperCase()).join("");
+function PresetButton({ choice, onChoose }) {
+	return /* @__PURE__ */ jsxs(Button, {
+		variant: "ghost",
+		className: "h-auto w-full justify-start gap-3 px-2 py-2 text-left font-normal",
+		onClick: () => onChoose(choice),
+		children: [/* @__PURE__ */ jsx(Avatar, {
+			className: "size-7 text-[0.6rem]",
+			children: /* @__PURE__ */ jsx(AvatarFallback, { children: initials(choice) })
+		}), /* @__PURE__ */ jsxs("span", {
+			className: "flex min-w-0 flex-1 flex-col",
+			children: [choice.name ? /* @__PURE__ */ jsx("span", {
+				className: "truncate text-sm",
+				children: choice.name
+			}) : null, /* @__PURE__ */ jsx("span", {
+				className: cn("truncate", choice.name ? "text-xs text-muted-foreground" : "text-sm"),
+				children: /* @__PURE__ */ jsx(MaskedEmail, { email: choice.email })
+			})]
+		})]
+	});
+}
+/** Stands in for a real sign-in when an app runs on its own: the
+* User picks a preset or types who they want to be. */
+function LocalSignIn({ open, presets, onChoose, onCancel }) {
+	const id = useId();
+	const [email, setEmail] = useState("");
+	const [name, setName] = useState("");
+	const submit = (event) => {
+		event.preventDefault();
+		const trimmed = email.trim();
+		if (!trimmed) return;
+		onChoose(name.trim() ? {
+			email: trimmed,
+			name: name.trim()
+		} : { email: trimmed });
+	};
+	return /* @__PURE__ */ jsx(Dialog, {
+		open,
+		onOpenChange: (next) => !next && onCancel(),
+		children: /* @__PURE__ */ jsxs(DialogContent, { children: [
+			/* @__PURE__ */ jsxs(DialogHeader, { children: [/* @__PURE__ */ jsx(DialogTitle, { children: "Who should sign in?" }), /* @__PURE__ */ jsx(DialogDescription, { children: "Nothing here leaves this device. Pick anyone to continue as." })] }),
+			presets.length > 0 ? /* @__PURE__ */ jsx("div", {
+				className: "-mx-2 flex flex-col gap-1",
+				children: presets.map((choice) => /* @__PURE__ */ jsx(PresetButton, {
+					choice,
+					onChoose
+				}, choice.email))
+			}) : null,
+			/* @__PURE__ */ jsxs("form", {
+				onSubmit: submit,
+				className: "flex flex-col gap-4",
+				children: [
+					/* @__PURE__ */ jsxs("div", {
+						className: "flex flex-col gap-2",
+						children: [/* @__PURE__ */ jsx(Label, {
+							htmlFor: `${id}-email`,
+							children: "Email"
+						}), /* @__PURE__ */ jsx(Input, {
+							id: `${id}-email`,
+							type: "email",
+							required: true,
+							value: email,
+							onChange: (event) => setEmail(event.target.value),
+							autoComplete: "off",
+							spellCheck: false,
+							"data-1p-ignore": true,
+							placeholder: "someone@example.com"
+						})]
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "flex flex-col gap-2",
+						children: [/* @__PURE__ */ jsxs(Label, {
+							htmlFor: `${id}-name`,
+							children: ["Name ", /* @__PURE__ */ jsx("span", {
+								className: "text-muted-foreground",
+								children: "(optional)"
+							})]
+						}), /* @__PURE__ */ jsx(Input, {
+							id: `${id}-name`,
+							value: name,
+							onChange: (event) => setName(event.target.value),
+							autoComplete: "off",
+							"data-1p-ignore": true
+						})]
+					}),
+					/* @__PURE__ */ jsx(Button, {
+						type: "submit",
+						disabled: email.trim() === "",
+						children: "Sign in"
+					})
+				]
+			})
+		] })
+	});
+}
+//#endregion
+export { LocalSignIn };
+
+//# sourceMappingURL=local-sign-in.js.map

package/dist/recipes/local-sign-in/local-sign-in.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"local-sign-in.js","names":[],"sources":["../../../src/recipes/local-sign-in/local-sign-in.tsx"],"sourcesContent":["import { useId, useState, type FormEvent } from 'react';\n\nimport { Avatar, AvatarFallback } from '#components/ui/avatar';\nimport { Button } from '#components/ui/button';\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n} from '#components/ui/dialog';\nimport { Input } from '#components/ui/input';\nimport { Label } from '#components/ui/label';\nimport { cn } from '#lib/utils';\n\nimport { MaskedEmail } from '../parts/email-privacy';\n\n/** Who to sign in as, when sign-in is local. */\nexport interface LocalSignInChoice {\n  email: string;\n  name?: string;\n}\n\nexport interface LocalSignInProps {\n  open: boolean;\n  presets: ReadonlyArray<LocalSignInChoice>;\n  onChoose: (choice: LocalSignInChoice) => void;\n  /** Called when the User closes the dialog without choosing. */\n  onCancel: () => void;\n}\n\nconst initials = (choice: LocalSignInChoice) =>\n  (choice.name || choice.email)\n    .split(/[\\s@]+/)\n    .filter(Boolean)\n    .slice(0, 2)\n    .map((part) => part.charAt(0).toUpperCase())\n    .join('');\n\nfunction PresetButton({\n  choice,\n  onChoose,\n}: {\n  choice: LocalSignInChoice;\n  onChoose: (choice: LocalSignInChoice) => void;\n}) {\n  return (\n    <Button\n      variant=\"ghost\"\n      className=\"h-auto w-full justify-start gap-3 px-2 py-2 text-left font-normal\"\n      onClick={() => onChoose(choice)}\n    >\n      <Avatar className=\"size-7 text-[0.6rem]\">\n        <AvatarFallback>{initials(choice)}</AvatarFallback>\n      </Avatar>\n      <span className=\"flex min-w-0 flex-1 flex-col\">\n        {choice.name ? (\n          <span className=\"truncate text-sm\">{choice.name}</span>\n        ) : null}\n        <span\n          className={cn(\n            'truncate',\n            choice.name ? 'text-xs text-muted-foreground' : 'text-sm',\n          )}\n        >\n          <MaskedEmail email={choice.email} />\n        </span>\n      </span>\n    </Button>\n  );\n}\n\n/** Stands in for a real sign-in when an app runs on its own: the\n * User picks a preset or types who they want to be. */\nexport function LocalSignIn({\n  open,\n  presets,\n  onChoose,\n  onCancel,\n}: LocalSignInProps) {\n  const id = useId();\n  const [email, setEmail] = useState('');\n  const [name, setName] = useState('');\n\n  const submit = (event: FormEvent) => {\n    event.preventDefault();\n    const trimmed = email.trim();\n    if (!trimmed) return;\n    onChoose(\n      name.trim() ? { email: trimmed, name: name.trim() } : { email: trimmed },\n    );\n  };\n\n  return (\n    <Dialog open={open} onOpenChange={(next) => !next && onCancel()}>\n      <DialogContent>\n        <DialogHeader>\n          <DialogTitle>Who should sign in?</DialogTitle>\n          <DialogDescription>\n            Nothing here leaves this device. Pick anyone to continue as.\n          </DialogDescription>\n        </DialogHeader>\n        {presets.length > 0 ? (\n          <div className=\"-mx-2 flex flex-col gap-1\">\n            {presets.map((choice) => (\n              <PresetButton\n                key={choice.email}\n                choice={choice}\n                onChoose={onChoose}\n              />\n            ))}\n          </div>\n        ) : null}\n        <form onSubmit={submit} className=\"flex flex-col gap-4\">\n          <div className=\"flex flex-col gap-2\">\n            <Label htmlFor={`${id}-email`}>Email</Label>\n            <Input\n              id={`${id}-email`}\n              type=\"email\"\n              required\n              value={email}\n              onChange={(event) => setEmail(event.target.value)}\n              autoComplete=\"off\"\n              spellCheck={false}\n              data-1p-ignore\n              placeholder=\"someone@example.com\"\n            />\n          </div>\n          <div className=\"flex flex-col gap-2\">\n            <Label htmlFor={`${id}-name`}>\n              Name <span className=\"text-muted-foreground\">(optional)</span>\n            </Label>\n            <Input\n              id={`${id}-name`}\n              value={name}\n              onChange={(event) => setName(event.target.value)}\n              autoComplete=\"off\"\n              data-1p-ignore\n            />\n          </div>\n          <Button type=\"submit\" disabled={email.trim() === ''}>\n            Sign in\n          </Button>\n        </form>\n      </DialogContent>\n    </Dialog>\n  );\n}\n"],"mappings":";;;;;;;;;;AA+BA,MAAM,YAAY,YACf,OAAO,QAAQ,OAAO,MAAA,CACpB,MAAM,QAAQ,CAAC,CACf,OAAO,OAAO,CAAC,CACf,MAAM,GAAG,CAAC,CAAC,CACX,KAAK,SAAS,KAAK,OAAO,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAC3C,KAAK,EAAE;AAEZ,SAAS,aAAa,EACpB,QACA,YAIC;CACD,OACE,qBAAC,QAAD;EACE,SAAQ;EACR,WAAU;EACV,eAAe,SAAS,MAAM;EAHhC,UAAA,CAKE,oBAAC,QAAD;GAAQ,WAAU;GAChB,UAAA,oBAAC,gBAAD,EAAA,UAAiB,SAAS,MAAM,EAAkB,CAAA;EAC5C,CAAA,GACR,qBAAC,QAAD;GAAM,WAAU;GAAhB,UAAA,CACG,OAAO,OACN,oBAAC,QAAD;IAAM,WAAU;IAAoB,UAAA,OAAO;GAAW,CAAA,IACpD,MACJ,oBAAC,QAAD;IACE,WAAW,GACT,YACA,OAAO,OAAO,kCAAkC,SAClD;IAEA,UAAA,oBAAC,aAAD,EAAa,OAAO,OAAO,MAAQ,CAAA;GAC/B,CAAA,CACF;EACA,CAAA,CAAA;;AAEZ;;;AAIA,SAAgB,YAAY,EAC1B,MACA,SACA,UACA,YACmB;CACnB,MAAM,KAAK,MAAM;CACjB,MAAM,CAAC,OAAO,YAAY,SAAS,EAAE;CACrC,MAAM,CAAC,MAAM,WAAW,SAAS,EAAE;CAEnC,MAAM,UAAU,UAAqB;EACnC,MAAM,eAAe;EACrB,MAAM,UAAU,MAAM,KAAK;EAC3B,IAAI,CAAC,SAAS;EACd,SACE,KAAK,KAAK,IAAI;GAAE,OAAO;GAAS,MAAM,KAAK,KAAK;EAAE,IAAI,EAAE,OAAO,QAAQ,CACzE;CACF;CAEA,OACE,oBAAC,QAAD;EAAc;EAAM,eAAe,SAAS,CAAC,QAAQ,SAAS;EAC5D,UAAA,qBAAC,eAAD,EAAA,UAAA;GACE,qBAAC,cAAD,EAAA,UAAA,CACE,oBAAC,aAAD,EAAA,UAAa,sBAAgC,CAAA,GAC7C,oBAAC,mBAAD,EAAA,UAAmB,+DAEA,CAAA,CACP,EAAA,CAAA;GACb,QAAQ,SAAS,IAChB,oBAAC,OAAD;IAAK,WAAU;IACZ,UAAA,QAAQ,KAAK,WACZ,oBAAC,cAAD;KAEU;KACE;IACX,GAHM,OAAO,KAGb,CACF;GACE,CAAA,IACH;GACJ,qBAAC,QAAD;IAAM,UAAU;IAAQ,WAAU;IAAlC,UAAA;KACE,qBAAC,OAAD;MAAK,WAAU;MAAf,UAAA,CACE,oBAAC,OAAD;OAAO,SAAS,GAAG,GAAG;OAAS,UAAA;MAAY,CAAA,GAC3C,oBAAC,OAAD;OACE,IAAI,GAAG,GAAG;OACV,MAAK;OACL,UAAA;OACA,OAAO;OACP,WAAW,UAAU,SAAS,MAAM,OAAO,KAAK;OAChD,cAAa;OACb,YAAY;OACZ,kBAAA;OACA,aAAY;MACb,CAAA,CACE;;KACL,qBAAC,OAAD;MAAK,WAAU;MAAf,UAAA,CACE,qBAAC,OAAD;OAAO,SAAS,GAAG,GAAG;OAAtB,UAAA,CAA8B,SACvB,oBAAC,QAAD;QAAM,WAAU;QAAwB,UAAA;OAAgB,CAAA,CACxD;MACP,CAAA,GAAA,oBAAC,OAAD;OACE,IAAI,GAAG,GAAG;OACV,OAAO;OACP,WAAW,UAAU,QAAQ,MAAM,OAAO,KAAK;OAC/C,cAAa;OACb,kBAAA;MACD,CAAA,CACE;;KACL,oBAAC,QAAD;MAAQ,MAAK;MAAS,UAAU,MAAM,KAAK,MAAM;MAAI,UAAA;KAE7C,CAAA;IACJ;;EACO,EAAA,CAAA;CACT,CAAA;AAEZ"}

package/dist/recipes/parts/email-privacy/email-privacy.d.ts

@@ -0,0 +1,24 @@
+//#region src/recipes/parts/email-privacy/email-privacy.d.ts
+interface EmailPrivacy {
+  masked: boolean;
+  toggle: () => void;
+}
+export declare const useEmailPrivacy: import("zustand").UseBoundStore<Omit<import("zustand").StoreApi<EmailPrivacy>, "persist" | "setState"> & {
+  setState(partial: EmailPrivacy | Partial<EmailPrivacy> | ((state: EmailPrivacy) => EmailPrivacy | Partial<EmailPrivacy>), replace?: false | undefined): unknown;
+  setState(state: EmailPrivacy | ((state: EmailPrivacy) => EmailPrivacy), replace: true): unknown;
+  persist: {
+    setOptions: (options: Partial<import("zustand/middleware").PersistOptions<EmailPrivacy, EmailPrivacy, unknown>>) => void;
+    clearStorage: () => void;
+    rehydrate: () => Promise<void> | void;
+    hasHydrated: () => boolean;
+    onHydrate: (fn: (state: EmailPrivacy) => void) => () => void;
+    onFinishHydration: (fn: (state: EmailPrivacy) => void) => () => void;
+    getOptions: () => Partial<import("zustand/middleware").PersistOptions<EmailPrivacy, EmailPrivacy, unknown>>;
+  };
+}>;
+export declare function MaskedEmail({ email }: {
+  email: string;
+}): import("react").JSX.Element;
+export declare function EmailToggle(): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=email-privacy.d.ts.map

package/dist/recipes/parts/email-privacy/email-privacy.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"email-privacy.d.ts","names":[],"sources":["../../../../src/recipes/parts/email-privacy/email-privacy.tsx"],"mappings":";UAOU;EACR;EACA;;qBAGW,mCAAe,cAAA,uBAAA,SAAA;;;;;;;;;;;;;wBAUZ,cAAc;EAAW;oBAAe,IAAA;wBAexC,+BAAW,IAAA"}

package/dist/recipes/parts/email-privacy/email-privacy.js

@@ -0,0 +1,35 @@
+import { Button } from "../../../components/ui/button.js";
+import { cn } from "../../../components/lib/utils.js";
+import { jsx } from "react/jsx-runtime";
+import { Eye, EyeOff } from "lucide-react";
+import { create } from "zustand";
+import { persist } from "zustand/middleware";
+//#region src/recipes/parts/email-privacy/email-privacy.tsx
+const useEmailPrivacy = create()(persist((set) => ({
+	masked: false,
+	toggle: () => set((state) => ({ masked: !state.masked }))
+}), { name: "auth:mask-email" }));
+function MaskedEmail({ email }) {
+	const masked = useEmailPrivacy((state) => state.masked);
+	return /* @__PURE__ */ jsx("span", {
+		"aria-label": masked ? "Email address hidden" : void 0,
+		className: cn("inline-block max-w-full truncate align-bottom", masked && "select-none blur-xs"),
+		children: email
+	});
+}
+function EmailToggle() {
+	const { masked, toggle } = useEmailPrivacy();
+	return /* @__PURE__ */ jsx(Button, {
+		variant: "ghost",
+		size: "icon",
+		"aria-label": masked ? "Show email address" : "Hide email address",
+		"aria-pressed": masked,
+		className: "relative text-muted-foreground before:absolute before:-inset-1 hover:text-foreground",
+		onClick: toggle,
+		children: masked ? /* @__PURE__ */ jsx(EyeOff, {}) : /* @__PURE__ */ jsx(Eye, {})
+	});
+}
+//#endregion
+export { EmailToggle, MaskedEmail, useEmailPrivacy };
+
+//# sourceMappingURL=email-privacy.js.map

package/dist/recipes/parts/email-privacy/email-privacy.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"email-privacy.js","names":[],"sources":["../../../../src/recipes/parts/email-privacy/email-privacy.tsx"],"sourcesContent":["import { Eye, EyeOff } from 'lucide-react';\nimport { create } from 'zustand';\nimport { persist } from 'zustand/middleware';\n\nimport { Button } from '#components/ui/button';\nimport { cn } from '#lib/utils';\n\ninterface EmailPrivacy {\n  masked: boolean;\n  toggle: () => void;\n}\n\nexport const useEmailPrivacy = create<EmailPrivacy>()(\n  persist(\n    (set) => ({\n      masked: false,\n      toggle: () => set((state) => ({ masked: !state.masked })),\n    }),\n    { name: 'auth:mask-email' },\n  ),\n);\n\nexport function MaskedEmail({ email }: { email: string }) {\n  const masked = useEmailPrivacy((state) => state.masked);\n  return (\n    <span\n      aria-label={masked ? 'Email address hidden' : undefined}\n      className={cn(\n        'inline-block max-w-full truncate align-bottom',\n        masked && 'select-none blur-xs',\n      )}\n    >\n      {email}\n    </span>\n  );\n}\n\nexport function EmailToggle() {\n  const { masked, toggle } = useEmailPrivacy();\n  return (\n    <Button\n      variant=\"ghost\"\n      size=\"icon\"\n      aria-label={masked ? 'Show email address' : 'Hide email address'}\n      aria-pressed={masked}\n      className=\"relative text-muted-foreground before:absolute before:-inset-1 hover:text-foreground\"\n      onClick={toggle}\n    >\n      {masked ? <EyeOff /> : <Eye />}\n    </Button>\n  );\n}\n"],"mappings":";;;;;;;AAYA,MAAa,kBAAkB,OAAqB,CAAC,CACnD,SACG,SAAS;CACR,QAAQ;CACR,cAAc,KAAK,WAAW,EAAE,QAAQ,CAAC,MAAM,OAAO,EAAE;AAC1D,IACA,EAAE,MAAM,kBAAkB,CAC5B,CACF;AAEA,SAAgB,YAAY,EAAE,SAA4B;CACxD,MAAM,SAAS,iBAAiB,UAAU,MAAM,MAAM;CACtD,OACE,oBAAC,QAAD;EACE,cAAY,SAAS,yBAAyB,KAAA;EAC9C,WAAW,GACT,iDACA,UAAU,qBACZ;EAEC,UAAA;CACG,CAAA;AAEV;AAEA,SAAgB,cAAc;CAC5B,MAAM,EAAE,QAAQ,WAAW,gBAAgB;CAC3C,OACE,oBAAC,QAAD;EACE,SAAQ;EACR,MAAK;EACL,cAAY,SAAS,uBAAuB;EAC5C,gBAAc;EACd,WAAU;EACV,SAAS;EAER,UAAA,SAAS,oBAAC,QAAD,CAAS,CAAA,IAAI,oBAAC,KAAD,CAAM,CAAA;CACvB,CAAA;AAEZ"}

package/dist/recipes/parts/email-privacy/index.d.ts

@@ -0,0 +1,2 @@
+import { EmailToggle, MaskedEmail, useEmailPrivacy } from "./email-privacy.js";
+export { EmailToggle, MaskedEmail, useEmailPrivacy };

package/dist/recipes/parts/email-privacy/index.js

@@ -0,0 +1,2 @@
+import { EmailToggle, MaskedEmail, useEmailPrivacy } from "./email-privacy.js";
+export { EmailToggle, MaskedEmail, useEmailPrivacy };

package/dist/recipes/swipe-row/index.d.ts

@@ -0,0 +1,2 @@
+import { SwipeRow } from "./swipe-row.js";
+export { SwipeRow };

package/dist/recipes/swipe-row/index.js

@@ -0,0 +1,2 @@
+import { SwipeRow } from "./swipe-row.js";
+export { SwipeRow };

package/dist/recipes/swipe-row/swipe-row.d.ts

@@ -0,0 +1,16 @@
+import { ReactNode } from "react";
+//#region src/recipes/swipe-row/swipe-row.d.ts
+/**
+ * A row that one finger swipes left to delete. As it goes, Delete shows
+ * behind it; past DELETE_AT it arms, with a click and a buzz, and letting
+ * go then slides it away and deletes it. Coming back short, or letting go
+ * before, springs it home. A mouse never swipes it: keys delete instead.
+ * `sounds` is whether it clicks as it arms and goes; on unless switched off.
+ */
+export declare function SwipeRow(props: {
+  readonly onDelete: () => void;
+  readonly sounds?: boolean;
+  readonly children: ReactNode;
+}): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=swipe-row.d.ts.map

package/dist/recipes/swipe-row/swipe-row.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"swipe-row.d.ts","names":[],"sources":["../../../src/recipes/swipe-row/swipe-row.tsx"],"mappings":";;;;;;;;;wBAyBgB,SAAS;WACd;WACA;WACA,UAAU;oBACpB,IAAA"}

package/dist/recipes/swipe-row/swipe-row.js

@@ -0,0 +1,96 @@
+import { GestureZone } from "../../input/gesture/zones/zone/zone.js";
+import { useSwipe } from "../../input/gesture/recognizers/swipe/use-swipe.js";
+import { lucide_exports } from "../../components/lib/lucide.js";
+import { cn } from "../../components/lib/utils.js";
+import { play } from "../../feedback/sound.js";
+import { useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { animate, motion, useMotionValue, useMotionValueEvent, useTransform } from "motion/react";
+//#region src/recipes/swipe-row/swipe-row.tsx
+const DELETE_AT = 112;
+const SPRING = {
+	type: "spring",
+	duration: .35,
+	bounce: .15
+};
+/**
+* A row that one finger swipes left to delete. As it goes, Delete shows
+* behind it; past DELETE_AT it arms, with a click and a buzz, and letting
+* go then slides it away and deletes it. Coming back short, or letting go
+* before, springs it home. A mouse never swipes it: keys delete instead.
+* `sounds` is whether it clicks as it arms and goes; on unless switched off.
+*/
+function SwipeRow(props) {
+	return /* @__PURE__ */ jsx(GestureZone, {
+		className: "relative overflow-hidden rounded-lg",
+		children: /* @__PURE__ */ jsx(Swiped, { ...props })
+	});
+}
+function Swiped(props) {
+	const sounds = props.sounds ?? true;
+	const row = useRef(null);
+	const x = useMotionValue(0);
+	const [armed, setArmed] = useState(false);
+	const shown = useTransform(x, [0, -24], [0, 1]);
+	const latest = useRef({
+		props,
+		sounds
+	});
+	latest.current = {
+		props,
+		sounds
+	};
+	const home = () => void animate(x, 0, SPRING);
+	const swipe = useSwipe({
+		direction: "left",
+		commit: { distance: DELETE_AT },
+		onCommit: () => {
+			const width = row.current?.offsetWidth ?? 400;
+			if (latest.current.sounds) play("success");
+			animate(x, -width, {
+				duration: .18,
+				ease: [
+					.4,
+					0,
+					1,
+					1
+				]
+			}).then(() => latest.current.props.onDelete());
+		},
+		onCancel: home
+	});
+	useMotionValueEvent(swipe.offset, "change", (offset) => x.set(-offset));
+	useMotionValueEvent(swipe.willCommit, "change", (will) => {
+		setArmed(will);
+		if (!will) return;
+		if (latest.current.sounds) play("arm");
+		navigator.vibrate?.(8);
+	});
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(motion.div, {
+		"aria-hidden": "true",
+		style: { opacity: shown },
+		className: cn("absolute inset-0 flex items-center justify-end gap-2 rounded-lg pr-5 text-sm font-medium text-destructive transition-colors duration-150", armed ? "bg-destructive/20" : "bg-destructive/10"),
+		children: /* @__PURE__ */ jsxs(motion.span, {
+			animate: { scale: armed ? 1.15 : 1 },
+			transition: {
+				type: "spring",
+				duration: .3,
+				bounce: .45
+			},
+			className: "flex items-center gap-1.5",
+			children: [/* @__PURE__ */ jsx(lucide_exports.Trash2, {
+				className: "size-4",
+				"aria-hidden": "true"
+			}), " Delete"]
+		})
+	}), /* @__PURE__ */ jsx(motion.div, {
+		ref: row,
+		style: { x },
+		className: "relative bg-background",
+		children: props.children
+	})] });
+}
+//#endregion
+export { SwipeRow };
+
+//# sourceMappingURL=swipe-row.js.map

package/dist/recipes/swipe-row/swipe-row.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"swipe-row.js","names":["Trash2"],"sources":["../../../src/recipes/swipe-row/swipe-row.tsx"],"sourcesContent":["import { Trash2 } from '#lib/lucide';\nimport { cn } from '#lib/utils';\nimport { GestureZone, useSwipe } from '../../input/index.ts';\nimport {\n  animate,\n  motion,\n  useMotionValue,\n  useMotionValueEvent,\n  useTransform,\n} from 'motion/react';\nimport { type ReactNode, useRef, useState } from 'react';\nimport { play } from '../../feedback/index.ts';\n\n// How far, in px, the row goes left before letting go deletes it.\nconst DELETE_AT = 112;\n\nconst SPRING = { type: 'spring', duration: 0.35, bounce: 0.15 } as const;\n\n/**\n * A row that one finger swipes left to delete. As it goes, Delete shows\n * behind it; past DELETE_AT it arms, with a click and a buzz, and letting\n * go then slides it away and deletes it. Coming back short, or letting go\n * before, springs it home. A mouse never swipes it: keys delete instead.\n * `sounds` is whether it clicks as it arms and goes; on unless switched off.\n */\nexport function SwipeRow(props: {\n  readonly onDelete: () => void;\n  readonly sounds?: boolean;\n  readonly children: ReactNode;\n}) {\n  // The row is a Gesture Zone of its own, so its Swipe hears only it.\n  return (\n    <GestureZone className=\"relative overflow-hidden rounded-lg\">\n      <Swiped {...props} />\n    </GestureZone>\n  );\n}\n\nfunction Swiped(props: {\n  readonly onDelete: () => void;\n  readonly sounds?: boolean;\n  readonly children: ReactNode;\n}) {\n  const sounds = props.sounds ?? true;\n  const row = useRef<HTMLDivElement>(null);\n  const x = useMotionValue(0);\n  const [armed, setArmed] = useState(false);\n  const shown = useTransform(x, [0, -24], [0, 1]);\n  const latest = useRef({ props, sounds });\n  latest.current = { props, sounds };\n\n  const home = () => void animate(x, 0, SPRING);\n  const swipe = useSwipe({\n    direction: 'left',\n    commit: { distance: DELETE_AT },\n    onCommit: () => {\n      const width = row.current?.offsetWidth ?? 400;\n      if (latest.current.sounds) play('success');\n      void animate(x, -width, { duration: 0.18, ease: [0.4, 0, 1, 1] }).then(\n        () => latest.current.props.onDelete(),\n      );\n    },\n    onCancel: home,\n  });\n\n  useMotionValueEvent(swipe.offset, 'change', (offset) => x.set(-offset));\n  useMotionValueEvent(swipe.willCommit, 'change', (will) => {\n    setArmed(will);\n    if (!will) return;\n    if (latest.current.sounds) play('arm');\n    navigator.vibrate?.(8);\n  });\n\n  return (\n    <>\n      <motion.div\n        aria-hidden=\"true\"\n        style={{ opacity: shown }}\n        className={cn(\n          'absolute inset-0 flex items-center justify-end gap-2 rounded-lg pr-5 text-sm font-medium text-destructive transition-colors duration-150',\n          armed ? 'bg-destructive/20' : 'bg-destructive/10',\n        )}\n      >\n        <motion.span\n          animate={{ scale: armed ? 1.15 : 1 }}\n          transition={{ type: 'spring', duration: 0.3, bounce: 0.45 }}\n          className=\"flex items-center gap-1.5\"\n        >\n          <Trash2 className=\"size-4\" aria-hidden=\"true\" /> Delete\n        </motion.span>\n      </motion.div>\n      <motion.div ref={row} style={{ x }} className=\"relative bg-background\">\n        {props.children}\n      </motion.div>\n    </>\n  );\n}\n"],"mappings":";;;;;;;;;AAcA,MAAM,YAAY;AAElB,MAAM,SAAS;CAAE,MAAM;CAAU,UAAU;CAAM,QAAQ;AAAK;;;;;;;;AAS9D,SAAgB,SAAS,OAItB;CAED,OACE,oBAAC,aAAD;EAAa,WAAU;EACrB,UAAA,oBAAC,QAAD,EAAQ,GAAI,MAAQ,CAAA;CACT,CAAA;AAEjB;AAEA,SAAS,OAAO,OAIb;CACD,MAAM,SAAS,MAAM,UAAU;CAC/B,MAAM,MAAM,OAAuB,IAAI;CACvC,MAAM,IAAI,eAAe,CAAC;CAC1B,MAAM,CAAC,OAAO,YAAY,SAAS,KAAK;CACxC,MAAM,QAAQ,aAAa,GAAG,CAAC,GAAG,GAAG,GAAG,CAAC,GAAG,CAAC,CAAC;CAC9C,MAAM,SAAS,OAAO;EAAE;EAAO;CAAO,CAAC;CACvC,OAAO,UAAU;EAAE;EAAO;CAAO;CAEjC,MAAM,aAAa,KAAK,QAAQ,GAAG,GAAG,MAAM;CAC5C,MAAM,QAAQ,SAAS;EACrB,WAAW;EACX,QAAQ,EAAE,UAAU,UAAU;EAC9B,gBAAgB;GACd,MAAM,QAAQ,IAAI,SAAS,eAAe;GAC1C,IAAI,OAAO,QAAQ,QAAQ,KAAK,SAAS;GACzC,QAAa,GAAG,CAAC,OAAO;IAAE,UAAU;IAAM,MAAM;KAAC;KAAK;KAAG;KAAG;IAAC;GAAE,CAAC,CAAC,CAAC,WAC1D,OAAO,QAAQ,MAAM,SAAS,CACtC;EACF;EACA,UAAU;CACZ,CAAC;CAED,oBAAoB,MAAM,QAAQ,WAAW,WAAW,EAAE,IAAI,CAAC,MAAM,CAAC;CACtE,oBAAoB,MAAM,YAAY,WAAW,SAAS;EACxD,SAAS,IAAI;EACb,IAAI,CAAC,MAAM;EACX,IAAI,OAAO,QAAQ,QAAQ,KAAK,KAAK;EACrC,UAAU,UAAU,CAAC;CACvB,CAAC;CAED,OACE,qBAAA,YAAA,EAAA,UAAA,CACE,oBAAC,OAAO,KAAR;EACE,eAAY;EACZ,OAAO,EAAE,SAAS,MAAM;EACxB,WAAW,GACT,4IACA,QAAQ,sBAAsB,mBAChC;EAEA,UAAA,qBAAC,OAAO,MAAR;GACE,SAAS,EAAE,OAAO,QAAQ,OAAO,EAAE;GACnC,YAAY;IAAE,MAAM;IAAU,UAAU;IAAK,QAAQ;GAAK;GAC1D,WAAU;GAHZ,UAAA,CAKE,oBAACA,eAAAA,QAAD;IAAQ,WAAU;IAAS,eAAY;GAAQ,CAAA,GAAC,SACrC;;CACH,CAAA,GACZ,oBAAC,OAAO,KAAR;EAAY,KAAK;EAAK,OAAO,EAAE,EAAE;EAAG,WAAU;EAC3C,UAAA,MAAM;CACG,CAAA,CACZ,EAAA,CAAA;AAEN"}

package/dist/recipes/thumb-picker/choice.d.ts

@@ -0,0 +1,18 @@
+import { ComponentType } from "react";
+//#region src/recipes/thumb-picker/choice.d.ts
+/**
+ * One thing to choose: its name, its icon, what choosing it does, and the
+ * choices inside it. A choice with none to do is only a way in to its own.
+ * How a swipe walks a tree of them is use-gesture's Tree Walk.
+ */
+export type Choice = {
+  readonly id: string;
+  readonly label: string;
+  readonly icon?: ComponentType<{
+    readonly className?: string;
+  }>;
+  readonly onSelect?: () => void;
+  readonly children?: ReadonlyArray<Choice>;
+};
+//#endregion
+//# sourceMappingURL=choice.d.ts.map

package/dist/recipes/thumb-picker/choice.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"choice.d.ts","names":[],"sources":["../../../src/recipes/thumb-picker/choice.ts"],"mappings":";;;;;;;YAOY;WACD;WACA;WACA,OAAO;aAAyB;;WAChC;WACA,WAAW,cAAc"}

package/dist/recipes/thumb-picker/index.d.ts

@@ -0,0 +1,3 @@
+import { Choice } from "./choice.js";
+import { ThumbPicker } from "./thumb-picker.js";
+export { type Choice, ThumbPicker };

package/dist/recipes/thumb-picker/index.js

@@ -0,0 +1,2 @@
+import { ThumbPicker } from "./thumb-picker.js";
+export { ThumbPicker };

package/dist/recipes/thumb-picker/list.d.ts

@@ -0,0 +1,18 @@
+import { Choice } from "./choice.js";
+import { Transition } from "motion/react";
+//#region src/recipes/thumb-picker/list.d.ts
+/**
+ * Every choice of one list in order, the marked one under a highlight that
+ * springs from row to row, a dot beside where the swipe began, and a
+ * chevron on each choice with choices inside it, nudged toward them when
+ * marked.
+ */
+export declare function List(props: {
+  readonly id: string;
+  readonly choices: ReadonlyArray<Choice>;
+  readonly marked: number;
+  readonly here: number | undefined;
+  readonly move: Transition;
+}): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=list.d.ts.map

package/dist/recipes/thumb-picker/list.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"list.d.ts","names":[],"sources":["../../../src/recipes/thumb-picker/list.tsx"],"mappings":";;;;;;;;;wBAYgB,KAAK;WACV;WACA,SAAS,cAAc;WACvB;WACA;WACA,MAAM;oBAChB,IAAA"}

package/dist/recipes/thumb-picker/list.js

@@ -0,0 +1,48 @@
+import { lucide_exports } from "../../components/lib/lucide.js";
+import { cn } from "../../components/lib/utils.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { motion } from "motion/react";
+import { TreeWalk } from "@kestack/use-gesture";
+//#region src/recipes/thumb-picker/list.tsx
+/**
+* Every choice of one list in order, the marked one under a highlight that
+* springs from row to row, a dot beside where the swipe began, and a
+* chevron on each choice with choices inside it, nudged toward them when
+* marked.
+*/
+function List(props) {
+	return /* @__PURE__ */ jsx("ul", {
+		className: "grid min-w-44 p-1",
+		children: props.choices.map((choice, index) => {
+			const marked = index === props.marked;
+			return /* @__PURE__ */ jsxs("li", {
+				"aria-current": marked || void 0,
+				className: "relative flex items-center gap-2.5 px-2.5 py-1.5",
+				children: [
+					marked && /* @__PURE__ */ jsx(motion.span, {
+						layoutId: `thumb-picker-mark-${props.id}`,
+						transition: props.move,
+						className: "absolute inset-0 rounded-[10px] bg-accent"
+					}),
+					choice.icon && /* @__PURE__ */ jsx(choice.icon, { className: cn("relative size-4", !marked && "text-muted-foreground") }),
+					/* @__PURE__ */ jsx("span", {
+						className: cn("relative flex-1 truncate", marked && "font-medium"),
+						children: choice.label
+					}),
+					index === props.here && /* @__PURE__ */ jsx("span", {
+						"aria-label": "Where you are",
+						className: "relative size-1.5 rounded-full bg-muted-foreground"
+					}),
+					TreeWalk.opens(choice) && /* @__PURE__ */ jsx(lucide_exports.ChevronRight, {
+						"aria-label": "Has more inside",
+						className: cn("relative -mr-1 size-3.5 text-muted-foreground transition-transform duration-150", marked && "translate-x-0.5 text-foreground")
+					})
+				]
+			}, choice.id);
+		})
+	});
+}
+//#endregion
+export { List };
+
+//# sourceMappingURL=list.js.map

package/dist/recipes/thumb-picker/list.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"list.js","names":["ChevronRight"],"sources":["../../../src/recipes/thumb-picker/list.tsx"],"sourcesContent":["import { ChevronRight } from '#lib/lucide';\nimport { cn } from '#lib/utils';\nimport { TreeWalk } from '@kestack/use-gesture';\nimport { motion, type Transition } from 'motion/react';\nimport type { Choice } from './choice.ts';\n\n/**\n * Every choice of one list in order, the marked one under a highlight that\n * springs from row to row, a dot beside where the swipe began, and a\n * chevron on each choice with choices inside it, nudged toward them when\n * marked.\n */\nexport function List(props: {\n  readonly id: string;\n  readonly choices: ReadonlyArray<Choice>;\n  readonly marked: number;\n  readonly here: number | undefined;\n  readonly move: Transition;\n}) {\n  return (\n    <ul className=\"grid min-w-44 p-1\">\n      {props.choices.map((choice, index) => {\n        const marked = index === props.marked;\n        return (\n          <li\n            key={choice.id}\n            aria-current={marked || undefined}\n            className=\"relative flex items-center gap-2.5 px-2.5 py-1.5\"\n          >\n            {marked && (\n              <motion.span\n                layoutId={`thumb-picker-mark-${props.id}`}\n                transition={props.move}\n                className=\"absolute inset-0 rounded-[10px] bg-accent\"\n              />\n            )}\n            {choice.icon && (\n              <choice.icon\n                className={cn(\n                  'relative size-4',\n                  !marked && 'text-muted-foreground',\n                )}\n              />\n            )}\n            <span\n              className={cn(\n                'relative flex-1 truncate',\n                marked && 'font-medium',\n              )}\n            >\n              {choice.label}\n            </span>\n            {index === props.here && (\n              <span\n                aria-label=\"Where you are\"\n                className=\"relative size-1.5 rounded-full bg-muted-foreground\"\n              />\n            )}\n            {TreeWalk.opens(choice) && (\n              <ChevronRight\n                aria-label=\"Has more inside\"\n                className={cn(\n                  'relative -mr-1 size-3.5 text-muted-foreground transition-transform duration-150',\n                  marked && 'translate-x-0.5 text-foreground',\n                )}\n              />\n            )}\n          </li>\n        );\n      })}\n    </ul>\n  );\n}\n"],"mappings":";;;;;;;;;;;;AAYA,SAAgB,KAAK,OAMlB;CACD,OACE,oBAAC,MAAD;EAAI,WAAU;EACX,UAAA,MAAM,QAAQ,KAAK,QAAQ,UAAU;GACpC,MAAM,SAAS,UAAU,MAAM;GAC/B,OACE,qBAAC,MAAD;IAEE,gBAAc,UAAU,KAAA;IACxB,WAAU;IAHZ,UAAA;KAKG,UACC,oBAAC,OAAO,MAAR;MACE,UAAU,qBAAqB,MAAM;MACrC,YAAY,MAAM;MAClB,WAAU;KACX,CAAA;KAEF,OAAO,QACN,oBAAC,OAAO,MAAR,EACE,WAAW,GACT,mBACA,CAAC,UAAU,uBACb,EACD,CAAA;KAEH,oBAAC,QAAD;MACE,WAAW,GACT,4BACA,UAAU,aACZ;MAEC,UAAA,OAAO;KACJ,CAAA;KACL,UAAU,MAAM,QACf,oBAAC,QAAD;MACE,cAAW;MACX,WAAU;KACX,CAAA;KAEF,SAAS,MAAM,MAAM,KACpB,oBAACA,eAAAA,cAAD;MACE,cAAW;MACX,WAAW,GACT,mFACA,UAAU,iCACZ;KACD,CAAA;IAED;GA1CG,GAAA,OAAO,EA0CV;EAER,CAAC;CACC,CAAA;AAER"}

package/dist/recipes/thumb-picker/lock.d.ts

@@ -0,0 +1,18 @@
+import { TreeWalk } from "@kestack/use-gesture";
+//#region src/recipes/thumb-picker/lock.d.ts
+/**
+ * The Thumb Lock of the nearest Gesture Zone: the left thumb resting still
+ * while another finger moves. It reports the Lock as it holds, the other
+ * finger as it moves, from where it landed, and the end: lifted, when the
+ * finger lifts first, or called off, when the thumb does. The thumb may
+ * stay for another swipe. A swipe of one finger is left to
+ * the zones and the browser, so the page still scrolls.
+ */
+export declare function useThumbLock(props: {
+  readonly enabled: boolean;
+  readonly onLock: () => void;
+  readonly onMove: (finger: TreeWalk.Point) => void;
+  readonly onEnd: (lifted: boolean) => void;
+}): void;
+//#endregion
+//# sourceMappingURL=lock.d.ts.map

package/dist/recipes/thumb-picker/lock.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"lock.d.ts","names":[],"sources":["../../../src/recipes/thumb-picker/lock.ts"],"mappings":";;;;;;;;;;wBAiBgB,aAAa;WAClB;WACA;WACA,SAAS,QAAQ,SAAS;WAC1B,QAAQ"}

package/dist/recipes/thumb-picker/lock.js

@@ -0,0 +1,71 @@
+import { useGesture } from "../../input/gesture/zones/zone/zone.js";
+import { useRef } from "react";
+//#region src/recipes/thumb-picker/lock.ts
+const THUMB_PART = .5;
+const STILL = 14;
+/**
+* The Thumb Lock of the nearest Gesture Zone: the left thumb resting still
+* while another finger moves. It reports the Lock as it holds, the other
+* finger as it moves, from where it landed, and the end: lifted, when the
+* finger lifts first, or called off, when the thumb does. The thumb may
+* stay for another swipe. A swipe of one finger is left to
+* the zones and the browser, so the page still scrolls.
+*/
+function useThumbLock(props) {
+	const thumb = useRef(void 0);
+	const mover = useRef(void 0);
+	const stop = useRef([]);
+	const directions = useRef([]);
+	const latest = useRef(props);
+	latest.current = props;
+	const release = (lifted) => {
+		if (mover.current === void 0) return;
+		for (const off of stop.current) off();
+		stop.current = [];
+		mover.current = void 0;
+		directions.current = [];
+		latest.current.onEnd(lifted);
+	};
+	const follow = (finger) => {
+		const moved = () => latest.current.onMove({
+			x: finger.dx.get(),
+			y: finger.dy.get()
+		});
+		stop.current.push(finger.dx.on("change", moved), finger.dy.on("change", moved));
+	};
+	useGesture({
+		enabled: props.enabled,
+		get directions() {
+			return directions.current;
+		},
+		onStart: (pointers) => {
+			const [first] = pointers.values();
+			thumb.current = first !== void 0 && first.start.x <= window.innerWidth * THUMB_PART ? first : void 0;
+		},
+		onPointer: (pointer) => {
+			const held = thumb.current;
+			if (pointer.end !== void 0) {
+				if (pointer.id === mover.current?.id) release(true);
+				else if (pointer.id === held?.id) {
+					thumb.current = void 0;
+					release(false);
+				}
+				return;
+			}
+			if (held === void 0 || pointer.id === held.id || mover.current) return;
+			if (Math.hypot(held.dx.get(), held.dy.get()) > STILL) return;
+			mover.current = pointer;
+			directions.current = "all";
+			follow(pointer);
+			latest.current.onLock();
+		},
+		onEnd: () => {
+			thumb.current = void 0;
+			release(false);
+		}
+	});
+}
+//#endregion
+export { useThumbLock };
+
+//# sourceMappingURL=lock.js.map

package/dist/recipes/thumb-picker/lock.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"lock.js","names":[],"sources":["../../../src/recipes/thumb-picker/lock.ts"],"sourcesContent":["import { type Pointer, useGesture } from '../../input/index.ts';\nimport { useRef } from 'react';\nimport type { TreeWalk } from '@kestack/use-gesture';\n\n// The thumb lands on this part of the screen's width, from the left.\nconst THUMB_PART = 0.5;\n// How far, in px, the thumb may drift and still be still.\nconst STILL = 14;\n\n/**\n * The Thumb Lock of the nearest Gesture Zone: the left thumb resting still\n * while another finger moves. It reports the Lock as it holds, the other\n * finger as it moves, from where it landed, and the end: lifted, when the\n * finger lifts first, or called off, when the thumb does. The thumb may\n * stay for another swipe. A swipe of one finger is left to\n * the zones and the browser, so the page still scrolls.\n */\nexport function useThumbLock(props: {\n  readonly enabled: boolean;\n  readonly onLock: () => void;\n  readonly onMove: (finger: TreeWalk.Point) => void;\n  readonly onEnd: (lifted: boolean) => void;\n}) {\n  const thumb = useRef<Pointer>(undefined);\n  const mover = useRef<Pointer>(undefined);\n  const stop = useRef<Array<() => void>>([]);\n  // Two fingers own the touch at its first movement; one is left alone.\n  const directions = useRef<'all' | []>([]);\n  const latest = useRef(props);\n  latest.current = props;\n\n  const release = (lifted: boolean) => {\n    if (mover.current === undefined) return;\n    for (const off of stop.current) off();\n    stop.current = [];\n    mover.current = undefined;\n    directions.current = [];\n    latest.current.onEnd(lifted);\n  };\n\n  const follow = (finger: Pointer) => {\n    const moved = () =>\n      latest.current.onMove({ x: finger.dx.get(), y: finger.dy.get() });\n    stop.current.push(\n      finger.dx.on('change', moved),\n      finger.dy.on('change', moved),\n    );\n  };\n\n  useGesture({\n    enabled: props.enabled,\n    get directions() {\n      return directions.current;\n    },\n    onStart: (pointers) => {\n      const [first] = pointers.values();\n      thumb.current =\n        first !== undefined && first.start.x <= window.innerWidth * THUMB_PART\n          ? first\n          : undefined;\n    },\n    onPointer: (pointer) => {\n      const held = thumb.current;\n      if (pointer.end !== undefined) {\n        if (pointer.id === mover.current?.id) release(true);\n        // The thumb lifting first calls the swipe off.\n        else if (pointer.id === held?.id) {\n          thumb.current = undefined;\n          release(false);\n        }\n        return;\n      }\n      if (held === undefined || pointer.id === held.id || mover.current) return;\n      // The thumb is still: the Lock holds from this finger's landing.\n      if (Math.hypot(held.dx.get(), held.dy.get()) > STILL) return;\n      mover.current = pointer;\n      directions.current = 'all';\n      follow(pointer);\n      latest.current.onLock();\n    },\n    onEnd: () => {\n      thumb.current = undefined;\n      release(false);\n    },\n  });\n}\n"],"mappings":";;;AAKA,MAAM,aAAa;AAEnB,MAAM,QAAQ;;;;;;;;;AAUd,SAAgB,aAAa,OAK1B;CACD,MAAM,QAAQ,OAAgB,KAAA,CAAS;CACvC,MAAM,QAAQ,OAAgB,KAAA,CAAS;CACvC,MAAM,OAAO,OAA0B,CAAC,CAAC;CAEzC,MAAM,aAAa,OAAmB,CAAC,CAAC;CACxC,MAAM,SAAS,OAAO,KAAK;CAC3B,OAAO,UAAU;CAEjB,MAAM,WAAW,WAAoB;EACnC,IAAI,MAAM,YAAY,KAAA,GAAW;EACjC,KAAK,MAAM,OAAO,KAAK,SAAS,IAAI;EACpC,KAAK,UAAU,CAAC;EAChB,MAAM,UAAU,KAAA;EAChB,WAAW,UAAU,CAAC;EACtB,OAAO,QAAQ,MAAM,MAAM;CAC7B;CAEA,MAAM,UAAU,WAAoB;EAClC,MAAM,cACJ,OAAO,QAAQ,OAAO;GAAE,GAAG,OAAO,GAAG,IAAI;GAAG,GAAG,OAAO,GAAG,IAAI;EAAE,CAAC;EAClE,KAAK,QAAQ,KACX,OAAO,GAAG,GAAG,UAAU,KAAK,GAC5B,OAAO,GAAG,GAAG,UAAU,KAAK,CAC9B;CACF;CAEA,WAAW;EACT,SAAS,MAAM;EACf,IAAI,aAAa;GACf,OAAO,WAAW;EACpB;EACA,UAAU,aAAa;GACrB,MAAM,CAAC,SAAS,SAAS,OAAO;GAChC,MAAM,UACJ,UAAU,KAAA,KAAa,MAAM,MAAM,KAAK,OAAO,aAAa,aACxD,QACA,KAAA;EACR;EACA,YAAY,YAAY;GACtB,MAAM,OAAO,MAAM;GACnB,IAAI,QAAQ,QAAQ,KAAA,GAAW;IAC7B,IAAI,QAAQ,OAAO,MAAM,SAAS,IAAI,QAAQ,IAAI;SAE7C,IAAI,QAAQ,OAAO,MAAM,IAAI;KAChC,MAAM,UAAU,KAAA;KAChB,QAAQ,KAAK;IACf;IACA;GACF;GACA,IAAI,SAAS,KAAA,KAAa,QAAQ,OAAO,KAAK,MAAM,MAAM,SAAS;GAEnE,IAAI,KAAK,MAAM,KAAK,GAAG,IAAI,GAAG,KAAK,GAAG,IAAI,CAAC,IAAI,OAAO;GACtD,MAAM,UAAU;GAChB,WAAW,UAAU;GACrB,OAAO,OAAO;GACd,OAAO,QAAQ,OAAO;EACxB;EACA,aAAa;GACX,MAAM,UAAU,KAAA;GAChB,QAAQ,KAAK;EACf;CACF,CAAC;AACH"}

package/dist/recipes/thumb-picker/menu.d.ts

@@ -0,0 +1,19 @@
+import { Choice } from "./choice.js";
+import { TreeWalk } from "@kestack/use-gesture";
+//#region src/recipes/thumb-picker/menu.d.ts
+type Column = TreeWalk.Column<Choice>;
+/**
+ * Where letting go will take you, at the top centre of the screen and
+ * never under the fingers, over everything else dimmed and blurred: the
+ * open list in the middle, and each list it was opened from drawn back to
+ * the top left, smaller and fainter. It zooms in as it shows; an opened
+ * list slides in from the right and slides back out as the swipe goes
+ * back. Each time `shakes` counts up, the menu shakes once. None of it
+ * moves for those who ask for less motion.
+ */
+export declare function Menu(props: {
+  readonly columns: ReadonlyArray<Column> | undefined;
+  readonly shakes: number;
+}): import("react").ReactPortal | null;
+//#endregion
+//# sourceMappingURL=menu.d.ts.map

package/dist/recipes/thumb-picker/menu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu.d.ts","names":[],"sources":["../../../src/recipes/thumb-picker/menu.tsx"],"mappings":";;;KAiBK,SAAS,SAAS,OAAO;;;;;;;;;;wBAWd,KAAK;WACV,SAAS,cAAc;WACvB;oBACV"}