rei-kit 0.14.1 → 0.15.0

package/README.md

@@ -44,7 +44,14 @@ the app, and not a matter of taste.
 
 ## Status
 
-**v0.4.4 — three consumers.**
+**v0.15.0 — three consumers.**
+
+|              |                                                                                                                                                                                                                                                                                                                                                                                                      |
+| ------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Components   | 31 (`AuthForm`, `BaseButton`, `BaseCard`, `BaseInput`, `BaseSelect`, `BaseTextarea`, `BaseCheckbox`, `BaseRadioGroup`, `BaseAlert`, `BaseBadge`, `BaseSheet`, `ProgressBar`, `PriceCard`, `ToastHost`, `TabBar`, `GoogleButton`, `LocaleLinks`, `LocaleSheet`, `AuthShell`, `TourShell`, `InstallPrompt`, `UpdatePrompt`, `InstallSettings`, `SkeletonList`, `PageContainer`, `ErrorBoundary`, etc.) |
+| Composables  | 14 (`useToast`, `useTheme`, `useToday`, `useMediaQuery`, `useInstall`, `watchInstallability`, `createTabTransition`, `useThemeSync`, `useVisualViewport`, etc.)                                                                                                                                                                                                                                      |
+| Utilities    | 22 (`applyTheme`, `formatDate`, `fieldErrors`, `toAuthMessageKey`, `Supabase error mapper`, i18n runtime, etc.)                                                                                                                                                                                                                                                                                      |
+| Entry Points | `rei-kit`, `rei-kit/app`, `rei-kit/pwa`, `rei-kit/shell/mobile.css`, `rei-kit/shell/web.css`                                                                                                                                                                                                                                                                                                         |
 
 |             |                                                                                                                                                        |
 | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |

package/dist/GoogleButton-BQSsm0hp.js

