rei-kit 0.12.1 → 0.14.0

package/dist/SettingsRow-MnVleeTR.js

@@ -0,0 +1,217 @@
+import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, defineComponent, mergeProps, normalizeClass, openBlock, renderSlot, resolveDynamicComponent, toDisplayString, unref, withCtx } from "vue";
+import { ChevronRight } from "lucide-vue-next";
+//#region src/components/BaseButton.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1$1 = {
+	key: 0,
+	class: "size-4 animate-spin rounded-full border-2 border-current border-t-transparent",
+	"aria-hidden": "true"
+};
+//#endregion
+//#region src/components/BaseButton.vue
+var BaseButton_default = /* @__PURE__ */ defineComponent({
+	__name: "BaseButton",
+	props: {
+		as: { default: "button" },
+		variant: { default: "primary" },
+		size: { default: "md" },
+		loading: {
+			type: Boolean,
+			default: false
+		},
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		type: { default: "button" },
+		icon: {
+			type: Boolean,
+			default: false
+		},
+		block: {
+			type: Boolean,
+			default: false
+		},
+		to: { default: () => void 0 },
+		href: { default: () => void 0 },
+		pill: {
+			type: Boolean,
+			default: false
+		},
+		pressed: {
+			type: Boolean,
+			default: () => void 0
+		}
+	},
+	setup(__props) {
+		const VARIANT_CLASS = {
+			primary: "bg-primary text-white hover:bg-primary/90",
+			secondary: "border-hair bg-surface text-ink border hover:bg-muted",
+			ghost: "bg-transparent text-ink hover:bg-muted",
+			destructive: "bg-transparent text-ink-soft hover:text-negative",
+			row: "w-full justify-start text-left bg-transparent text-ink hover:bg-muted",
+			quiet: "bg-transparent text-ink-soft hover:bg-muted hover:text-ink",
+			danger: "bg-negative text-white hover:bg-negative/90",
+			positive: "bg-positive text-white hover:bg-positive/90",
+			warning: "bg-warning text-white hover:bg-warning/90",
+			accent: "bg-accent text-white hover:bg-accent/90",
+			link: "bg-transparent underline underline-offset-2 hover:opacity-80",
+			unstyled: ""
+		};
+		const SIZE_CLASS = {
+			xs: "h-8 px-3 text-xs",
+			sm: "h-9 px-3 text-sm",
+			md: "h-11 px-4 text-base",
+			lg: "h-14 px-6 text-lg"
+		};
+		const ICON_SIZE_CLASS = {
+			xs: "size-8 text-xs",
+			sm: "size-9 text-sm",
+			md: "size-11 text-base",
+			lg: "size-14 text-lg"
+		};
+		const ROW_SIZE_CLASS = {
+			xs: "px-2 py-1.5 text-xs",
+			sm: "px-3 py-2 text-sm",
+			md: "px-3 py-2.5 text-base",
+			lg: "px-4 py-3 text-lg"
+		};
+		const LINK_SIZE_CLASS = {
+			xs: "text-xs",
+			sm: "text-sm",
+			md: "text-base",
+			lg: "text-lg"
+		};
+		const sizing = computed(() => {
+			if (__props.variant === "unstyled") return "";
+			if (__props.variant === "link") return LINK_SIZE_CLASS[__props.size];
+			if (__props.variant === "row") return ROW_SIZE_CLASS[__props.size];
+			return __props.icon ? ICON_SIZE_CLASS[__props.size] : SIZE_CLASS[__props.size];
+		});
+		const PRESSED_CLASS = {
+			ghost: "bg-primary text-white hover:bg-primary/90",
+			quiet: "bg-primary text-white hover:bg-primary/90",
+			secondary: "bg-primary border-primary text-white hover:bg-primary/90",
+			row: "w-full justify-start text-left bg-muted text-ink hover:bg-muted"
+		};
+		const surface = computed(() => {
+			if (__props.pressed === true) return PRESSED_CLASS[__props.variant] ?? VARIANT_CLASS[__props.variant];
+			if (__props.variant === "destructive") return `${VARIANT_CLASS.destructive} hover:bg-negative/10`;
+			return VARIANT_CLASS[__props.variant];
+		});
+		const shell = computed(() => {
+			if (__props.variant === "unstyled") return "";
+			const feel = "transition-[transform,color,background-color,border-color] duration-100 select-none";
+			if (__props.variant === "row") return `inline-flex items-center gap-2 font-medium ${feel}`;
+			return `inline-flex items-center justify-center gap-2 font-medium ${feel} active:scale-95`;
+		});
+		const radius = computed(() => {
+			if (__props.variant === "unstyled") return "";
+			if (__props.variant === "link") return "rounded-xs";
+			return __props.pill ? "rounded-full" : "rounded-card";
+		});
+		/** Anything that is not a `<button>` cannot be `disabled`; it has to be told. */
+		const inactive = computed(() => __props.disabled || __props.loading);
+		const linkProps = computed(() => {
+			if (__props.as === "router-link") return { to: __props.to };
+			if (__props.as === "a") return inactive.value ? {} : { href: __props.href };
+			return {};
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(resolveDynamicComponent(__props.as), mergeProps(linkProps.value, {
+				type: __props.as === "button" ? __props.type : void 0,
+				disabled: __props.as === "button" ? inactive.value : void 0,
+				"aria-disabled": __props.as !== "button" && inactive.value ? "true" : void 0,
+				"aria-busy": __props.loading,
+				"aria-pressed": __props.pressed === void 0 ? void 0 : String(__props.pressed),
+				class: ["focus-visible:outline-primary focus-visible:outline-2 focus-visible:outline-offset-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50", [
+					shell.value,
+					surface.value,
+					sizing.value,
+					radius.value,
+					__props.block ? "w-full" : ""
+				]]
+			}), {
+				default: withCtx(() => [__props.loading ? (openBlock(), createElementBlock("span", _hoisted_1$1)) : createCommentVNode("", true), renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 16, [
+				"type",
+				"disabled",
+				"aria-disabled",
+				"aria-busy",
+				"aria-pressed",
+				"class"
+			]);
+		};
+	}
+});
+//#endregion
+//#region \0plugin-vue:export-helper
+var _plugin_vue_export_helper_default = (sfc, props) => {
+	const target = sfc.__vccOpts || sfc;
+	for (const [key, val] of props) target[key] = val;
+	return target;
+};
+//#endregion
+//#region src/components/SettingsRow.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { class: "flex items-center gap-3" };
+var _hoisted_2 = {
+	key: 0,
+	class: "bg-muted text-ink-soft flex size-9 shrink-0 items-center justify-center rounded-xl",
+	"aria-hidden": "true"
+};
+var _hoisted_3 = { class: "min-w-0 flex-1" };
+var _hoisted_4 = { class: "text-ink text-sm font-medium" };
+var _hoisted_5 = {
+	key: 0,
+	class: "text-ink-soft mt-0.5 text-xs leading-snug"
+};
+var _hoisted_6 = {
+	key: 1,
+	class: "shrink-0"
+};
+var _hoisted_7 = { key: 0 };
+//#endregion
+//#region src/components/SettingsRow.vue
+var SettingsRow_default = /* @__PURE__ */ defineComponent({
+	__name: "SettingsRow",
+	props: {
+		label: {},
+		description: { default: "" },
+		icon: { default: () => void 0 },
+		interactive: {
+			type: Boolean,
+			default: false
+		},
+		stacked: {
+			type: Boolean,
+			default: false
+		}
+	},
+	emits: ["click"],
+	setup(__props, { emit: __emit }) {
+		const emit = __emit;
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(resolveDynamicComponent(__props.interactive ? "button" : "div"), {
+				type: __props.interactive ? "button" : void 0,
+				class: normalizeClass(["flex w-full items-center gap-3 px-4 py-3 text-left", [__props.interactive ? "hover:bg-muted/60 transition-colors active:scale-[0.99]" : "", __props.stacked ? "flex-col items-stretch gap-3" : ""]]),
+				onClick: _cache[0] || (_cache[0] = ($event) => __props.interactive && emit("click"))
+			}, {
+				default: withCtx(() => [createElementVNode("div", _hoisted_1, [
+					__props.icon ? (openBlock(), createElementBlock("span", _hoisted_2, [(openBlock(), createBlock(resolveDynamicComponent(__props.icon), { class: "size-[18px]" }))])) : createCommentVNode("", true),
+					createElementVNode("div", _hoisted_3, [createElementVNode("p", _hoisted_4, toDisplayString(__props.label), 1), __props.description ? (openBlock(), createElementBlock("p", _hoisted_5, toDisplayString(__props.description), 1)) : createCommentVNode("", true)]),
+					!__props.stacked ? (openBlock(), createElementBlock("div", _hoisted_6, [renderSlot(_ctx.$slots, "default")])) : createCommentVNode("", true),
+					__props.interactive ? (openBlock(), createBlock(unref(ChevronRight), {
+						key: 2,
+						class: "text-ink-soft size-4 shrink-0",
+						"aria-hidden": "true"
+					})) : createCommentVNode("", true)
+				]), __props.stacked ? (openBlock(), createElementBlock("div", _hoisted_7, [renderSlot(_ctx.$slots, "default")])) : createCommentVNode("", true)]),
+				_: 3
+			}, 8, ["type", "class"]);
+		};
+	}
+});
+//#endregion
+export { _plugin_vue_export_helper_default as n, BaseButton_default as r, SettingsRow_default as t };
+
+//# sourceMappingURL=SettingsRow-MnVleeTR.js.map

package/dist/SettingsRow-MnVleeTR.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SettingsRow-MnVleeTR.js","names":[],"sources":["../src/components/BaseButton.vue","../src/components/BaseButton.vue","../src/components/SettingsRow.vue","../src/components/SettingsRow.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue'\n\n/**\n * The kit's button, and — when asked — its link.\n *\n * `as` exists because a button and a link are the same shape and a different\n * element, and the app was resolving that by nesting them: a consumer had\n * `<RouterLink><BaseButton>` in every call to action, which is an `<a>` around\n * a `<button>`. That is invalid HTML, two stops in the tab order and two\n * controls to a screen reader, for one thing on the screen. Whether something\n * navigates is the app's decision; carrying it is this component's job.\n *\n * `router-link` is resolved by name rather than imported, so `vue-router` stays\n * the optional peer it is. Only an app that passes `as=\"router-link\"` needs it,\n * and an app that passes it has it.\n */\nconst {\n  as = 'button',\n  variant = 'primary',\n  size = 'md',\n  loading = false,\n  disabled = false,\n  type = 'button',\n  icon = false,\n  block = false,\n  pill = false,\n  pressed = undefined,\n  to = undefined,\n  href = undefined,\n} = defineProps<{\n  /** What to render. `button` unless this navigates. */\n  as?: 'button' | 'a' | 'router-link' | undefined\n  /**\n   * `link` is a real action that should read as text — \"clear this note\",\n   * \"remove\", \"change category\". It has no surface at all, so it also has no\n   * height and no padding: giving it either would make it a ghost button,\n   * which is a different thing and was already here.\n   */\n  variant?:\n    | 'primary'\n    | 'secondary'\n    | 'ghost'\n    | 'quiet'\n    | 'destructive'\n    | 'row'\n    | 'danger'\n    | 'positive'\n    | 'warning'\n    | 'accent'\n    | 'link'\n    | 'unstyled'\n    | undefined\n  /** `xs` is the action inside a prompt or a nudge, not on a page. */\n  size?: 'xs' | 'sm' | 'md' | 'lg' | undefined\n  loading?: boolean | undefined\n  disabled?: boolean | undefined\n  /** Ignored unless `as` is `button`. */\n  type?: 'button' | 'submit' | undefined\n  /**\n   * Square, sized to its icon, with no label beside it.\n   *\n   * **Pass `aria-label`.** An icon on its own has no accessible name, and a\n   * control a screen reader announces as \"button\" is not usable. Attributes\n   * fall through, so `aria-label` lands where it should — nothing here can\n   * check that you passed one, which is why it is said this loudly.\n   */\n  icon?: boolean | undefined\n  /** Fills its container. The ordinary case under a form. */\n  block?: boolean | undefined\n  /** For `as=\"router-link\"`. */\n  to?: string | Record<string, unknown> | undefined\n  /** For `as=\"a\"`. */\n  href?: string | undefined\n  /**\n   * Fully rounded rather than card-cornered.\n   *\n   * Every install prompt, update prompt and nudge across the apps used the\n   * same pair — a filled pill to act and a quiet one to dismiss — and none of\n   * them could use this component, because it only knew one corner radius.\n   */\n  pill?: boolean | undefined\n  /**\n   * That this button is a switch, and whether it is on.\n   *\n   * Omit it and the button is an action. Pass it and the button becomes a\n   * toggle: `aria-pressed` is written, and the variants that have an \"off\"\n   * look — ghost, quiet, secondary — take a filled one when on.\n   *\n   * There were 18 of these hand-written across the three apps, every one a\n   * picker cell or a filter chip, and almost none of them said `aria-pressed`\n   * at all. A screen reader met a row of identical buttons with no way to know\n   * which was chosen.\n   */\n  pressed?: boolean | undefined\n}>()\n\nconst VARIANT_CLASS = {\n  primary: 'bg-primary text-white hover:bg-primary/90',\n  /*\n   * An action that is real but not the one being urged.\n   *\n   * `ghost` had been standing in for this and cannot: with no border and no\n   * fill it reads as text, so \"Save draft\" sitting next to \"Publish\" looked\n   * like a caption rather than the other half of a choice. Ghost is for a\n   * control that should recede until it is wanted — a toolbar, a menu row —\n   * and that is a different job.\n   */\n  secondary: 'border-hair bg-surface text-ink border hover:bg-muted',\n  ghost: 'bg-transparent text-ink hover:bg-muted',\n  /*\n   * Quiet until you reach for it, and then plainly destructive: a delete at\n   * the end of a row, a \"remove this note\", an archive.\n   *\n   * Not `danger`, which is filled and shouts before it is needed — a red\n   * button in a list of rows makes the list look like a warning. And not\n   * `quiet` with a `hover:text-negative` class beside it, which is how all\n   * three apps were doing it: that class and the variant's own\n   * `hover:text-ink` set the same property at the same specificity, so which\n   * one wins depends on the order they happen to land in the stylesheet.\n   *\n   * Fifteen of these across the three apps, and every one of them was that\n   * coin toss.\n   */\n  destructive: 'bg-transparent text-ink-soft hover:text-negative',\n  /*\n   * A line in a list that is also a control: a settings row, a node in a tree,\n   * a heading that opens something.\n   *\n   * Full width, aligned to the start, and a hover that fills the whole line\n   * rather than a box inside it. Every app had written this — `.tree-row`,\n   * `.row`, `.header-action` — because a button that centres its content\n   * cannot be a row, and the alignment is the only thing that had to change.\n   *\n   * Padding stays the app's: a menu row and a tree node are not the same\n   * height, and the kit has no opinion about which one this is.\n   */\n  row: 'w-full justify-start text-left bg-transparent text-ink hover:bg-muted',\n  /*\n   * The control that is present without asking for attention: a dismiss beside\n   * an install prompt, a chevron beside a month, a delete at the end of a row.\n   *\n   * `ghost` is not this. Ghost keeps full-strength ink; this one starts soft\n   * and darkens, which is the difference between a control waiting to be used\n   * and one that is merely available. The pair `text-ink-soft hover:text-ink`\n   * was hand-written 47 times across the three apps.\n   *\n   * It fills on hover, and 0.11.0 got that half-right by fill... only for\n   * icons. The evidence said otherwise once the third app was read: an editor\n   * toolbar's buttons carry text and fill exactly the same way. The shape is\n   * \"a control in a strip\", not \"a control with a glyph in it\". A text action\n   * that should have no surface at all is `link`.\n   */\n  quiet: 'bg-transparent text-ink-soft hover:bg-muted hover:text-ink',\n  danger: 'bg-negative text-white hover:bg-negative/90',\n  /*\n   * The rest of the roles the kit already declares.\n   *\n   * `tokens.css` names five colour roles and this component exposed two of\n   * them, so an app that wanted a success-coloured action had to hand-write\n   * the button — which is what Hibi's green install button is. A component\n   * that cannot use a role its own design system declares is not avoiding a\n   * guess; it is incomplete.\n   */\n  positive: 'bg-positive text-white hover:bg-positive/90',\n  warning: 'bg-warning text-white hover:bg-warning/90',\n  accent: 'bg-accent text-white hover:bg-accent/90',\n  /* No fill, no border, no box: underlined so it is still obviously a control\n     without one. `ghost` cannot stand in — it has a hover surface and a\n     radius, so it reads as a button that happens to be empty. */\n  link: 'bg-transparent underline underline-offset-2 hover:opacity-80',\n  /*\n   * Everything this component is, except the paint.\n   *\n   * The reason it exists is measurable: across the three apps there were 58\n   * raw `<button>` elements sitting in 24 files that already imported and used\n   * `BaseButton`. The developer reached for the kit and gave up halfway down\n   * the same file — because the kit offered all of its appearance or none of\n   * itself, and what those places needed was everything but the appearance.\n   *\n   * A picker cell, a chip, a calendar day: the surface is the app's, and it\n   * should be. The element, the focus ring, the disabled handling, the\n   * `aria-pressed` bookkeeping and the `as` switch are not, and were being\n   * rewritten every time — usually without the focus ring.\n   */\n  unstyled: '',\n} as const\n\n/* Two scales, because a square control cannot take horizontal padding and\n   still be square. `lg` is here for a wide page's call to action: a 44px\n   button is right under a thumb and undersized under a headline. */\nconst SIZE_CLASS = {\n  xs: 'h-8 px-3 text-xs',\n  sm: 'h-9 px-3 text-sm',\n  md: 'h-11 px-4 text-base',\n  lg: 'h-14 px-6 text-lg',\n} as const\n\nconst ICON_SIZE_CLASS = {\n  xs: 'size-8 text-xs',\n  sm: 'size-9 text-sm',\n  md: 'size-11 text-base',\n  lg: 'size-14 text-lg',\n} as const\n\n/* A row is sized by its padding, not by a height. A settings line holds one\n   line of text and a tree node can hold two, and a fixed height turns the\n   second into an overflow. */\nconst ROW_SIZE_CLASS = {\n  xs: 'px-2 py-1.5 text-xs',\n  sm: 'px-3 py-2 text-sm',\n  md: 'px-3 py-2.5 text-base',\n  lg: 'px-4 py-3 text-lg',\n} as const\n\n/* A link takes the type size and nothing else. Height and padding are what\n   make a surface, and this variant is the one without one. */\nconst LINK_SIZE_CLASS = {\n  xs: 'text-xs',\n  sm: 'text-sm',\n  md: 'text-base',\n  lg: 'text-lg',\n} as const\n\nconst sizing = computed(() => {\n  // Unstyled owns no box, so it takes no size: the app's own classes decide.\n  if (variant === 'unstyled') return ''\n  if (variant === 'link') return LINK_SIZE_CLASS[size]\n  if (variant === 'row') return ROW_SIZE_CLASS[size]\n  return icon ? ICON_SIZE_CLASS[size] : SIZE_CLASS[size]\n})\n\n/* The variants with an \"off\" look, and what \"on\" looks like for them. The\n   filled ones are already on; link and unstyled have no surface to fill. */\nconst PRESSED_CLASS: Partial<Record<string, string>> = {\n  ghost: 'bg-primary text-white hover:bg-primary/90',\n  quiet: 'bg-primary text-white hover:bg-primary/90',\n  secondary: 'bg-primary border-primary text-white hover:bg-primary/90',\n  /* A selected row is filled, not recoloured: the line stays a line, and the\n     fill is what a list uses to say \"this one\". Filling it with the primary\n     colour instead would make one row of a list shout. */\n  row: 'w-full justify-start text-left bg-muted text-ink hover:bg-muted',\n}\n\nconst surface = computed(() => {\n  if (pressed === true) return PRESSED_CLASS[variant] ?? VARIANT_CLASS[variant]\n\n  /* Destructive tints its own fill rather than borrowing the neutral one: a\n     red glyph on a grey wash reads as two different states at once. */\n  if (variant === 'destructive') return `${VARIANT_CLASS.destructive} hover:bg-negative/10`\n\n  return VARIANT_CLASS[variant]\n})\n\n/* Layout and feel, which unstyled does not impose either — but the focus ring\n   and the disabled handling stay, because those are the floor. A raw <button>\n   is what happens when a component makes them optional.\n   \n   Colour is in the transition, not just transform. Every variant here changes\n   colour on hover and none of them animated it, so every button in every\n   consuming app snapped while the hand-written controls beside them faded —\n   `transition-colors` appears 106 times across the three apps, which is the\n   convention this component was the only thing not following. */\nconst shell = computed(() => {\n  if (variant === 'unstyled') return ''\n\n  const feel = 'transition-[transform,color,background-color,border-color] duration-100 select-none'\n\n  /* A row does not press. Scaling a full-width line looks like the list itself\n     flinched, and every hand-written row in the apps animated colour only. */\n  if (variant === 'row') return `inline-flex items-center gap-2 font-medium ${feel}`\n\n  return `inline-flex items-center justify-center gap-2 font-medium ${feel} active:scale-95`\n})\n\nconst radius = computed(() => {\n  if (variant === 'unstyled') return ''\n  if (variant === 'link') return 'rounded-xs'\n  return pill ? 'rounded-full' : 'rounded-card'\n})\n\n/** Anything that is not a `<button>` cannot be `disabled`; it has to be told. */\nconst inactive = computed(() => disabled || loading)\n\nconst linkProps = computed(() => {\n  if (as === 'router-link') return { to }\n  // The href is dropped rather than kept alongside aria-disabled: an anchor\n  // without one is not focusable and not activatable, which is the whole of\n  // what \"disabled\" means for a link.\n  if (as === 'a') return inactive.value ? {} : { href }\n  return {}\n})\n</script>\n\n<template>\n  <component\n    :is=\"as\"\n    v-bind=\"linkProps\"\n    :type=\"as === 'button' ? type : undefined\"\n    :disabled=\"as === 'button' ? inactive : undefined\"\n    :aria-disabled=\"as !== 'button' && inactive ? 'true' : undefined\"\n    :aria-busy=\"loading\"\n    :aria-pressed=\"pressed === undefined ? undefined : String(pressed)\"\n    class=\"focus-visible:outline-primary focus-visible:outline-2 focus-visible:outline-offset-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50\"\n    :class=\"[shell, surface, sizing, radius, block ? 'w-full' : '']\"\n  >\n    <span\n      v-if=\"loading\"\n      class=\"size-4 animate-spin rounded-full border-2 border-current border-t-transparent\"\n      aria-hidden=\"true\"\n    />\n    <slot />\n  </component>\n</template>\n","<script setup lang=\"ts\">\nimport { computed } from 'vue'\n\n/**\n * The kit's button, and — when asked — its link.\n *\n * `as` exists because a button and a link are the same shape and a different\n * element, and the app was resolving that by nesting them: a consumer had\n * `<RouterLink><BaseButton>` in every call to action, which is an `<a>` around\n * a `<button>`. That is invalid HTML, two stops in the tab order and two\n * controls to a screen reader, for one thing on the screen. Whether something\n * navigates is the app's decision; carrying it is this component's job.\n *\n * `router-link` is resolved by name rather than imported, so `vue-router` stays\n * the optional peer it is. Only an app that passes `as=\"router-link\"` needs it,\n * and an app that passes it has it.\n */\nconst {\n  as = 'button',\n  variant = 'primary',\n  size = 'md',\n  loading = false,\n  disabled = false,\n  type = 'button',\n  icon = false,\n  block = false,\n  pill = false,\n  pressed = undefined,\n  to = undefined,\n  href = undefined,\n} = defineProps<{\n  /** What to render. `button` unless this navigates. */\n  as?: 'button' | 'a' | 'router-link' | undefined\n  /**\n   * `link` is a real action that should read as text — \"clear this note\",\n   * \"remove\", \"change category\". It has no surface at all, so it also has no\n   * height and no padding: giving it either would make it a ghost button,\n   * which is a different thing and was already here.\n   */\n  variant?:\n    | 'primary'\n    | 'secondary'\n    | 'ghost'\n    | 'quiet'\n    | 'destructive'\n    | 'row'\n    | 'danger'\n    | 'positive'\n    | 'warning'\n    | 'accent'\n    | 'link'\n    | 'unstyled'\n    | undefined\n  /** `xs` is the action inside a prompt or a nudge, not on a page. */\n  size?: 'xs' | 'sm' | 'md' | 'lg' | undefined\n  loading?: boolean | undefined\n  disabled?: boolean | undefined\n  /** Ignored unless `as` is `button`. */\n  type?: 'button' | 'submit' | undefined\n  /**\n   * Square, sized to its icon, with no label beside it.\n   *\n   * **Pass `aria-label`.** An icon on its own has no accessible name, and a\n   * control a screen reader announces as \"button\" is not usable. Attributes\n   * fall through, so `aria-label` lands where it should — nothing here can\n   * check that you passed one, which is why it is said this loudly.\n   */\n  icon?: boolean | undefined\n  /** Fills its container. The ordinary case under a form. */\n  block?: boolean | undefined\n  /** For `as=\"router-link\"`. */\n  to?: string | Record<string, unknown> | undefined\n  /** For `as=\"a\"`. */\n  href?: string | undefined\n  /**\n   * Fully rounded rather than card-cornered.\n   *\n   * Every install prompt, update prompt and nudge across the apps used the\n   * same pair — a filled pill to act and a quiet one to dismiss — and none of\n   * them could use this component, because it only knew one corner radius.\n   */\n  pill?: boolean | undefined\n  /**\n   * That this button is a switch, and whether it is on.\n   *\n   * Omit it and the button is an action. Pass it and the button becomes a\n   * toggle: `aria-pressed` is written, and the variants that have an \"off\"\n   * look — ghost, quiet, secondary — take a filled one when on.\n   *\n   * There were 18 of these hand-written across the three apps, every one a\n   * picker cell or a filter chip, and almost none of them said `aria-pressed`\n   * at all. A screen reader met a row of identical buttons with no way to know\n   * which was chosen.\n   */\n  pressed?: boolean | undefined\n}>()\n\nconst VARIANT_CLASS = {\n  primary: 'bg-primary text-white hover:bg-primary/90',\n  /*\n   * An action that is real but not the one being urged.\n   *\n   * `ghost` had been standing in for this and cannot: with no border and no\n   * fill it reads as text, so \"Save draft\" sitting next to \"Publish\" looked\n   * like a caption rather than the other half of a choice. Ghost is for a\n   * control that should recede until it is wanted — a toolbar, a menu row —\n   * and that is a different job.\n   */\n  secondary: 'border-hair bg-surface text-ink border hover:bg-muted',\n  ghost: 'bg-transparent text-ink hover:bg-muted',\n  /*\n   * Quiet until you reach for it, and then plainly destructive: a delete at\n   * the end of a row, a \"remove this note\", an archive.\n   *\n   * Not `danger`, which is filled and shouts before it is needed — a red\n   * button in a list of rows makes the list look like a warning. And not\n   * `quiet` with a `hover:text-negative` class beside it, which is how all\n   * three apps were doing it: that class and the variant's own\n   * `hover:text-ink` set the same property at the same specificity, so which\n   * one wins depends on the order they happen to land in the stylesheet.\n   *\n   * Fifteen of these across the three apps, and every one of them was that\n   * coin toss.\n   */\n  destructive: 'bg-transparent text-ink-soft hover:text-negative',\n  /*\n   * A line in a list that is also a control: a settings row, a node in a tree,\n   * a heading that opens something.\n   *\n   * Full width, aligned to the start, and a hover that fills the whole line\n   * rather than a box inside it. Every app had written this — `.tree-row`,\n   * `.row`, `.header-action` — because a button that centres its content\n   * cannot be a row, and the alignment is the only thing that had to change.\n   *\n   * Padding stays the app's: a menu row and a tree node are not the same\n   * height, and the kit has no opinion about which one this is.\n   */\n  row: 'w-full justify-start text-left bg-transparent text-ink hover:bg-muted',\n  /*\n   * The control that is present without asking for attention: a dismiss beside\n   * an install prompt, a chevron beside a month, a delete at the end of a row.\n   *\n   * `ghost` is not this. Ghost keeps full-strength ink; this one starts soft\n   * and darkens, which is the difference between a control waiting to be used\n   * and one that is merely available. The pair `text-ink-soft hover:text-ink`\n   * was hand-written 47 times across the three apps.\n   *\n   * It fills on hover, and 0.11.0 got that half-right by fill... only for\n   * icons. The evidence said otherwise once the third app was read: an editor\n   * toolbar's buttons carry text and fill exactly the same way. The shape is\n   * \"a control in a strip\", not \"a control with a glyph in it\". A text action\n   * that should have no surface at all is `link`.\n   */\n  quiet: 'bg-transparent text-ink-soft hover:bg-muted hover:text-ink',\n  danger: 'bg-negative text-white hover:bg-negative/90',\n  /*\n   * The rest of the roles the kit already declares.\n   *\n   * `tokens.css` names five colour roles and this component exposed two of\n   * them, so an app that wanted a success-coloured action had to hand-write\n   * the button — which is what Hibi's green install button is. A component\n   * that cannot use a role its own design system declares is not avoiding a\n   * guess; it is incomplete.\n   */\n  positive: 'bg-positive text-white hover:bg-positive/90',\n  warning: 'bg-warning text-white hover:bg-warning/90',\n  accent: 'bg-accent text-white hover:bg-accent/90',\n  /* No fill, no border, no box: underlined so it is still obviously a control\n     without one. `ghost` cannot stand in — it has a hover surface and a\n     radius, so it reads as a button that happens to be empty. */\n  link: 'bg-transparent underline underline-offset-2 hover:opacity-80',\n  /*\n   * Everything this component is, except the paint.\n   *\n   * The reason it exists is measurable: across the three apps there were 58\n   * raw `<button>` elements sitting in 24 files that already imported and used\n   * `BaseButton`. The developer reached for the kit and gave up halfway down\n   * the same file — because the kit offered all of its appearance or none of\n   * itself, and what those places needed was everything but the appearance.\n   *\n   * A picker cell, a chip, a calendar day: the surface is the app's, and it\n   * should be. The element, the focus ring, the disabled handling, the\n   * `aria-pressed` bookkeeping and the `as` switch are not, and were being\n   * rewritten every time — usually without the focus ring.\n   */\n  unstyled: '',\n} as const\n\n/* Two scales, because a square control cannot take horizontal padding and\n   still be square. `lg` is here for a wide page's call to action: a 44px\n   button is right under a thumb and undersized under a headline. */\nconst SIZE_CLASS = {\n  xs: 'h-8 px-3 text-xs',\n  sm: 'h-9 px-3 text-sm',\n  md: 'h-11 px-4 text-base',\n  lg: 'h-14 px-6 text-lg',\n} as const\n\nconst ICON_SIZE_CLASS = {\n  xs: 'size-8 text-xs',\n  sm: 'size-9 text-sm',\n  md: 'size-11 text-base',\n  lg: 'size-14 text-lg',\n} as const\n\n/* A row is sized by its padding, not by a height. A settings line holds one\n   line of text and a tree node can hold two, and a fixed height turns the\n   second into an overflow. */\nconst ROW_SIZE_CLASS = {\n  xs: 'px-2 py-1.5 text-xs',\n  sm: 'px-3 py-2 text-sm',\n  md: 'px-3 py-2.5 text-base',\n  lg: 'px-4 py-3 text-lg',\n} as const\n\n/* A link takes the type size and nothing else. Height and padding are what\n   make a surface, and this variant is the one without one. */\nconst LINK_SIZE_CLASS = {\n  xs: 'text-xs',\n  sm: 'text-sm',\n  md: 'text-base',\n  lg: 'text-lg',\n} as const\n\nconst sizing = computed(() => {\n  // Unstyled owns no box, so it takes no size: the app's own classes decide.\n  if (variant === 'unstyled') return ''\n  if (variant === 'link') return LINK_SIZE_CLASS[size]\n  if (variant === 'row') return ROW_SIZE_CLASS[size]\n  return icon ? ICON_SIZE_CLASS[size] : SIZE_CLASS[size]\n})\n\n/* The variants with an \"off\" look, and what \"on\" looks like for them. The\n   filled ones are already on; link and unstyled have no surface to fill. */\nconst PRESSED_CLASS: Partial<Record<string, string>> = {\n  ghost: 'bg-primary text-white hover:bg-primary/90',\n  quiet: 'bg-primary text-white hover:bg-primary/90',\n  secondary: 'bg-primary border-primary text-white hover:bg-primary/90',\n  /* A selected row is filled, not recoloured: the line stays a line, and the\n     fill is what a list uses to say \"this one\". Filling it with the primary\n     colour instead would make one row of a list shout. */\n  row: 'w-full justify-start text-left bg-muted text-ink hover:bg-muted',\n}\n\nconst surface = computed(() => {\n  if (pressed === true) return PRESSED_CLASS[variant] ?? VARIANT_CLASS[variant]\n\n  /* Destructive tints its own fill rather than borrowing the neutral one: a\n     red glyph on a grey wash reads as two different states at once. */\n  if (variant === 'destructive') return `${VARIANT_CLASS.destructive} hover:bg-negative/10`\n\n  return VARIANT_CLASS[variant]\n})\n\n/* Layout and feel, which unstyled does not impose either — but the focus ring\n   and the disabled handling stay, because those are the floor. A raw <button>\n   is what happens when a component makes them optional.\n   \n   Colour is in the transition, not just transform. Every variant here changes\n   colour on hover and none of them animated it, so every button in every\n   consuming app snapped while the hand-written controls beside them faded —\n   `transition-colors` appears 106 times across the three apps, which is the\n   convention this component was the only thing not following. */\nconst shell = computed(() => {\n  if (variant === 'unstyled') return ''\n\n  const feel = 'transition-[transform,color,background-color,border-color] duration-100 select-none'\n\n  /* A row does not press. Scaling a full-width line looks like the list itself\n     flinched, and every hand-written row in the apps animated colour only. */\n  if (variant === 'row') return `inline-flex items-center gap-2 font-medium ${feel}`\n\n  return `inline-flex items-center justify-center gap-2 font-medium ${feel} active:scale-95`\n})\n\nconst radius = computed(() => {\n  if (variant === 'unstyled') return ''\n  if (variant === 'link') return 'rounded-xs'\n  return pill ? 'rounded-full' : 'rounded-card'\n})\n\n/** Anything that is not a `<button>` cannot be `disabled`; it has to be told. */\nconst inactive = computed(() => disabled || loading)\n\nconst linkProps = computed(() => {\n  if (as === 'router-link') return { to }\n  // The href is dropped rather than kept alongside aria-disabled: an anchor\n  // without one is not focusable and not activatable, which is the whole of\n  // what \"disabled\" means for a link.\n  if (as === 'a') return inactive.value ? {} : { href }\n  return {}\n})\n</script>\n\n<template>\n  <component\n    :is=\"as\"\n    v-bind=\"linkProps\"\n    :type=\"as === 'button' ? type : undefined\"\n    :disabled=\"as === 'button' ? inactive : undefined\"\n    :aria-disabled=\"as !== 'button' && inactive ? 'true' : undefined\"\n    :aria-busy=\"loading\"\n    :aria-pressed=\"pressed === undefined ? undefined : String(pressed)\"\n    class=\"focus-visible:outline-primary focus-visible:outline-2 focus-visible:outline-offset-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50\"\n    :class=\"[shell, surface, sizing, radius, block ? 'w-full' : '']\"\n  >\n    <span\n      v-if=\"loading\"\n      class=\"size-4 animate-spin rounded-full border-2 border-current border-t-transparent\"\n      aria-hidden=\"true\"\n    />\n    <slot />\n  </component>\n</template>\n","<script setup lang=\"ts\">\nimport { ChevronRight } from 'lucide-vue-next'\nimport type { Component } from 'vue'\n\n/**\n * One line in a settings card.\n *\n * `as` decides the element: a row that navigates has to be a button, and a row\n * that merely holds a control must not be, or the control becomes unreachable.\n */\nconst {\n  label,\n  description = '',\n  icon = undefined,\n  interactive = false,\n  stacked = false,\n} = defineProps<{\n  label: string\n  description?: string | undefined\n  icon?: Component | undefined\n  /** Renders the row as a button with a chevron. */\n  interactive?: boolean | undefined\n  /** Puts the control on its own line below the label, for wide controls. */\n  stacked?: boolean | undefined\n}>()\n\nconst emit = defineEmits<{ click: [] }>()\n</script>\n\n<template>\n  <component\n    :is=\"interactive ? 'button' : 'div'\"\n    :type=\"interactive ? 'button' : undefined\"\n    class=\"flex w-full items-center gap-3 px-4 py-3 text-left\"\n    :class=\"[\n      interactive ? 'hover:bg-muted/60 transition-colors active:scale-[0.99]' : '',\n      stacked ? 'flex-col items-stretch gap-3' : '',\n    ]\"\n    @click=\"interactive && emit('click')\"\n  >\n    <div class=\"flex items-center gap-3\">\n      <span\n        v-if=\"icon\"\n        class=\"bg-muted text-ink-soft flex size-9 shrink-0 items-center justify-center rounded-xl\"\n        aria-hidden=\"true\"\n      >\n        <component :is=\"icon\" class=\"size-[18px]\" />\n      </span>\n\n      <div class=\"min-w-0 flex-1\">\n        <p class=\"text-ink text-sm font-medium\">{{ label }}</p>\n        <p v-if=\"description\" class=\"text-ink-soft mt-0.5 text-xs leading-snug\">\n          {{ description }}\n        </p>\n      </div>\n\n      <div v-if=\"!stacked\" class=\"shrink-0\"><slot /></div>\n\n      <ChevronRight v-if=\"interactive\" class=\"text-ink-soft size-4 shrink-0\" aria-hidden=\"true\" />\n    </div>\n\n    <div v-if=\"stacked\"><slot /></div>\n  </component>\n</template>\n","<script setup lang=\"ts\">\nimport { ChevronRight } from 'lucide-vue-next'\nimport type { Component } from 'vue'\n\n/**\n * One line in a settings card.\n *\n * `as` decides the element: a row that navigates has to be a button, and a row\n * that merely holds a control must not be, or the control becomes unreachable.\n */\nconst {\n  label,\n  description = '',\n  icon = undefined,\n  interactive = false,\n  stacked = false,\n} = defineProps<{\n  label: string\n  description?: string | undefined\n  icon?: Component | undefined\n  /** Renders the row as a button with a chevron. */\n  interactive?: boolean | undefined\n  /** Puts the control on its own line below the label, for wide controls. */\n  stacked?: boolean | undefined\n}>()\n\nconst emit = defineEmits<{ click: [] }>()\n</script>\n\n<template>\n  <component\n    :is=\"interactive ? 'button' : 'div'\"\n    :type=\"interactive ? 'button' : undefined\"\n    class=\"flex w-full items-center gap-3 px-4 py-3 text-left\"\n    :class=\"[\n      interactive ? 'hover:bg-muted/60 transition-colors active:scale-[0.99]' : '',\n      stacked ? 'flex-col items-stretch gap-3' : '',\n    ]\"\n    @click=\"interactive && emit('click')\"\n  >\n    <div class=\"flex items-center gap-3\">\n      <span\n        v-if=\"icon\"\n        class=\"bg-muted text-ink-soft flex size-9 shrink-0 items-center justify-center rounded-xl\"\n        aria-hidden=\"true\"\n      >\n        <component :is=\"icon\" class=\"size-[18px]\" />\n      </span>\n\n      <div class=\"min-w-0 flex-1\">\n        <p class=\"text-ink text-sm font-medium\">{{ label }}</p>\n        <p v-if=\"description\" class=\"text-ink-soft mt-0.5 text-xs leading-snug\">\n          {{ description }}\n        </p>\n      </div>\n\n      <div v-if=\"!stacked\" class=\"shrink-0\"><slot /></div>\n\n      <ChevronRight v-if=\"interactive\" class=\"text-ink-soft size-4 shrink-0\" aria-hidden=\"true\" />\n    </div>\n\n    <div v-if=\"stacked\"><slot /></div>\n  </component>\n</template>\n"],"mappings":"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"}

package/dist/app/AuthShell.vue.d.ts

@@ -0,0 +1,29 @@
+/**
+ * The frame every sign-in screen sits in.
+ *
+ * A brand mark, a narrow column, and the language links pinned to the bottom.
+ * The two phone apps had this file character for character — thirty-seven
+ * lines, no difference at all — and the only thing either would want to change
+ * is what goes in the slots.
+ *
+ * The language links matter more than they look. Sign-in is the first screen a
+ * new user sees and Settings is behind it, so without a way to switch here,
+ * somebody who does not read the browser's language cannot get to one.
+ */
+type __VLS_Slots = {
+    /** The brand mark. */
+    brand?: () => unknown;
+    /** The form. */
+    default: () => unknown;
+    /** The language links, or anything else that belongs at the foot. */
+    foot?: () => unknown;
+};
+declare const __VLS_base: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/app/LocaleSheet.vue.d.ts

@@ -0,0 +1,36 @@
+/**
+ * Choosing the interface language, from a settings row.
+ *
+ * A sheet rather than a segmented control: past four options a row of pills
+ * stops being readable, and the list of languages only grows.
+ *
+ * Both phone apps had this, 96% identical. What differed was one colour class.
+ *
+ * The labels are the caller's, and they should be **endonyms** — a language is
+ * always listed in its own language, so someone who cannot read the current
+ * interface can still find theirs. The kit cannot know them.
+ */
+type __VLS_Props = {
+    /** The settings row's label, and the sheet's title. */
+    label: string;
+    hint?: string | undefined;
+    /** What "follow the device" is called. Its value is `system`. */
+    systemLabel: string;
+    /** In the order they should be listed. Labels are endonyms. */
+    options: readonly {
+        value: string;
+        label: string;
+    }[];
+    closeLabel?: string | undefined;
+};
+type __VLS_ModelProps = {
+    modelValue: string;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (value: string) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: (value: string) => any;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/app/TourShell.vue.d.ts

@@ -0,0 +1,74 @@
+/**
+ * The frame an onboarding guide runs inside.
+ *
+ * Both phone apps had this, 296 lines, 94% identical — and what differed was
+ * every part that should: the slides, the wash colours, the illustrations. What
+ * did not differ is here.
+ *
+ * The parts that are easy to get wrong and were written twice:
+ *
+ * - **`inert` on the app behind it.** Without it, Tab walks into a screen the
+ *   reader cannot see. The same trick `BaseSheet` uses, and it has to be undone
+ *   on unmount or the whole app stays inert forever.
+ * - **Focusing the dialog**, which is the only reason the arrow keys work.
+ * - **The direction.** A guide that can jump to slide two from slide seven has
+ *   to animate backwards, so the transition name follows the index rather than
+ *   the button that was pressed.
+ * - **A segmented track, not dots.** Ten slides is a sequence with a length,
+ *   and the reader deserves to see how much is left.
+ *
+ * Every string is a prop and the slide is a slot: the kit renders the frame and
+ * knows nothing about what is being explained.
+ */
+type __VLS_Props = {
+    /** Which slide, zero-based. */
+    index: number;
+    total: number;
+    /** The dialog's accessible name. */
+    dialogLabel: string;
+    skipLabel: string;
+    backLabel: string;
+    nextLabel: string;
+    /** The button on the final slide — "Start", rather than "Next". */
+    lastLabel: string;
+    /** Names one segment for a screen reader, e.g. `(n) => \`Step ${n} of ${total}\``. */
+    stepLabel: (position: number) => string;
+    /**
+     * Where the dialog goes. A phone shell clips its children, so the guide has
+     * to leave the tree to cover the tab bar and the header alike.
+     */
+    teleportTo?: string | undefined;
+};
+type __VLS_ModelProps = {
+    modelValue: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare var __VLS_13: {}, __VLS_29: {
+    index: number;
+};
+type __VLS_Slots = {} & {
+    wash?: (props: typeof __VLS_13) => any;
+} & {
+    default?: (props: typeof __VLS_29) => any;
+};
+declare const __VLS_base: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (value: boolean) => any;
+    dismiss: () => any;
+    next: () => any;
+    back: () => any;
+    goTo: (position: number) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: (value: boolean) => any;
+    onDismiss?: () => any;
+    onNext?: () => any;
+    onBack?: () => any;
+    onGoTo?: (position: number) => any;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/app/index.d.ts

@@ -0,0 +1,18 @@
+/**
+ * rei-kit/app — the parts a phone app is made of.
+ *
+ * Separate from the main entry because these are not primitives: they assume
+ * an app with tabs, an account and a sign-in screen. A wide site importing the
+ * kit should not have to know they exist.
+ *
+ * Everything here came out of two apps that had written it identically —
+ * `AuthShell` was thirty-seven lines with no difference at all between them,
+ * the tab transition thirty-four. What differs between two phone apps is the
+ * product; this is the part underneath it.
+ */
+export { default as AuthShell } from './AuthShell.vue';
+export { default as LocaleSheet } from './LocaleSheet.vue';
+export { default as TourShell } from './TourShell.vue';
+export { createTabTransition } from './use-tab-transition';
+export type { SlideDirection } from './use-tab-transition';
+export { useThemeSync } from './use-theme-sync';

package/dist/app/use-tab-transition.d.ts

@@ -0,0 +1,52 @@
+/** Which way the screens slide during a tab change. */
+export type SlideDirection = 'forward' | 'backward' | 'none';
+/**
+ * Which way a tabbed app is moving.
+ *
+ * A phone app slides sideways between its tabs, and the direction has to come
+ * from somewhere: going from the second tab to the fourth is forward, the
+ * other way is back, and arriving from nowhere is neither. That is index
+ * arithmetic over the tab order, and it was written twice, identically, in the
+ * two phone apps this kit came from — thirty-four lines each, byte for byte
+ * the same.
+ *
+ * Generic over the tab key, so the app keeps its own union and the kit never
+ * learns what a tab is called.
+ *
+ * @example
+ * ```ts
+ * // shared/lib/tabs.ts
+ * export const tabs = createTabTransition(['today', 'week', 'year', 'profile'] as const)
+ *
+ * // the router guard
+ * router.afterEach((to, from) => tabs.resolve(to.meta.tab, from.meta.tab))
+ *
+ * // App.vue
+ * const name = computed(() =>
+ *   tabs.direction.value === 'none' ? '' : `slide-${tabs.direction.value}`,
+ * )
+ * ```
+ *
+ * The `slide-forward-*` and `slide-backward-*` classes those names refer to
+ * ship in `rei-kit/shell/mobile.css`.
+ */
+export declare function createTabTransition<K extends string>(order: readonly K[]): {
+    /** Direction of the current tab change. Read by the route transition. */
+    direction: Readonly<import('vue').Ref<SlideDirection, SlideDirection>>;
+    /**
+     * Resolves the direction for a navigation. Call once per route change.
+     *
+     * @param to - Tab being entered, if the route has one.
+     * @param from - Tab being left, if the route had one.
+     */
+    resolve(to: K | undefined, from: K | undefined): void;
+    /**
+     * Forces the next navigation's direction, whatever the indices say.
+     *
+     * For the navigations that are not a tab change at heart: going back from
+     * a detail screen, or being sent to sign-in. Without it, leaving a detail
+     * page under the fourth tab for the first tab slides backward, which is
+     * right, and arriving there slides forward, which is not.
+     */
+    force(next: SlideDirection): void;
+};

package/dist/app/use-theme-sync.d.ts

@@ -0,0 +1,23 @@
+import { Ref } from 'vue';
+/**
+ * Adopts the theme stored on the account, once, as soon as it arrives.
+ *
+ * Two things make this worth a component rather than four lines at a call
+ * site, and both are about *once*.
+ *
+ * It has to run at the app root rather than on the settings screen, or a user
+ * on a fresh device keeps the system theme until they happen to open Profile.
+ * And it has to run once and never again, or a later refetch of the profile
+ * undoes a choice the user has just made locally — the theme flips back under
+ * them a second after they set it, which reads as the app fighting them.
+ *
+ * The source is a ref rather than a query, so the kit never learns what a
+ * profile is or where it came from.
+ *
+ * @example
+ * ```ts
+ * const { data: profile } = useProfile()
+ * useThemeSync(computed(() => profile.value?.theme))
+ * ```
+ */
+export declare function useThemeSync(stored: Ref<string | null | undefined>): void;