@@ -0,0 +1,507 @@
+import { n as _plugin_vue_export_helper_default, r as BaseButton_default } from "./SettingsRow-MnVleeTR.js";
+import { Teleport, Transition, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createStaticVNode, createTextVNode, createVNode, defineComponent, mergeModels, mergeProps, nextTick, normalizeClass, normalizeStyle, onScopeDispose, onUnmounted, openBlock, readonly, ref, renderSlot, toDisplayString, unref, useId, useModel, vModelCheckbox, vModelDynamic, watch, withCtx, withDirectives } from "vue";
+import { X } from "lucide-vue-next";
+//#region src/composables/use-theme.ts
+/**
+* Namespaced by the app, not by this package.
+*
+* Two rei-kit apps served from the same origin would otherwise share one theme
+* setting — and during development on localhost, they will be.
+*/
+var storageKey = "rei-theme";
+function isThemePreference(value) {
+	return value === "system" || value === "light" || value === "dark";
+}
+/** Reads the stored preference, falling back to `system`. */
+function readStoredTheme() {
+	try {
+		const stored = localStorage.getItem(storageKey);
+		return isThemePreference(stored) ? stored : "system";
+	} catch {
+		return "system";
+	}
+}
+function storeTheme(preference) {
+	try {
+		localStorage.setItem(storageKey, preference);
+	} catch {}
+}
+/**
+* Does the environment prefer a dark scheme?
+*
+* `matchMedia` is checked for on its own rather than inferred from `document`.
+* Having one does not imply having the other: jsdom supplies a document and no
+* `matchMedia`, so a consumer's component test that so much as mounts something
+* calling `useTheme` threw — and some embedded webviews are the same. Where
+* there is nothing to ask, the answer is no rather than an exception.
+*/
+function prefersDarkScheme() {
+	return typeof window !== "undefined" && typeof window.matchMedia === "function" ? window.matchMedia("(prefers-color-scheme: dark)").matches : false;
+}
+/**
+* Adds or removes `.dark` on `<html>`, resolving `system` against the OS.
+*
+* A no-op without a document. There is no OS preference to read on a server and
+* no `<html>` to write to, so a prerender leaves the class off and the app
+* decides the theme before hydration — see the note in the README.
+*/
+function applyTheme(preference) {
+	if (typeof document === "undefined") return;
+	const isDark = preference === "dark" || preference === "system" && prefersDarkScheme();
+	document.documentElement.classList.toggle("dark", isDark);
+}
+/**
+* The shared preference, created on first use rather than at import.
+*
+* Lazy on purpose: reading storage at import time would lock in the default key
+* before an app had a chance to set its own, leaving the controller reading one
+* key and writing another.
+*/
+var preference = null;
+function controller() {
+	if (preference) return preference;
+	preference = ref(readStoredTheme());
+	watch(preference, (next) => {
+		storeTheme(next);
+		applyTheme(next);
+	}, { immediate: true });
+	if (typeof window !== "undefined" && typeof window.matchMedia === "function") window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", () => {
+		if (preference?.value === "system") applyTheme("system");
+	});
+	return preference;
+}
+/**
+* Sets where the preference is stored.
+*
+* Safe in either order: called before the first `useTheme()` it simply changes
+* the key, and called after it re-reads under the new one, so the controller
+* never reads from one key while writing to another.
+*
+* @example
+* ```ts
+* setThemeStorageKey('hibi-theme')   // once, at startup
+* ```
+*/
+function setThemeStorageKey(key) {
+	storageKey = key;
+	if (preference) preference.value = readStoredTheme();
+}
+/** @returns The shared preference ref; assigning to it stores and applies it. */
+function useTheme() {
+	return controller();
+}
+//#endregion
+//#region src/composables/use-visual-viewport.ts
+/**
+* Tracks the visual viewport.
+*
+* Chrome and Android browsers honour `interactive-widget=resizes-content`, so
+* the layout viewport already shrinks for the keyboard there. Safari on iOS
+* does not implement it: it shrinks only the *visual* viewport, leaving a sheet
+* sized in `dvh` sitting partly underneath the keyboard.
+*
+* `null` means the API is unavailable, which callers should read as "trust the
+* layout viewport" rather than as zero. A server has no viewport at all, so it
+* gets that same `null` — this runs during `setup`, and a component using it
+* has to survive being rendered there.
+*
+* @example
+* ```ts
+* const viewport = useVisualViewport()
+* // :style="viewport ? { height: `${viewport.height}px` } : undefined"
+* ```
+*/
+function useVisualViewport() {
+	const rect = ref(null);
+	const viewport = typeof window === "undefined" ? void 0 : window.visualViewport;
+	if (!viewport) return readonly(rect);
+	function read() {
+		if (!viewport) return;
+		rect.value = {
+			height: viewport.height,
+			offsetTop: viewport.offsetTop
+		};
+	}
+	read();
+	viewport.addEventListener("resize", read);
+	viewport.addEventListener("scroll", read);
+	onScopeDispose(() => {
+		viewport.removeEventListener("resize", read);
+		viewport.removeEventListener("scroll", read);
+	});
+	return readonly(rect);
+}
+//#endregion
+//#region src/components/BaseAlert.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1$5 = ["role", "aria-live"];
+var _hoisted_2$2 = { class: "min-w-0 flex-1" };
+var _hoisted_3$2 = {
+	key: 0,
+	class: "text-ink font-semibold"
+};
+//#endregion
+//#region src/components/BaseAlert.vue
+var BaseAlert_default = /* @__PURE__ */ defineComponent({
+	__name: "BaseAlert",
+	props: {
+		tone: { default: "info" },
+		assertive: {
+			type: Boolean,
+			default: false
+		}
+	},
+	setup(__props) {
+		const TONES = {
+			info: "border-hair bg-muted/40 text-ink",
+			success: "border-positive/35 bg-positive/8 text-ink",
+			warning: "border-warning/40 bg-warning/8 text-ink",
+			danger: "border-negative/35 bg-negative/8 text-ink"
+		};
+		const MARKS = {
+			info: "bg-ink-soft/15 text-ink-soft",
+			success: "bg-positive/15 text-positive",
+			warning: "bg-warning/15 text-warning",
+			danger: "bg-negative/15 text-negative"
+		};
+		const skin = computed(() => TONES[__props.tone]);
+		const mark = computed(() => MARKS[__props.tone]);
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				class: normalizeClass(["rounded-card flex items-start gap-3 border px-4 py-3.5 text-sm leading-relaxed", skin.value]),
+				role: __props.assertive ? "alert" : "status",
+				"aria-live": __props.assertive ? "assertive" : "polite"
+			}, [
+				_ctx.$slots.mark ? (openBlock(), createElementBlock("span", {
+					key: 0,
+					class: normalizeClass(["mt-px grid size-6 shrink-0 place-items-center rounded-full text-xs font-semibold", mark.value]),
+					"aria-hidden": "true"
+				}, [renderSlot(_ctx.$slots, "mark")], 2)) : createCommentVNode("", true),
+				createElementVNode("div", _hoisted_2$2, [_ctx.$slots.title ? (openBlock(), createElementBlock("p", _hoisted_3$2, [renderSlot(_ctx.$slots, "title")])) : createCommentVNode("", true), createElementVNode("div", { class: normalizeClass(_ctx.$slots.title ? "mt-1" : "") }, [renderSlot(_ctx.$slots, "default")], 2)]),
+				renderSlot(_ctx.$slots, "action")
+			], 10, _hoisted_1$5);
+		};
+	}
+});
+//#endregion
+//#region src/components/FormField.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1$4 = ["for"];
+//#endregion
+//#region src/components/FormField.vue
+var FormField_default = /* @__PURE__ */ defineComponent({
+	__name: "FormField",
+	props: {
+		label: {},
+		error: { default: "" },
+		hint: { default: "" },
+		size: { default: "md" },
+		labelHidden: {
+			type: Boolean,
+			default: false
+		}
+	},
+	setup(__props) {
+		const id = useId();
+		const errorId = `${id}-error`;
+		const hintId = `${id}-hint`;
+		const describedBy = computed(() => {
+			if (__props.error) return errorId;
+			if (__props.hint) return hintId;
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", { class: normalizeClass(["flex flex-col", __props.size === "sm" ? "gap-1" : "gap-1.5"]) }, [
+				createElementVNode("label", {
+					for: unref(id),
+					class: normalizeClass(["font-medium", [__props.labelHidden ? "sr-only" : "", __props.size === "sm" ? "text-ink-soft text-xs" : "text-ink text-sm"]])
+				}, toDisplayString(__props.label), 11, _hoisted_1$4),
+				renderSlot(_ctx.$slots, "default", {
+					id: unref(id),
+					describedBy: describedBy.value,
+					invalid: Boolean(__props.error),
+					size: __props.size
+				}),
+				__props.error ? (openBlock(), createElementBlock("p", {
+					key: 0,
+					id: errorId,
+					class: "text-negative text-xs"
+				}, toDisplayString(__props.error), 1)) : __props.hint ? (openBlock(), createElementBlock("p", {
+					key: 1,
+					id: hintId,
+					class: "text-ink-soft text-xs"
+				}, toDisplayString(__props.hint), 1)) : createCommentVNode("", true)
+			], 2);
+		};
+	}
+});
+//#endregion
+//#region src/components/BaseInput.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1$3 = [
+	"id",
+	"type",
+	"aria-invalid",
+	"aria-describedby"
+];
+var CONTROL_CLASS = "h-11 text-base";
+//#endregion
+//#region src/components/BaseInput.vue
+var BaseInput_default = /* @__PURE__ */ defineComponent({
+	inheritAttrs: false,
+	__name: "BaseInput",
+	props: /*@__PURE__*/ mergeModels({
+		label: {},
+		error: { default: "" },
+		hint: { default: "" },
+		labelHidden: {
+			type: Boolean,
+			default: false
+		},
+		type: { default: "text" },
+		size: { default: "md" },
+		variant: { default: "default" }
+	}, {
+		"modelValue": {},
+		"modelModifiers": {}
+	}),
+	emits: ["update:modelValue"],
+	setup(__props) {
+		const model = useModel(__props, "modelValue");
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(FormField_default, {
+				label: __props.label,
+				error: __props.error,
+				hint: __props.hint,
+				"label-hidden": __props.labelHidden,
+				size: __props.size
+			}, {
+				default: withCtx(({ id, describedBy, invalid }) => [withDirectives(createElementVNode("input", mergeProps({
+					id,
+					"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => model.value = $event),
+					type: __props.type,
+					"aria-invalid": invalid,
+					"aria-describedby": describedBy
+				}, _ctx.$attrs, { class: [
+					__props.variant === "unstyled" ? "" : "border-hair bg-surface text-ink rounded-card focus-visible:outline-primary border px-3 focus-visible:outline-2 focus-visible:outline-offset-1",
+					__props.variant === "unstyled" ? "text-base" : CONTROL_CLASS,
+					__props.variant !== "unstyled" && invalid ? "border-negative" : ""
+				] }), null, 16, _hoisted_1$3), [[vModelDynamic, model.value]])]),
+				_: 1
+			}, 8, [
+				"label",
+				"error",
+				"hint",
+				"label-hidden",
+				"size"
+			]);
+		};
+	}
+});
+//#endregion
+//#region src/components/BaseSheet.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1$2 = { class: "shell-frame md:rounded-shell relative flex max-h-full flex-col justify-end overflow-hidden" };
+var _hoisted_2$1 = ["aria-label"];
+var _hoisted_3$1 = { class: "flex shrink-0 items-start gap-3 px-6 pt-4 pb-5" };
+var _hoisted_4 = { class: "min-w-0 flex-1" };
+var _hoisted_5 = { class: "text-ink text-xl leading-tight font-semibold" };
+var _hoisted_6 = {
+	key: 0,
+	class: "text-ink-soft mt-1 text-sm leading-snug"
+};
+var _hoisted_7 = { class: "min-h-0 flex-1 overflow-y-auto px-6 pb-[calc(2rem+env(safe-area-inset-bottom,0px))]" };
+//#endregion
+//#region src/components/BaseSheet.vue
+var BaseSheet_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	__name: "BaseSheet",
+	props: /*@__PURE__*/ mergeModels({
+		title: {},
+		subtitle: { default: "" },
+		closeLabel: { default: "Close" }
+	}, {
+		"modelValue": {
+			type: Boolean,
+			required: true
+		},
+		"modelModifiers": {}
+	}),
+	emits: ["update:modelValue"],
+	setup(__props) {
+		const open = useModel(__props, "modelValue");
+		const viewport = useVisualViewport();
+		/**
+		* Pins the sheet to the area the keyboard has left visible.
+		*
+		* Only needed where the layout viewport does not shrink on its own — iOS. On
+		* Android the numbers already agree, so this is a no-op there rather than a
+		* second, competing adjustment.
+		*/
+		const viewportStyle = computed(() => viewport.value ? {
+			height: `${viewport.value.height}px`,
+			top: `${viewport.value.offsetTop}px`
+		} : void 0);
+		const panel = ref(null);
+		let lastFocused = null;
+		function close() {
+			open.value = false;
+		}
+		function onKeydown(event) {
+			if (event.key === "Escape") close();
+		}
+		watch(open, async (isOpen) => {
+			if (isOpen) {
+				setBackgroundInert(true);
+				lastFocused = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+				window.addEventListener("keydown", onKeydown);
+				await nextTick();
+				panel.value?.focus();
+			} else {
+				window.removeEventListener("keydown", onKeydown);
+				lastFocused?.focus();
+				lastFocused = null;
+				setBackgroundInert(false);
+			}
+		});
+		/**
+		* `inert` takes the whole app out of tab order and pointer events while the
+		* sheet is open — a real focus trap without keydown bookkeeping.
+		*
+		* The sheet itself is teleported to `#sheet-root`, a sibling of `#app`, so it
+		* stays interactive.
+		*/
+		function setBackgroundInert(isInert) {
+			document.getElementById("app")?.toggleAttribute("inert", isInert);
+		}
+		onUnmounted(() => {
+			window.removeEventListener("keydown", onKeydown);
+			setBackgroundInert(false);
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(Teleport, { to: "#sheet-root" }, [createVNode(Transition, { name: "sheet" }, {
+				default: withCtx(() => [open.value ? (openBlock(), createElementBlock("div", {
+					key: 0,
+					class: "fixed inset-x-0 top-0 bottom-0 z-50 flex items-center justify-center",
+					style: normalizeStyle(viewportStyle.value)
+				}, [createElementVNode("div", _hoisted_1$2, [createElementVNode("div", {
+					class: "bg-ink/45 absolute inset-0 backdrop-blur-[2px]",
+					onClick: close
+				}), createElementVNode("section", {
+					ref_key: "panel",
+					ref: panel,
+					role: "dialog",
+					"aria-modal": "true",
+					"aria-label": __props.title,
+					tabindex: "-1",
+					class: "sheet-panel bg-surface relative flex max-h-[94%] min-h-[56dvh] flex-col rounded-t-[28px] shadow-2xl outline-none"
+				}, [
+					_cache[0] || (_cache[0] = createElementVNode("div", {
+						class: "flex shrink-0 justify-center pt-3",
+						"aria-hidden": "true"
+					}, [createElementVNode("span", { class: "bg-hair h-1.5 w-10 rounded-full" })], -1)),
+					createElementVNode("header", _hoisted_3$1, [createElementVNode("div", _hoisted_4, [createElementVNode("h2", _hoisted_5, toDisplayString(__props.title), 1), __props.subtitle ? (openBlock(), createElementBlock("p", _hoisted_6, toDisplayString(__props.subtitle), 1)) : createCommentVNode("", true)]), createVNode(BaseButton_default, {
+						variant: "unstyled",
+						class: "text-ink-soft hover:bg-muted hover:text-ink -mt-1 flex size-10 shrink-0 items-center justify-center rounded-full transition-colors active:scale-90",
+						"aria-label": __props.closeLabel,
+						onClick: close
+					}, {
+						default: withCtx(() => [createVNode(unref(X), { class: "size-5" })]),
+						_: 1
+					}, 8, ["aria-label"])]),
+					createElementVNode("div", _hoisted_7, [renderSlot(_ctx.$slots, "default", {}, void 0, true)])
+				], 8, _hoisted_2$1)])], 4)) : createCommentVNode("", true)]),
+				_: 3
+			})]);
+		};
+	}
+}), [["__scopeId", "data-v-51709579"]]);
+//#endregion
+//#region src/components/BaseCheckbox.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1$1 = { class: "flex flex-col gap-1.5" };
+var _hoisted_2 = ["for"];
+var _hoisted_3 = [
+	"id",
+	"disabled",
+	"aria-invalid",
+	"aria-describedby"
+];
+//#endregion
+//#region src/components/BaseCheckbox.vue
+var BaseCheckbox_default = /* @__PURE__ */ defineComponent({
+	__name: "BaseCheckbox",
+	props: /*@__PURE__*/ mergeModels({
+		label: {},
+		error: { default: "" },
+		hint: { default: "" },
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		size: { default: "md" }
+	}, {
+		"modelValue": {
+			type: Boolean,
+			default: false
+		},
+		"modelModifiers": {}
+	}),
+	emits: ["update:modelValue"],
+	setup(__props) {
+		const model = useModel(__props, "modelValue");
+		const id = useId();
+		const errorId = `${id}-error`;
+		const hintId = `${id}-hint`;
+		const describedBy = computed(() => {
+			if (__props.error) return errorId;
+			if (__props.hint) return hintId;
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", _hoisted_1$1, [createElementVNode("label", {
+				for: unref(id),
+				class: normalizeClass(["flex items-center", [__props.size === "sm" ? "gap-2" : "gap-3", __props.disabled ? "opacity-50" : "cursor-pointer"]])
+			}, [withDirectives(createElementVNode("input", {
+				id: unref(id),
+				"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => model.value = $event),
+				type: "checkbox",
+				disabled: __props.disabled,
+				"aria-invalid": Boolean(__props.error),
+				"aria-describedby": describedBy.value,
+				class: "accent-primary focus-visible:outline-primary size-4 shrink-0 focus-visible:outline-2 focus-visible:outline-offset-2"
+			}, null, 8, _hoisted_3), [[vModelCheckbox, model.value]]), createElementVNode("span", { class: normalizeClass(["text-sm", __props.size === "sm" ? "text-ink-soft" : "text-ink"]) }, toDisplayString(__props.label), 3)], 10, _hoisted_2), __props.error ? (openBlock(), createElementBlock("p", {
+				key: 0,
+				id: errorId,
+				class: "text-negative text-xs"
+			}, toDisplayString(__props.error), 1)) : __props.hint ? (openBlock(), createElementBlock("p", {
+				key: 1,
+				id: hintId,
+				class: "text-ink-soft text-xs"
+			}, toDisplayString(__props.hint), 1)) : createCommentVNode("", true)]);
+		};
+	}
+});
+//#endregion
+//#region src/components/GoogleButton.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["disabled"];
+//#endregion
+//#region src/components/GoogleButton.vue
+var GoogleButton_default = /* @__PURE__ */ defineComponent({
+	__name: "GoogleButton",
+	props: {
+		label: {},
+		disabled: {
+			type: Boolean,
+			default: false
+		}
+	},
+	emits: ["click"],
+	setup(__props, { emit: __emit }) {
+		const emit = __emit;
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("button", {
+				type: "button",
+				disabled: __props.disabled,
+				class: "border-hair bg-surface text-ink rounded-card hover:bg-muted flex h-11 w-full items-center justify-center gap-2 border text-sm font-medium transition-colors active:scale-95 disabled:pointer-events-none disabled:opacity-50",
+				onClick: _cache[0] || (_cache[0] = ($event) => emit("click"))
+			}, [_cache[1] || (_cache[1] = createStaticVNode("<svg class=\"size-4\" viewBox=\"0 0 48 48\" aria-hidden=\"true\"><path fill=\"#EA4335\" d=\"M24 9.5c3.5 0 6.6 1.2 9 3.6l6.7-6.7C35.6 2.7 30.2.5 24 .5 14.6.5 6.5 5.9 2.6 13.7l7.8 6.1C12.3 13.7 17.7 9.5 24 9.5z\"></path><path fill=\"#4285F4\" d=\"M46.5 24.5c0-1.6-.1-3.1-.4-4.5H24v9h12.7c-.6 3-2.3 5.6-4.9 7.3l7.6 5.9c4.4-4.1 7.1-10.2 7.1-17.7z\"></path><path fill=\"#FBBC05\" d=\"M10.4 28.2a14.6 14.6 0 0 1 0-8.4l-7.8-6.1a24 24 0 0 0 0 20.6l7.8-6.1z\"></path><path fill=\"#34A853\" d=\"M24 47.5c6.2 0 11.5-2 15.4-5.6l-7.6-5.9c-2.1 1.4-4.8 2.3-7.8 2.3-6.3 0-11.7-4.2-13.6-10l-7.8 6.1C6.5 42.1 14.6 47.5 24 47.5z\"></path></svg>", 1)), createTextVNode(" " + toDisplayString(__props.label), 1)], 8, _hoisted_1);
+		};
+	}
+});
+//#endregion
+export { FormField_default as a, applyTheme as c, setThemeStorageKey as d, useTheme as f, BaseInput_default as i, isThemePreference as l, BaseCheckbox_default as n, BaseAlert_default as o, BaseSheet_default as r, useVisualViewport as s, GoogleButton_default as t, readStoredTheme as u };
+
+//# sourceMappingURL=GoogleButton-BQSsm0hp.js.map

package/dist/GoogleButton-BQSsm0hp.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GoogleButton-BQSsm0hp.js","names":["$slots","$attrs"],"sources":["../src/composables/use-theme.ts","../src/composables/use-visual-viewport.ts","../src/components/BaseAlert.vue","../src/components/BaseAlert.vue","../src/components/FormField.vue","../src/components/FormField.vue","../src/components/BaseInput.vue","../src/components/BaseInput.vue","../src/components/BaseSheet.vue","../src/components/BaseSheet.vue","../src/components/BaseCheckbox.vue","../src/components/BaseCheckbox.vue","../src/components/GoogleButton.vue","../src/components/GoogleButton.vue"],"sourcesContent":["import { ref, watch } from 'vue'\nimport type { Ref } from 'vue'\n\n/** What the user asked for; `system` follows the OS. */\nexport type ThemePreference = 'system' | 'light' | 'dark'\n\n/**\n * Namespaced by the app, not by this package.\n *\n * Two rei-kit apps served from the same origin would otherwise share one theme\n * setting — and during development on localhost, they will be.\n */\nlet storageKey = 'rei-theme'\n\nexport function isThemePreference(value: unknown): value is ThemePreference {\n  return value === 'system' || value === 'light' || value === 'dark'\n}\n\n/** Reads the stored preference, falling back to `system`. */\nexport function readStoredTheme(): ThemePreference {\n  try {\n    const stored = localStorage.getItem(storageKey)\n\n    return isThemePreference(stored) ? stored : 'system'\n  } catch {\n    return 'system'\n  }\n}\n\nfunction storeTheme(preference: ThemePreference): void {\n  try {\n    localStorage.setItem(storageKey, preference)\n  } catch {\n    // Private mode or blocked storage: the choice just will not persist.\n  }\n}\n\n/**\n * Does the environment prefer a dark scheme?\n *\n * `matchMedia` is checked for on its own rather than inferred from `document`.\n * Having one does not imply having the other: jsdom supplies a document and no\n * `matchMedia`, so a consumer's component test that so much as mounts something\n * calling `useTheme` threw — and some embedded webviews are the same. Where\n * there is nothing to ask, the answer is no rather than an exception.\n */\nfunction prefersDarkScheme(): boolean {\n  return typeof window !== 'undefined' && typeof window.matchMedia === 'function'\n    ? window.matchMedia('(prefers-color-scheme: dark)').matches\n    : false\n}\n\n/**\n * Adds or removes `.dark` on `<html>`, resolving `system` against the OS.\n *\n * A no-op without a document. There is no OS preference to read on a server and\n * no `<html>` to write to, so a prerender leaves the class off and the app\n * decides the theme before hydration — see the note in the README.\n */\nexport function applyTheme(preference: ThemePreference): void {\n  if (typeof document === 'undefined') return\n\n  const isDark = preference === 'dark' || (preference === 'system' && prefersDarkScheme())\n\n  document.documentElement.classList.toggle('dark', isDark)\n}\n\n/**\n * The shared preference, created on first use rather than at import.\n *\n * Lazy on purpose: reading storage at import time would lock in the default key\n * before an app had a chance to set its own, leaving the controller reading one\n * key and writing another.\n */\nlet preference: Ref<ThemePreference> | null = null\n\nfunction controller(): Ref<ThemePreference> {\n  if (preference) return preference\n\n  preference = ref<ThemePreference>(readStoredTheme())\n\n  watch(\n    preference,\n    (next) => {\n      storeTheme(next)\n      applyTheme(next)\n    },\n    { immediate: true },\n  )\n\n  // While on `system`, follow the OS if the user flips it at night. Only where\n  // there is something to listen to; see `prefersDarkScheme`.\n  if (typeof window !== 'undefined' && typeof window.matchMedia === 'function') {\n    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {\n      if (preference?.value === 'system') applyTheme('system')\n    })\n  }\n\n  return preference\n}\n\n/**\n * Sets where the preference is stored.\n *\n * Safe in either order: called before the first `useTheme()` it simply changes\n * the key, and called after it re-reads under the new one, so the controller\n * never reads from one key while writing to another.\n *\n * @example\n * ```ts\n * setThemeStorageKey('hibi-theme')   // once, at startup\n * ```\n */\nexport function setThemeStorageKey(key: string): void {\n  storageKey = key\n  if (preference) preference.value = readStoredTheme()\n}\n\n/** @returns The shared preference ref; assigning to it stores and applies it. */\nexport function useTheme(): Ref<ThemePreference> {\n  return controller()\n}\n","import { onScopeDispose, readonly, ref } from 'vue'\n\n/** The visible area, once the on-screen keyboard has taken its share. */\nexport interface VisualViewportRect {\n  height: number\n  offsetTop: number\n}\n\n/**\n * Tracks the visual viewport.\n *\n * Chrome and Android browsers honour `interactive-widget=resizes-content`, so\n * the layout viewport already shrinks for the keyboard there. Safari on iOS\n * does not implement it: it shrinks only the *visual* viewport, leaving a sheet\n * sized in `dvh` sitting partly underneath the keyboard.\n *\n * `null` means the API is unavailable, which callers should read as \"trust the\n * layout viewport\" rather than as zero. A server has no viewport at all, so it\n * gets that same `null` — this runs during `setup`, and a component using it\n * has to survive being rendered there.\n *\n * @example\n * ```ts\n * const viewport = useVisualViewport()\n * // :style=\"viewport ? { height: `${viewport.height}px` } : undefined\"\n * ```\n */\nexport function useVisualViewport() {\n  const rect = ref<VisualViewportRect | null>(null)\n\n  const viewport = typeof window === 'undefined' ? undefined : window.visualViewport\n  if (!viewport) return readonly(rect)\n\n  function read() {\n    if (!viewport) return\n\n    rect.value = { height: viewport.height, offsetTop: viewport.offsetTop }\n  }\n\n  read()\n\n  // `scroll` matters as much as `resize`: iOS shifts the visual viewport up to\n  // keep the focused field visible, without changing its height.\n  viewport.addEventListener('resize', read)\n  viewport.addEventListener('scroll', read)\n\n  onScopeDispose(() => {\n    viewport.removeEventListener('resize', read)\n    viewport.removeEventListener('scroll', read)\n  })\n\n  return readonly(rect)\n}\n","<script setup lang=\"ts\">\nimport { computed } from 'vue'\n\n/**\n * A message the reader has to take in before carrying on.\n *\n * Roles rather than colours, like everything else here: `info` is neutral,\n * `success` confirms, `warning` is a condition to know about, `danger` is\n * something that went wrong or is about to. A component that took a hex would\n * be a component that ignores the theme, and the theme is the whole reason the\n * kit exists.\n *\n * `assertive` decides how a screen reader treats it: a failed save interrupts,\n * a note about a form field waits its turn. Getting this wrong is invisible on\n * screen and rude in a screen reader, which is why it is a prop and not a\n * guess.\n */\nconst { tone = 'info', assertive = false } = defineProps<{\n  tone?: 'info' | 'success' | 'warning' | 'danger' | undefined\n  /** Announce immediately, interrupting. For failures the reader must act on. */\n  assertive?: boolean | undefined\n}>()\n\nconst TONES = {\n  info: 'border-hair bg-muted/40 text-ink',\n  success: 'border-positive/35 bg-positive/8 text-ink',\n  warning: 'border-warning/40 bg-warning/8 text-ink',\n  danger: 'border-negative/35 bg-negative/8 text-ink',\n} as const\n\nconst MARKS = {\n  info: 'bg-ink-soft/15 text-ink-soft',\n  success: 'bg-positive/15 text-positive',\n  warning: 'bg-warning/15 text-warning',\n  danger: 'bg-negative/15 text-negative',\n} as const\n\nconst skin = computed(() => TONES[tone])\nconst mark = computed(() => MARKS[tone])\n</script>\n\n<template>\n  <div\n    class=\"rounded-card flex items-start gap-3 border px-4 py-3.5 text-sm leading-relaxed\"\n    :class=\"skin\"\n    :role=\"assertive ? 'alert' : 'status'\"\n    :aria-live=\"assertive ? 'assertive' : 'polite'\"\n  >\n    <span\n      v-if=\"$slots.mark\"\n      class=\"mt-px grid size-6 shrink-0 place-items-center rounded-full text-xs font-semibold\"\n      :class=\"mark\"\n      aria-hidden=\"true\"\n    >\n      <slot name=\"mark\" />\n    </span>\n\n    <div class=\"min-w-0 flex-1\">\n      <p v-if=\"$slots.title\" class=\"text-ink font-semibold\">\n        <slot name=\"title\" />\n      </p>\n      <div :class=\"$slots.title ? 'mt-1' : ''\"><slot /></div>\n    </div>\n\n    <slot name=\"action\" />\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport { computed } from 'vue'\n\n/**\n * A message the reader has to take in before carrying on.\n *\n * Roles rather than colours, like everything else here: `info` is neutral,\n * `success` confirms, `warning` is a condition to know about, `danger` is\n * something that went wrong or is about to. A component that took a hex would\n * be a component that ignores the theme, and the theme is the whole reason the\n * kit exists.\n *\n * `assertive` decides how a screen reader treats it: a failed save interrupts,\n * a note about a form field waits its turn. Getting this wrong is invisible on\n * screen and rude in a screen reader, which is why it is a prop and not a\n * guess.\n */\nconst { tone = 'info', assertive = false } = defineProps<{\n  tone?: 'info' | 'success' | 'warning' | 'danger' | undefined\n  /** Announce immediately, interrupting. For failures the reader must act on. */\n  assertive?: boolean | undefined\n}>()\n\nconst TONES = {\n  info: 'border-hair bg-muted/40 text-ink',\n  success: 'border-positive/35 bg-positive/8 text-ink',\n  warning: 'border-warning/40 bg-warning/8 text-ink',\n  danger: 'border-negative/35 bg-negative/8 text-ink',\n} as const\n\nconst MARKS = {\n  info: 'bg-ink-soft/15 text-ink-soft',\n  success: 'bg-positive/15 text-positive',\n  warning: 'bg-warning/15 text-warning',\n  danger: 'bg-negative/15 text-negative',\n} as const\n\nconst skin = computed(() => TONES[tone])\nconst mark = computed(() => MARKS[tone])\n</script>\n\n<template>\n  <div\n    class=\"rounded-card flex items-start gap-3 border px-4 py-3.5 text-sm leading-relaxed\"\n    :class=\"skin\"\n    :role=\"assertive ? 'alert' : 'status'\"\n    :aria-live=\"assertive ? 'assertive' : 'polite'\"\n  >\n    <span\n      v-if=\"$slots.mark\"\n      class=\"mt-px grid size-6 shrink-0 place-items-center rounded-full text-xs font-semibold\"\n      :class=\"mark\"\n      aria-hidden=\"true\"\n    >\n      <slot name=\"mark\" />\n    </span>\n\n    <div class=\"min-w-0 flex-1\">\n      <p v-if=\"$slots.title\" class=\"text-ink font-semibold\">\n        <slot name=\"title\" />\n      </p>\n      <div :class=\"$slots.title ? 'mt-1' : ''\"><slot /></div>\n    </div>\n\n    <slot name=\"action\" />\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport { computed, useId } from 'vue'\n\n/**\n * A label, a hint, an error, and the wiring between them.\n *\n * This was inside `BaseInput`, which is why the kit had one form control\n * instead of five. The hard part of a field is not the `<input>` — it is\n * generating an id, pointing the label at it, deciding whether the description\n * is the hint or the error, and telling assistive tech which one to read. That\n * is identical for a select, a textarea and an input, and every app that\n * needed one of the other two wrote the whole thing again.\n *\n * The control comes in through the slot and is handed what it needs to be\n * described. It is a slot rather than a prop so the field never has to know\n * what it is wrapping.\n *\n * @example\n * ```vue\n * <FormField :label=\"t('profile.name')\" :error=\"errors.name\">\n *   <template #default=\"{ id, describedBy, invalid }\">\n *     <input :id=\"id\" :aria-describedby=\"describedBy\" :aria-invalid=\"invalid\" />\n *   </template>\n * </FormField>\n * ```\n */\nconst {\n  label,\n  error = '',\n  hint = '',\n  labelHidden = false,\n  size = 'md',\n} = defineProps<{\n  label: string\n  error?: string | undefined\n  hint?: string | undefined\n  /**\n   * `sm` for a control that sits inside something else — a toolbar, a filter\n   * row, a settings line — rather than in a form of its own.\n   *\n   * It exists because every hand-written select in all three apps was the\n   * small one, and the kit only had the large one. A part is not reusable if\n   * reaching for it costs a size somebody chose on purpose.\n   */\n  size?: 'sm' | 'md' | undefined\n  /**\n   * Hides the label visually but keeps it for assistive tech. For fields whose\n   * surrounding row already names them — dropping the label entirely would\n   * leave the control with no accessible name at all.\n   */\n  labelHidden?: boolean | undefined\n}>()\n\nconst id = useId()\nconst errorId = `${id}-error`\nconst hintId = `${id}-hint`\n\n/* One description at a time, and the error wins. Announcing the hint as well\n   buries the reason the field was rejected under advice the reader has already\n   had. */\nconst describedBy = computed(() => {\n  if (error) return errorId\n  if (hint) return hintId\n  return undefined\n})\n</script>\n\n<template>\n  <div class=\"flex flex-col\" :class=\"size === 'sm' ? 'gap-1' : 'gap-1.5'\">\n    <label\n      :for=\"id\"\n      class=\"font-medium\"\n      :class=\"[\n        labelHidden ? 'sr-only' : '',\n        size === 'sm' ? 'text-ink-soft text-xs' : 'text-ink text-sm',\n      ]\"\n    >\n      {{ label }}\n    </label>\n\n    <slot :id=\"id\" :described-by=\"describedBy\" :invalid=\"Boolean(error)\" :size=\"size\" />\n\n    <p v-if=\"error\" :id=\"errorId\" class=\"text-negative text-xs\">{{ error }}</p>\n    <p v-else-if=\"hint\" :id=\"hintId\" class=\"text-ink-soft text-xs\">{{ hint }}</p>\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport { computed, useId } from 'vue'\n\n/**\n * A label, a hint, an error, and the wiring between them.\n *\n * This was inside `BaseInput`, which is why the kit had one form control\n * instead of five. The hard part of a field is not the `<input>` — it is\n * generating an id, pointing the label at it, deciding whether the description\n * is the hint or the error, and telling assistive tech which one to read. That\n * is identical for a select, a textarea and an input, and every app that\n * needed one of the other two wrote the whole thing again.\n *\n * The control comes in through the slot and is handed what it needs to be\n * described. It is a slot rather than a prop so the field never has to know\n * what it is wrapping.\n *\n * @example\n * ```vue\n * <FormField :label=\"t('profile.name')\" :error=\"errors.name\">\n *   <template #default=\"{ id, describedBy, invalid }\">\n *     <input :id=\"id\" :aria-describedby=\"describedBy\" :aria-invalid=\"invalid\" />\n *   </template>\n * </FormField>\n * ```\n */\nconst {\n  label,\n  error = '',\n  hint = '',\n  labelHidden = false,\n  size = 'md',\n} = defineProps<{\n  label: string\n  error?: string | undefined\n  hint?: string | undefined\n  /**\n   * `sm` for a control that sits inside something else — a toolbar, a filter\n   * row, a settings line — rather than in a form of its own.\n   *\n   * It exists because every hand-written select in all three apps was the\n   * small one, and the kit only had the large one. A part is not reusable if\n   * reaching for it costs a size somebody chose on purpose.\n   */\n  size?: 'sm' | 'md' | undefined\n  /**\n   * Hides the label visually but keeps it for assistive tech. For fields whose\n   * surrounding row already names them — dropping the label entirely would\n   * leave the control with no accessible name at all.\n   */\n  labelHidden?: boolean | undefined\n}>()\n\nconst id = useId()\nconst errorId = `${id}-error`\nconst hintId = `${id}-hint`\n\n/* One description at a time, and the error wins. Announcing the hint as well\n   buries the reason the field was rejected under advice the reader has already\n   had. */\nconst describedBy = computed(() => {\n  if (error) return errorId\n  if (hint) return hintId\n  return undefined\n})\n</script>\n\n<template>\n  <div class=\"flex flex-col\" :class=\"size === 'sm' ? 'gap-1' : 'gap-1.5'\">\n    <label\n      :for=\"id\"\n      class=\"font-medium\"\n      :class=\"[\n        labelHidden ? 'sr-only' : '',\n        size === 'sm' ? 'text-ink-soft text-xs' : 'text-ink text-sm',\n      ]\"\n    >\n      {{ label }}\n    </label>\n\n    <slot :id=\"id\" :described-by=\"describedBy\" :invalid=\"Boolean(error)\" :size=\"size\" />\n\n    <p v-if=\"error\" :id=\"errorId\" class=\"text-negative text-xs\">{{ error }}</p>\n    <p v-else-if=\"hint\" :id=\"hintId\" class=\"text-ink-soft text-xs\">{{ hint }}</p>\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport FormField from './FormField.vue'\n\ndefineOptions({ inheritAttrs: false })\n\nconst {\n  label,\n  error = '',\n  hint = '',\n  type = 'text',\n  labelHidden = false,\n  size = 'md',\n  variant = 'default',\n} = defineProps<{\n  label: string\n  error?: string | undefined\n  hint?: string | undefined\n  /**\n   * Hides the label visually but keeps it for assistive tech. For fields whose\n   * surrounding row already names them — dropping the label entirely would\n   * leave the input with no accessible name at all.\n   */\n  labelHidden?: boolean | undefined\n  /**\n   * Every type a text field can be, because the ones missing were the ones\n   * apps needed: `date` and `search` were hand-written three times each and\n   * `url` twice, in files that already imported this component.\n   */\n  type?:\n    | 'text'\n    | 'email'\n    | 'password'\n    | 'number'\n    | 'search'\n    | 'tel'\n    | 'url'\n    | 'date'\n    | 'time'\n    | 'datetime-local'\n    | undefined\n  /** `sm` for a field inside a row rather than in a form of its own. */\n  size?: 'sm' | 'md' | undefined\n  /**\n   * `unstyled` keeps the wiring and drops the surface.\n   *\n   * The label, the generated id, `aria-describedby` and the error are what a\n   * field is; the border and the height are what it looks like. A search box\n   * inside a bordered row, a url field in an editor popover — those places\n   * were hand-writing the whole thing to avoid the appearance, and losing the\n   * wiring with it.\n   *\n   * The same reasoning as `BaseButton`'s `unstyled`, and the same test: a\n   * primitive is finished when the app can take its behaviour without its\n   * paint.\n   */\n  variant?: 'default' | 'unstyled' | undefined\n}>()\n\n/* The control keeps 16px at every size, and that is not a rounding of the\n   scale — it is the rule. iOS zooms the viewport when a text field it is\n   focusing has a font-size under 16px, and the page never zooms back. Both\n   phone consumers had written `input { font-size: 16px }` into their base\n   layer to stop exactly this, and a `text-sm` utility from here would have\n   overridden it in every app at once.\n\n   So `size` reaches the label and the spacing, through FormField, and leaves\n   the typing target alone. `BaseSelect` is free to shrink: a select opens a\n   native picker rather than a caret, and does not trigger the zoom. */\nconst CONTROL_CLASS = 'h-11 text-base'\n\n/**\n * A number field's value is a number.\n *\n * Typed to `string` alone, `type=\"number\"` forced the caller to keep a string\n * ref and convert on both sides of it — and a component you have to wrap in\n * order to use is one you write yourself instead, which is exactly what the\n * first numeric field tried to reach for it did.\n */\nconst model = defineModel<string | number | undefined>()\n</script>\n\n<template>\n  <FormField :label=\"label\" :error=\"error\" :hint=\"hint\" :label-hidden=\"labelHidden\" :size=\"size\">\n    <template #default=\"{ id, describedBy, invalid }\">\n      <input\n        :id=\"id\"\n        v-model=\"model\"\n        :type=\"type\"\n        :aria-invalid=\"invalid\"\n        :aria-describedby=\"describedBy\"\n        v-bind=\"$attrs\"\n        :class=\"[\n          variant === 'unstyled'\n            ? ''\n            : 'border-hair bg-surface text-ink rounded-card focus-visible:outline-primary border px-3 focus-visible:outline-2 focus-visible:outline-offset-1',\n          variant === 'unstyled' ? 'text-base' : CONTROL_CLASS,\n          variant !== 'unstyled' && invalid ? 'border-negative' : '',\n        ]\"\n      />\n    </template>\n  </FormField>\n</template>\n","<script setup lang=\"ts\">\nimport FormField from './FormField.vue'\n\ndefineOptions({ inheritAttrs: false })\n\nconst {\n  label,\n  error = '',\n  hint = '',\n  type = 'text',\n  labelHidden = false,\n  size = 'md',\n  variant = 'default',\n} = defineProps<{\n  label: string\n  error?: string | undefined\n  hint?: string | undefined\n  /**\n   * Hides the label visually but keeps it for assistive tech. For fields whose\n   * surrounding row already names them — dropping the label entirely would\n   * leave the input with no accessible name at all.\n   */\n  labelHidden?: boolean | undefined\n  /**\n   * Every type a text field can be, because the ones missing were the ones\n   * apps needed: `date` and `search` were hand-written three times each and\n   * `url` twice, in files that already imported this component.\n   */\n  type?:\n    | 'text'\n    | 'email'\n    | 'password'\n    | 'number'\n    | 'search'\n    | 'tel'\n    | 'url'\n    | 'date'\n    | 'time'\n    | 'datetime-local'\n    | undefined\n  /** `sm` for a field inside a row rather than in a form of its own. */\n  size?: 'sm' | 'md' | undefined\n  /**\n   * `unstyled` keeps the wiring and drops the surface.\n   *\n   * The label, the generated id, `aria-describedby` and the error are what a\n   * field is; the border and the height are what it looks like. A search box\n   * inside a bordered row, a url field in an editor popover — those places\n   * were hand-writing the whole thing to avoid the appearance, and losing the\n   * wiring with it.\n   *\n   * The same reasoning as `BaseButton`'s `unstyled`, and the same test: a\n   * primitive is finished when the app can take its behaviour without its\n   * paint.\n   */\n  variant?: 'default' | 'unstyled' | undefined\n}>()\n\n/* The control keeps 16px at every size, and that is not a rounding of the\n   scale — it is the rule. iOS zooms the viewport when a text field it is\n   focusing has a font-size under 16px, and the page never zooms back. Both\n   phone consumers had written `input { font-size: 16px }` into their base\n   layer to stop exactly this, and a `text-sm` utility from here would have\n   overridden it in every app at once.\n\n   So `size` reaches the label and the spacing, through FormField, and leaves\n   the typing target alone. `BaseSelect` is free to shrink: a select opens a\n   native picker rather than a caret, and does not trigger the zoom. */\nconst CONTROL_CLASS = 'h-11 text-base'\n\n/**\n * A number field's value is a number.\n *\n * Typed to `string` alone, `type=\"number\"` forced the caller to keep a string\n * ref and convert on both sides of it — and a component you have to wrap in\n * order to use is one you write yourself instead, which is exactly what the\n * first numeric field tried to reach for it did.\n */\nconst model = defineModel<string | number | undefined>()\n</script>\n\n<template>\n  <FormField :label=\"label\" :error=\"error\" :hint=\"hint\" :label-hidden=\"labelHidden\" :size=\"size\">\n    <template #default=\"{ id, describedBy, invalid }\">\n      <input\n        :id=\"id\"\n        v-model=\"model\"\n        :type=\"type\"\n        :aria-invalid=\"invalid\"\n        :aria-describedby=\"describedBy\"\n        v-bind=\"$attrs\"\n        :class=\"[\n          variant === 'unstyled'\n            ? ''\n            : 'border-hair bg-surface text-ink rounded-card focus-visible:outline-primary border px-3 focus-visible:outline-2 focus-visible:outline-offset-1',\n          variant === 'unstyled' ? 'text-base' : CONTROL_CLASS,\n          variant !== 'unstyled' && invalid ? 'border-negative' : '',\n        ]\"\n      />\n    </template>\n  </FormField>\n</template>\n","<script setup lang=\"ts\">\nimport BaseButton from './BaseButton.vue'\nimport { computed, nextTick, onUnmounted, ref, watch } from 'vue'\nimport { X } from 'lucide-vue-next'\n\nimport { useVisualViewport } from '../composables/use-visual-viewport'\n\nconst open = defineModel<boolean>({ required: true })\nconst {\n  title,\n  subtitle = '',\n  closeLabel = 'Close',\n} = defineProps<{\n  title: string\n  subtitle?: string | undefined\n  /**\n   * Accessible name for the close button.\n   *\n   * A prop rather than a translation: a component that calls t() forces every\n   * consumer onto one i18n setup, and this is the package's only visible string.\n   */\n  closeLabel?: string | undefined\n}>()\n\nconst viewport = useVisualViewport()\n\n/**\n * Pins the sheet to the area the keyboard has left visible.\n *\n * Only needed where the layout viewport does not shrink on its own — iOS. On\n * Android the numbers already agree, so this is a no-op there rather than a\n * second, competing adjustment.\n */\nconst viewportStyle = computed(() =>\n  viewport.value\n    ? { height: `${viewport.value.height}px`, top: `${viewport.value.offsetTop}px` }\n    : undefined,\n)\n\nconst panel = ref<HTMLElement | null>(null)\nlet lastFocused: HTMLElement | null = null\n\nfunction close() {\n  open.value = false\n}\n\nfunction onKeydown(event: KeyboardEvent) {\n  if (event.key === 'Escape') close()\n}\n\nwatch(open, async (isOpen) => {\n  if (isOpen) {\n    setBackgroundInert(true)\n    lastFocused = document.activeElement instanceof HTMLElement ? document.activeElement : null\n    window.addEventListener('keydown', onKeydown)\n    await nextTick()\n    panel.value?.focus()\n  } else {\n    window.removeEventListener('keydown', onKeydown)\n    lastFocused?.focus()\n    lastFocused = null\n    setBackgroundInert(false)\n  }\n})\n\n/**\n * `inert` takes the whole app out of tab order and pointer events while the\n * sheet is open — a real focus trap without keydown bookkeeping.\n *\n * The sheet itself is teleported to `#sheet-root`, a sibling of `#app`, so it\n * stays interactive.\n */\nfunction setBackgroundInert(isInert: boolean) {\n  document.getElementById('app')?.toggleAttribute('inert', isInert)\n}\n\nonUnmounted(() => {\n  window.removeEventListener('keydown', onKeydown)\n  // Unmounting while open would otherwise leave the whole app inert forever.\n  setBackgroundInert(false)\n})\n</script>\n\n<template>\n  <Teleport to=\"#sheet-root\">\n    <Transition name=\"sheet\">\n      <div\n        v-if=\"open\"\n        class=\"fixed inset-x-0 top-0 bottom-0 z-50 flex items-center justify-center\"\n        :style=\"viewportStyle\"\n      >\n        <div\n          class=\"shell-frame md:rounded-shell relative flex max-h-full flex-col justify-end overflow-hidden\"\n        >\n          <div class=\"bg-ink/45 absolute inset-0 backdrop-blur-[2px]\" @click=\"close\" />\n\n          <!-- Header and footer stay put; only the slot scrolls. Sized in dvh so\n               the on-screen keyboard shrinks the sheet instead of pushing its\n               content out of reach. -->\n          <section\n            ref=\"panel\"\n            role=\"dialog\"\n            aria-modal=\"true\"\n            :aria-label=\"title\"\n            tabindex=\"-1\"\n            class=\"sheet-panel bg-surface relative flex max-h-[94%] min-h-[56dvh] flex-col rounded-t-[28px] shadow-2xl outline-none\"\n          >\n            <div class=\"flex shrink-0 justify-center pt-3\" aria-hidden=\"true\">\n              <span class=\"bg-hair h-1.5 w-10 rounded-full\" />\n            </div>\n\n            <header class=\"flex shrink-0 items-start gap-3 px-6 pt-4 pb-5\">\n              <div class=\"min-w-0 flex-1\">\n                <h2 class=\"text-ink text-xl leading-tight font-semibold\">{{ title }}</h2>\n                <p v-if=\"subtitle\" class=\"text-ink-soft mt-1 text-sm leading-snug\">\n                  {{ subtitle }}\n                </p>\n              </div>\n\n              <!-- `unstyled`, so the sheet keeps the exact button it had. What it\n                   gains is the focus ring it never had: this was a raw\n                   `<button>` with no `focus-visible` rule, so closing a sheet\n                   from the keyboard was invisible. -->\n              <BaseButton\n                variant=\"unstyled\"\n                class=\"text-ink-soft hover:bg-muted hover:text-ink -mt-1 flex size-10 shrink-0 items-center justify-center rounded-full transition-colors active:scale-90\"\n                :aria-label=\"closeLabel\"\n                @click=\"close\"\n              >\n                <X class=\"size-5\" />\n              </BaseButton>\n            </header>\n\n            <div\n              class=\"min-h-0 flex-1 overflow-y-auto px-6 pb-[calc(2rem+env(safe-area-inset-bottom,0px))]\"\n            >\n              <slot />\n            </div>\n          </section>\n        </div>\n      </div>\n    </Transition>\n  </Teleport>\n</template>\n\n<style scoped>\n.sheet-enter-active,\n.sheet-leave-active {\n  transition: opacity 200ms ease;\n}\n.sheet-enter-from,\n.sheet-leave-to {\n  opacity: 0;\n}\n\n/* The panel travels further than the scrim fades, which is what makes the\n   sheet read as rising rather than appearing. */\n.sheet-enter-active .sheet-panel,\n.sheet-leave-active .sheet-panel {\n  transition: transform 280ms cubic-bezier(0.32, 0.72, 0, 1);\n}\n.sheet-enter-from .sheet-panel,\n.sheet-leave-to .sheet-panel {\n  transform: translateY(6%);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .sheet-enter-from .sheet-panel,\n  .sheet-leave-to .sheet-panel {\n    transform: none;\n  }\n}\n</style>\n","<script setup lang=\"ts\">\nimport BaseButton from './BaseButton.vue'\nimport { computed, nextTick, onUnmounted, ref, watch } from 'vue'\nimport { X } from 'lucide-vue-next'\n\nimport { useVisualViewport } from '../composables/use-visual-viewport'\n\nconst open = defineModel<boolean>({ required: true })\nconst {\n  title,\n  subtitle = '',\n  closeLabel = 'Close',\n} = defineProps<{\n  title: string\n  subtitle?: string | undefined\n  /**\n   * Accessible name for the close button.\n   *\n   * A prop rather than a translation: a component that calls t() forces every\n   * consumer onto one i18n setup, and this is the package's only visible string.\n   */\n  closeLabel?: string | undefined\n}>()\n\nconst viewport = useVisualViewport()\n\n/**\n * Pins the sheet to the area the keyboard has left visible.\n *\n * Only needed where the layout viewport does not shrink on its own — iOS. On\n * Android the numbers already agree, so this is a no-op there rather than a\n * second, competing adjustment.\n */\nconst viewportStyle = computed(() =>\n  viewport.value\n    ? { height: `${viewport.value.height}px`, top: `${viewport.value.offsetTop}px` }\n    : undefined,\n)\n\nconst panel = ref<HTMLElement | null>(null)\nlet lastFocused: HTMLElement | null = null\n\nfunction close() {\n  open.value = false\n}\n\nfunction onKeydown(event: KeyboardEvent) {\n  if (event.key === 'Escape') close()\n}\n\nwatch(open, async (isOpen) => {\n  if (isOpen) {\n    setBackgroundInert(true)\n    lastFocused = document.activeElement instanceof HTMLElement ? document.activeElement : null\n    window.addEventListener('keydown', onKeydown)\n    await nextTick()\n    panel.value?.focus()\n  } else {\n    window.removeEventListener('keydown', onKeydown)\n    lastFocused?.focus()\n    lastFocused = null\n    setBackgroundInert(false)\n  }\n})\n\n/**\n * `inert` takes the whole app out of tab order and pointer events while the\n * sheet is open — a real focus trap without keydown bookkeeping.\n *\n * The sheet itself is teleported to `#sheet-root`, a sibling of `#app`, so it\n * stays interactive.\n */\nfunction setBackgroundInert(isInert: boolean) {\n  document.getElementById('app')?.toggleAttribute('inert', isInert)\n}\n\nonUnmounted(() => {\n  window.removeEventListener('keydown', onKeydown)\n  // Unmounting while open would otherwise leave the whole app inert forever.\n  setBackgroundInert(false)\n})\n</script>\n\n<template>\n  <Teleport to=\"#sheet-root\">\n    <Transition name=\"sheet\">\n      <div\n        v-if=\"open\"\n        class=\"fixed inset-x-0 top-0 bottom-0 z-50 flex items-center justify-center\"\n        :style=\"viewportStyle\"\n      >\n        <div\n          class=\"shell-frame md:rounded-shell relative flex max-h-full flex-col justify-end overflow-hidden\"\n        >\n          <div class=\"bg-ink/45 absolute inset-0 backdrop-blur-[2px]\" @click=\"close\" />\n\n          <!-- Header and footer stay put; only the slot scrolls. Sized in dvh so\n               the on-screen keyboard shrinks the sheet instead of pushing its\n               content out of reach. -->\n          <section\n            ref=\"panel\"\n            role=\"dialog\"\n            aria-modal=\"true\"\n            :aria-label=\"title\"\n            tabindex=\"-1\"\n            class=\"sheet-panel bg-surface relative flex max-h-[94%] min-h-[56dvh] flex-col rounded-t-[28px] shadow-2xl outline-none\"\n          >\n            <div class=\"flex shrink-0 justify-center pt-3\" aria-hidden=\"true\">\n              <span class=\"bg-hair h-1.5 w-10 rounded-full\" />\n            </div>\n\n            <header class=\"flex shrink-0 items-start gap-3 px-6 pt-4 pb-5\">\n              <div class=\"min-w-0 flex-1\">\n                <h2 class=\"text-ink text-xl leading-tight font-semibold\">{{ title }}</h2>\n                <p v-if=\"subtitle\" class=\"text-ink-soft mt-1 text-sm leading-snug\">\n                  {{ subtitle }}\n                </p>\n              </div>\n\n              <!-- `unstyled`, so the sheet keeps the exact button it had. What it\n                   gains is the focus ring it never had: this was a raw\n                   `<button>` with no `focus-visible` rule, so closing a sheet\n                   from the keyboard was invisible. -->\n              <BaseButton\n                variant=\"unstyled\"\n                class=\"text-ink-soft hover:bg-muted hover:text-ink -mt-1 flex size-10 shrink-0 items-center justify-center rounded-full transition-colors active:scale-90\"\n                :aria-label=\"closeLabel\"\n                @click=\"close\"\n              >\n                <X class=\"size-5\" />\n              </BaseButton>\n            </header>\n\n            <div\n              class=\"min-h-0 flex-1 overflow-y-auto px-6 pb-[calc(2rem+env(safe-area-inset-bottom,0px))]\"\n            >\n              <slot />\n            </div>\n          </section>\n        </div>\n      </div>\n    </Transition>\n  </Teleport>\n</template>\n\n<style scoped>\n.sheet-enter-active,\n.sheet-leave-active {\n  transition: opacity 200ms ease;\n}\n.sheet-enter-from,\n.sheet-leave-to {\n  opacity: 0;\n}\n\n/* The panel travels further than the scrim fades, which is what makes the\n   sheet read as rising rather than appearing. */\n.sheet-enter-active .sheet-panel,\n.sheet-leave-active .sheet-panel {\n  transition: transform 280ms cubic-bezier(0.32, 0.72, 0, 1);\n}\n.sheet-enter-from .sheet-panel,\n.sheet-leave-to .sheet-panel {\n  transform: translateY(6%);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .sheet-enter-from .sheet-panel,\n  .sheet-leave-to .sheet-panel {\n    transform: none;\n  }\n}\n</style>\n","<script setup lang=\"ts\">\nimport { computed, useId } from 'vue'\n\n/**\n * A single checkbox, with its label beside it.\n *\n * Deliberately not built on `FormField`. That component stacks a label above\n * its control, which is right for every field where the control is a box you\n * type into and wrong here: a checkbox is read as one sentence with a mark in\n * front of it, and putting the words above the box breaks the association a\n * sighted reader makes before they get to the accessible name.\n *\n * The whole row is the label, so the words are part of the hit target. On a\n * phone that is the difference between a control and a coin toss.\n */\nconst {\n  label,\n  error = '',\n  hint = '',\n  disabled = false,\n  size = 'md',\n} = defineProps<{\n  label: string\n  error?: string | undefined\n  hint?: string | undefined\n  disabled?: boolean | undefined\n  /**\n   * `md` is a setting: a line the reader came here to change, in ink.\n   * `sm` is an aside — \"remember me\" under a sign-in form, \"show the ones I\n   * have learned\" above a list — quieter and tighter.\n   *\n   * The two are not a guess. Of the five hand-written checkboxes across the\n   * three consuming apps, four were the aside and one was the setting, and\n   * they differed in exactly these two ways.\n   */\n  size?: 'sm' | 'md' | undefined\n}>()\n\nconst model = defineModel<boolean>({ default: false })\n\nconst id = useId()\nconst errorId = `${id}-error`\nconst hintId = `${id}-hint`\n\nconst describedBy = computed(() => {\n  if (error) return errorId\n  if (hint) return hintId\n  return undefined\n})\n</script>\n\n<template>\n  <div class=\"flex flex-col gap-1.5\">\n    <label\n      :for=\"id\"\n      class=\"flex items-center\"\n      :class=\"[size === 'sm' ? 'gap-2' : 'gap-3', disabled ? 'opacity-50' : 'cursor-pointer']\"\n    >\n      <input\n        :id=\"id\"\n        v-model=\"model\"\n        type=\"checkbox\"\n        :disabled=\"disabled\"\n        :aria-invalid=\"Boolean(error)\"\n        :aria-describedby=\"describedBy\"\n        class=\"accent-primary focus-visible:outline-primary size-4 shrink-0 focus-visible:outline-2 focus-visible:outline-offset-2\"\n      />\n      <span class=\"text-sm\" :class=\"size === 'sm' ? 'text-ink-soft' : 'text-ink'\">\n        {{ label }}\n      </span>\n    </label>\n\n    <p v-if=\"error\" :id=\"errorId\" class=\"text-negative text-xs\">{{ error }}</p>\n    <p v-else-if=\"hint\" :id=\"hintId\" class=\"text-ink-soft text-xs\">{{ hint }}</p>\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport { computed, useId } from 'vue'\n\n/**\n * A single checkbox, with its label beside it.\n *\n * Deliberately not built on `FormField`. That component stacks a label above\n * its control, which is right for every field where the control is a box you\n * type into and wrong here: a checkbox is read as one sentence with a mark in\n * front of it, and putting the words above the box breaks the association a\n * sighted reader makes before they get to the accessible name.\n *\n * The whole row is the label, so the words are part of the hit target. On a\n * phone that is the difference between a control and a coin toss.\n */\nconst {\n  label,\n  error = '',\n  hint = '',\n  disabled = false,\n  size = 'md',\n} = defineProps<{\n  label: string\n  error?: string | undefined\n  hint?: string | undefined\n  disabled?: boolean | undefined\n  /**\n   * `md` is a setting: a line the reader came here to change, in ink.\n   * `sm` is an aside — \"remember me\" under a sign-in form, \"show the ones I\n   * have learned\" above a list — quieter and tighter.\n   *\n   * The two are not a guess. Of the five hand-written checkboxes across the\n   * three consuming apps, four were the aside and one was the setting, and\n   * they differed in exactly these two ways.\n   */\n  size?: 'sm' | 'md' | undefined\n}>()\n\nconst model = defineModel<boolean>({ default: false })\n\nconst id = useId()\nconst errorId = `${id}-error`\nconst hintId = `${id}-hint`\n\nconst describedBy = computed(() => {\n  if (error) return errorId\n  if (hint) return hintId\n  return undefined\n})\n</script>\n\n<template>\n  <div class=\"flex flex-col gap-1.5\">\n    <label\n      :for=\"id\"\n      class=\"flex items-center\"\n      :class=\"[size === 'sm' ? 'gap-2' : 'gap-3', disabled ? 'opacity-50' : 'cursor-pointer']\"\n    >\n      <input\n        :id=\"id\"\n        v-model=\"model\"\n        type=\"checkbox\"\n        :disabled=\"disabled\"\n        :aria-invalid=\"Boolean(error)\"\n        :aria-describedby=\"describedBy\"\n        class=\"accent-primary focus-visible:outline-primary size-4 shrink-0 focus-visible:outline-2 focus-visible:outline-offset-2\"\n      />\n      <span class=\"text-sm\" :class=\"size === 'sm' ? 'text-ink-soft' : 'text-ink'\">\n        {{ label }}\n      </span>\n    </label>\n\n    <p v-if=\"error\" :id=\"errorId\" class=\"text-negative text-xs\">{{ error }}</p>\n    <p v-else-if=\"hint\" :id=\"hintId\" class=\"text-ink-soft text-xs\">{{ hint }}</p>\n  </div>\n</template>\n","<script setup lang=\"ts\">\nconst { label, disabled = false } = defineProps<{\n  label: string\n  /**\n   * Greyed out and unclickable while a sign-in is already in flight.\n   *\n   * A real prop rather than a fallthrough attribute: the button needs to look\n   * disabled as well as be it, and a bare `disabled` landing on the element by\n   * itself gets the second half only.\n   */\n  disabled?: boolean | undefined\n}>()\n\nconst emit = defineEmits<{ click: [] }>()\n</script>\n\n<template>\n  <button\n    type=\"button\"\n    :disabled=\"disabled\"\n    class=\"border-hair bg-surface text-ink rounded-card hover:bg-muted flex h-11 w-full items-center justify-center gap-2 border text-sm font-medium transition-colors active:scale-95 disabled:pointer-events-none disabled:opacity-50\"\n    @click=\"emit('click')\"\n  >\n    <!-- Google asks for its own mark, so it is inlined rather than themed. -->\n    <svg class=\"size-4\" viewBox=\"0 0 48 48\" aria-hidden=\"true\">\n      <path\n        fill=\"#EA4335\"\n        d=\"M24 9.5c3.5 0 6.6 1.2 9 3.6l6.7-6.7C35.6 2.7 30.2.5 24 .5 14.6.5 6.5 5.9 2.6 13.7l7.8 6.1C12.3 13.7 17.7 9.5 24 9.5z\"\n      />\n      <path\n        fill=\"#4285F4\"\n        d=\"M46.5 24.5c0-1.6-.1-3.1-.4-4.5H24v9h12.7c-.6 3-2.3 5.6-4.9 7.3l7.6 5.9c4.4-4.1 7.1-10.2 7.1-17.7z\"\n      />\n      <path\n        fill=\"#FBBC05\"\n        d=\"M10.4 28.2a14.6 14.6 0 0 1 0-8.4l-7.8-6.1a24 24 0 0 0 0 20.6l7.8-6.1z\"\n      />\n      <path\n        fill=\"#34A853\"\n        d=\"M24 47.5c6.2 0 11.5-2 15.4-5.6l-7.6-5.9c-2.1 1.4-4.8 2.3-7.8 2.3-6.3 0-11.7-4.2-13.6-10l-7.8 6.1C6.5 42.1 14.6 47.5 24 47.5z\"\n      />\n    </svg>\n    {{ label }}\n  </button>\n</template>\n","<script setup lang=\"ts\">\nconst { label, disabled = false } = defineProps<{\n  label: string\n  /**\n   * Greyed out and unclickable while a sign-in is already in flight.\n   *\n   * A real prop rather than a fallthrough attribute: the button needs to look\n   * disabled as well as be it, and a bare `disabled` landing on the element by\n   * itself gets the second half only.\n   */\n  disabled?: boolean | undefined\n}>()\n\nconst emit = defineEmits<{ click: [] }>()\n</script>\n\n<template>\n  <button\n    type=\"button\"\n    :disabled=\"disabled\"\n    class=\"border-hair bg-surface text-ink rounded-card hover:bg-muted flex h-11 w-full items-center justify-center gap-2 border text-sm font-medium transition-colors active:scale-95 disabled:pointer-events-none disabled:opacity-50\"\n    @click=\"emit('click')\"\n  >\n    <!-- Google asks for its own mark, so it is inlined rather than themed. -->\n    <svg class=\"size-4\" viewBox=\"0 0 48 48\" aria-hidden=\"true\">\n      <path\n        fill=\"#EA4335\"\n        d=\"M24 9.5c3.5 0 6.6 1.2 9 3.6l6.7-6.7C35.6 2.7 30.2.5 24 .5 14.6.5 6.5 5.9 2.6 13.7l7.8 6.1C12.3 13.7 17.7 9.5 24 9.5z\"\n      />\n      <path\n        fill=\"#4285F4\"\n        d=\"M46.5 24.5c0-1.6-.1-3.1-.4-4.5H24v9h12.7c-.6 3-2.3 5.6-4.9 7.3l7.6 5.9c4.4-4.1 7.1-10.2 7.1-17.7z\"\n      />\n      <path\n        fill=\"#FBBC05\"\n        d=\"M10.4 28.2a14.6 14.6 0 0 1 0-8.4l-7.8-6.1a24 24 0 0 0 0 20.6l7.8-6.1z\"\n      />\n      <path\n        fill=\"#34A853\"\n        d=\"M24 47.5c6.2 0 11.5-2 15.4-5.6l-7.6-5.9c-2.1 1.4-4.8 2.3-7.8 2.3-6.3 0-11.7-4.2-13.6-10l-7.8 6.1C6.5 42.1 14.6 47.5 24 47.5z\"\n      />\n    </svg>\n    {{ label }}\n  </button>\n</template>\n"],"mappings":"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"}