rei-kit 0.12.0 → 0.13.0

package/dist/pwa/InstallPrompt.vue.d.ts

@@ -0,0 +1,26 @@
+/**
+ * The card that offers to install the app, and remembers being turned down.
+ *
+ * Both phone apps had this, 111 lines, differing in a storage key and a colour.
+ * What is here is the part that was the same: the three-way platform check, the
+ * week-long snooze, and the shape.
+ *
+ * Every string is a prop. The kit does not know a language, and "Add to Home
+ * Screen" is a sentence about a platform, not about this component.
+ */
+type __VLS_Props = {
+    /** Where the dismissal is remembered. Namespace it: `hibi-install-nudge`. */
+    storageKey: string;
+    title: string;
+    body: string;
+    /** The install button. Not shown on iOS, which has no API to call. */
+    action: string;
+    later: string;
+    /** Shown instead of `title` where the user has to use the Share menu. */
+    iosTitle?: string | undefined;
+    iosBody?: string | undefined;
+    snoozeDays?: number | undefined;
+};
+declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/pwa/UpdatePrompt.vue.d.ts

@@ -0,0 +1,48 @@
+/**
+ * The card that says a new version is waiting.
+ *
+ * `registerType: 'prompt'` means a new service worker waits rather than taking
+ * over, and this is what asks whether to apply it. Asking rather than reloading
+ * is the decision worth keeping: an automatic swap mid-sentence loses whatever
+ * was being typed.
+ *
+ * **The service worker stays the app's.** `virtual:pwa-register/vue` is a
+ * build-time module from `vite-plugin-pwa`, and a library cannot import one —
+ * so the app owns `useRegisterSW` and hands the answer down as `open`. That
+ * split is also honest: whether an update is waiting is the app's business,
+ * and what the card looks like is this component's.
+ *
+ * @example
+ * ```vue
+ * <script setup>
+ * const { needRefresh, updateServiceWorker } = useRegisterSW()
+ * <\/script>
+ *
+ * <UpdatePrompt
+ *   :open="needRefresh"
+ *   :title="t('pwa.updateTitle')"
+ *   :body="t('pwa.updateBody')"
+ *   :action="t('pwa.reload')"
+ *   :dismiss-label="t('pwa.later')"
+ *   @update="updateServiceWorker(true)"
+ *   @dismiss="needRefresh = false"
+ * />
+ * ```
+ */
+type __VLS_Props = {
+    open: boolean;
+    title: string;
+    body: string;
+    action: string;
+    /** The X's accessible name. An X on its own has none. */
+    dismissLabel: string;
+};
+declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    dismiss: () => any;
+    update: () => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onDismiss?: () => any;
+    onUpdate?: () => any;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/pwa/index.d.ts

@@ -0,0 +1,15 @@
+/**
+ * rei-kit/pwa — installing the app, and updating it.
+ *
+ * A separate entry because these reach for `beforeinstallprompt` and a service
+ * worker: an app that is a website should not download them, and the main
+ * barrel has to stay importable on a server.
+ *
+ * Both phone apps had all of this, 95–100% identical — the same three-way
+ * platform check, the same week-long snooze, the same two cards. What differed
+ * was a storage key and a colour.
+ */
+export { useInstall, watchInstallability } from './use-install';
+export { useSnooze } from './use-snooze';
+export { default as InstallPrompt } from './InstallPrompt.vue';
+export { default as UpdatePrompt } from './UpdatePrompt.vue';

package/dist/pwa/use-install.d.ts

@@ -0,0 +1,41 @@
+/**
+ * Starts listening for the install event.
+ *
+ * **Call this from the app's entry file, not from a component.**
+ * `beforeinstallprompt` fires once, early, and only once per page load — a
+ * listener attached when a component mounts has usually already missed it.
+ *
+ * It is a function rather than module-scope side effects so the package can be
+ * imported on a server: the phone apps this came from ran it at module scope
+ * and the kit spent a release learning why that is not free.
+ *
+ * @example
+ * ```ts
+ * // main.ts
+ * import { watchInstallability } from 'rei-kit/pwa'
+ * watchInstallability()
+ * ```
+ */
+export declare function watchInstallability(): void;
+/**
+ * Adding the app to the Home Screen.
+ *
+ * Three states, because the platforms genuinely differ: Chromium hands over an
+ * event that can be triggered from a button, Safari on iOS has no API at all
+ * and needs the user walked through Share → Add to Home Screen, and everything
+ * else can only be told that installing is possible.
+ *
+ * @example
+ * ```ts
+ * const install = useInstall()
+ * if (install.canPrompt.value) await install.prompt()
+ * ```
+ */
+export declare function useInstall(): {
+    isInstalled: import('vue').ComputedRef<boolean>;
+    /** A button can open the real install sheet. */
+    canPrompt: import('vue').ComputedRef<boolean>;
+    /** No API — the user has to be shown the Share menu. */
+    needsManualSteps: import('vue').ComputedRef<boolean>;
+    prompt: () => Promise<boolean>;
+};

package/dist/pwa/use-snooze.d.ts

@@ -0,0 +1,22 @@
+/**
+ * A nudge that stops asking for a while after it is dismissed.
+ *
+ * Both phone apps had this inside their install card, identically: a date in
+ * `localStorage`, compared against today. Pulled out because the install card
+ * is not the only thing that should stop asking — a notification nudge wants
+ * exactly the same behaviour, and had exactly the same code.
+ *
+ * Storage is wrapped in try/catch on both sides. A private window or a browser
+ * set to block site data throws on access, and the honest failure there is a
+ * nudge that reappears next session rather than one that crashes the screen it
+ * is asking from.
+ *
+ * @param key - Where the date is kept. Namespace it to the app.
+ * @param days - How long to stay quiet after a dismissal.
+ */
+export declare function useSnooze(key: string, days?: number): {
+    /** False while the nudge is snoozed. */
+    isOver: import('vue').ComputedRef<boolean>;
+    /** Stop asking for `days`. */
+    snooze(): void;
+};

package/dist/pwa.js

@@ -0,0 +1,236 @@
+import { a as needsIosInstall, i as isInstalled, n as BaseButton_default, o as addDays, p as todayKey, t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper-3AcMDTtW.js";
+import { Transition, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, openBlock, ref, resolveDynamicComponent, toDisplayString, unref, withCtx } from "vue";
+import { Download, RefreshCw, Share, X } from "lucide-vue-next";
+//#region src/pwa/use-install.ts
+var deferred = ref(null);
+var installed = ref(false);
+var listening = false;
+/**
+* Starts listening for the install event.
+*
+* **Call this from the app's entry file, not from a component.**
+* `beforeinstallprompt` fires once, early, and only once per page load — a
+* listener attached when a component mounts has usually already missed it.
+*
+* It is a function rather than module-scope side effects so the package can be
+* imported on a server: the phone apps this came from ran it at module scope
+* and the kit spent a release learning why that is not free.
+*
+* @example
+* ```ts
+* // main.ts
+* import { watchInstallability } from 'rei-kit/pwa'
+* watchInstallability()
+* ```
+*/
+function watchInstallability() {
+	if (listening || typeof window === "undefined") return;
+	listening = true;
+	installed.value = isInstalled();
+	window.addEventListener("beforeinstallprompt", (event) => {
+		event.preventDefault();
+		deferred.value = event;
+	});
+	window.addEventListener("appinstalled", () => {
+		installed.value = true;
+		deferred.value = null;
+	});
+}
+/**
+* Adding the app to the Home Screen.
+*
+* Three states, because the platforms genuinely differ: Chromium hands over an
+* event that can be triggered from a button, Safari on iOS has no API at all
+* and needs the user walked through Share → Add to Home Screen, and everything
+* else can only be told that installing is possible.
+*
+* @example
+* ```ts
+* const install = useInstall()
+* if (install.canPrompt.value) await install.prompt()
+* ```
+*/
+function useInstall() {
+	async function prompt() {
+		const event = deferred.value;
+		if (!event) return false;
+		await event.prompt();
+		const { outcome } = await event.userChoice;
+		deferred.value = null;
+		return outcome === "accepted";
+	}
+	return {
+		isInstalled: computed(() => installed.value),
+		/** A button can open the real install sheet. */
+		canPrompt: computed(() => !installed.value && deferred.value !== null),
+		/** No API — the user has to be shown the Share menu. */
+		needsManualSteps: computed(() => !installed.value && needsIosInstall()),
+		prompt
+	};
+}
+//#endregion
+//#region src/pwa/use-snooze.ts
+/**
+* A nudge that stops asking for a while after it is dismissed.
+*
+* Both phone apps had this inside their install card, identically: a date in
+* `localStorage`, compared against today. Pulled out because the install card
+* is not the only thing that should stop asking — a notification nudge wants
+* exactly the same behaviour, and had exactly the same code.
+*
+* Storage is wrapped in try/catch on both sides. A private window or a browser
+* set to block site data throws on access, and the honest failure there is a
+* nudge that reappears next session rather than one that crashes the screen it
+* is asking from.
+*
+* @param key - Where the date is kept. Namespace it to the app.
+* @param days - How long to stay quiet after a dismissal.
+*/
+function useSnooze(key, days = 7) {
+	const read = () => {
+		try {
+			return localStorage.getItem(key) ?? "";
+		} catch {
+			return "";
+		}
+	};
+	const until = ref(read());
+	return {
+		/** False while the nudge is snoozed. */
+		isOver: computed(() => todayKey() >= until.value),
+		/** Stop asking for `days`. */
+		snooze() {
+			const next = addDays(todayKey(), days);
+			until.value = next;
+			try {
+				localStorage.setItem(key, next);
+			} catch {}
+		}
+	};
+}
+//#endregion
+//#region src/pwa/InstallPrompt.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1$1 = {
+	key: 0,
+	class: "border-positive/25 bg-positive/5 rounded-card flex gap-3 border p-3.5"
+};
+var _hoisted_2$1 = {
+	class: "bg-positive/15 text-positive flex size-10 shrink-0 items-center justify-center rounded-xl",
+	"aria-hidden": "true"
+};
+var _hoisted_3$1 = { class: "flex min-w-0 flex-1 flex-col gap-2" };
+var _hoisted_4$1 = { class: "text-ink text-sm font-semibold" };
+var _hoisted_5$1 = { class: "text-ink-soft mt-0.5 text-xs leading-relaxed" };
+var _hoisted_6 = { class: "flex items-center gap-2" };
+//#endregion
+//#region src/pwa/InstallPrompt.vue
+var InstallPrompt_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	__name: "InstallPrompt",
+	props: {
+		storageKey: {},
+		title: {},
+		body: {},
+		action: {},
+		later: {},
+		iosTitle: { default: "" },
+		iosBody: { default: "" },
+		snoozeDays: { default: 7 }
+	},
+	setup(__props) {
+		const { canPrompt, needsManualSteps, prompt } = useInstall();
+		const { isOver, snooze } = useSnooze(__props.storageKey, __props.snoozeDays);
+		const visible = computed(() => (canPrompt.value || needsManualSteps.value) && isOver.value);
+		async function install() {
+			await prompt();
+			snooze();
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(Transition, { name: "install" }, {
+				default: withCtx(() => [visible.value ? (openBlock(), createElementBlock("section", _hoisted_1$1, [createElementVNode("span", _hoisted_2$1, [(openBlock(), createBlock(resolveDynamicComponent(unref(needsManualSteps) ? unref(Share) : unref(Download)), { class: "size-5" }))]), createElementVNode("div", _hoisted_3$1, [createElementVNode("div", null, [createElementVNode("p", _hoisted_4$1, toDisplayString(unref(needsManualSteps) && __props.iosTitle ? __props.iosTitle : __props.title), 1), createElementVNode("p", _hoisted_5$1, toDisplayString(unref(needsManualSteps) && __props.iosBody ? __props.iosBody : __props.body), 1)]), createElementVNode("div", _hoisted_6, [unref(canPrompt) ? (openBlock(), createBlock(BaseButton_default, {
+					key: 0,
+					variant: "positive",
+					pill: "",
+					size: "xs",
+					class: "font-semibold",
+					onClick: install
+				}, {
+					default: withCtx(() => [createTextVNode(toDisplayString(__props.action), 1)]),
+					_: 1
+				})) : createCommentVNode("", true), createVNode(BaseButton_default, {
+					pill: "",
+					size: "xs",
+					variant: "quiet",
+					onClick: unref(snooze)
+				}, {
+					default: withCtx(() => [createTextVNode(toDisplayString(__props.later), 1)]),
+					_: 1
+				}, 8, ["onClick"])])])])) : createCommentVNode("", true)]),
+				_: 1
+			});
+		};
+	}
+}), [["__scopeId", "data-v-34c86300"]]);
+//#endregion
+//#region src/pwa/UpdatePrompt.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = {
+	key: 0,
+	class: "update-card",
+	role: "status"
+};
+var _hoisted_2 = {
+	class: "update-icon",
+	"aria-hidden": "true"
+};
+var _hoisted_3 = { class: "min-w-0 flex-1" };
+var _hoisted_4 = { class: "text-ink text-sm font-semibold" };
+var _hoisted_5 = { class: "text-ink-soft text-xs leading-snug" };
+//#endregion
+//#region src/pwa/UpdatePrompt.vue
+var UpdatePrompt_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	__name: "UpdatePrompt",
+	props: {
+		open: { type: Boolean },
+		title: {},
+		body: {},
+		action: {},
+		dismissLabel: {}
+	},
+	emits: ["update", "dismiss"],
+	setup(__props) {
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(Transition, { name: "update" }, {
+				default: withCtx(() => [__props.open ? (openBlock(), createElementBlock("aside", _hoisted_1, [
+					createElementVNode("span", _hoisted_2, [createVNode(unref(RefreshCw), { class: "size-4" })]),
+					createElementVNode("div", _hoisted_3, [createElementVNode("p", _hoisted_4, toDisplayString(__props.title), 1), createElementVNode("p", _hoisted_5, toDisplayString(__props.body), 1)]),
+					createVNode(BaseButton_default, {
+						variant: "primary",
+						pill: "",
+						size: "xs",
+						class: "shrink-0 font-semibold",
+						onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("update"))
+					}, {
+						default: withCtx(() => [createTextVNode(toDisplayString(__props.action), 1)]),
+						_: 1
+					}),
+					createVNode(BaseButton_default, {
+						variant: "quiet",
+						icon: "",
+						pill: "",
+						size: "sm",
+						class: "shrink-0",
+						"aria-label": __props.dismissLabel,
+						onClick: _cache[1] || (_cache[1] = ($event) => _ctx.$emit("dismiss"))
+					}, {
+						default: withCtx(() => [createVNode(unref(X), { class: "size-4" })]),
+						_: 1
+					}, 8, ["aria-label"])
+				])) : createCommentVNode("", true)]),
+				_: 1
+			});
+		};
+	}
+}), [["__scopeId", "data-v-7cf60526"]]);
+//#endregion
+export { InstallPrompt_default as InstallPrompt, UpdatePrompt_default as UpdatePrompt, useInstall, useSnooze, watchInstallability };
+
+//# sourceMappingURL=pwa.js.map

package/dist/pwa.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pwa.js","names":["$emit"],"sources":["../src/pwa/use-install.ts","../src/pwa/use-snooze.ts","../src/pwa/InstallPrompt.vue","../src/pwa/InstallPrompt.vue","../src/pwa/UpdatePrompt.vue","../src/pwa/UpdatePrompt.vue"],"sourcesContent":["import { computed, ref } from 'vue'\n\nimport { isInstalled, needsIosInstall } from '../utils/platform'\n\n/**\n * The event Chromium fires when it decides the app is installable.\n *\n * Not in lib.dom yet, and it is the only way to trigger the install sheet from\n * the app's own button rather than the browser's.\n */\ninterface BeforeInstallPromptEvent extends Event {\n  prompt: () => Promise<void>\n  userChoice: Promise<{ outcome: 'accepted' | 'dismissed' }>\n}\n\nconst deferred = ref<BeforeInstallPromptEvent | null>(null)\nconst installed = ref(false)\n\nlet listening = false\n\n/**\n * Starts listening for the install event.\n *\n * **Call this from the app's entry file, not from a component.**\n * `beforeinstallprompt` fires once, early, and only once per page load — a\n * listener attached when a component mounts has usually already missed it.\n *\n * It is a function rather than module-scope side effects so the package can be\n * imported on a server: the phone apps this came from ran it at module scope\n * and the kit spent a release learning why that is not free.\n *\n * @example\n * ```ts\n * // main.ts\n * import { watchInstallability } from 'rei-kit/pwa'\n * watchInstallability()\n * ```\n */\nexport function watchInstallability(): void {\n  if (listening || typeof window === 'undefined') return\n\n  listening = true\n  installed.value = isInstalled()\n\n  window.addEventListener('beforeinstallprompt', (event) => {\n    // Without this the browser shows its own bar, and then the app's card and\n    // the browser's bar are both on screen saying the same thing.\n    event.preventDefault()\n    deferred.value = event as BeforeInstallPromptEvent\n  })\n\n  window.addEventListener('appinstalled', () => {\n    installed.value = true\n    deferred.value = null\n  })\n}\n\n/**\n * Adding the app to the Home Screen.\n *\n * Three states, because the platforms genuinely differ: Chromium hands over an\n * event that can be triggered from a button, Safari on iOS has no API at all\n * and needs the user walked through Share → Add to Home Screen, and everything\n * else can only be told that installing is possible.\n *\n * @example\n * ```ts\n * const install = useInstall()\n * if (install.canPrompt.value) await install.prompt()\n * ```\n */\nexport function useInstall() {\n  async function prompt(): Promise<boolean> {\n    const event = deferred.value\n    if (!event) return false\n\n    await event.prompt()\n    const { outcome } = await event.userChoice\n\n    // The event is single-use: Chromium refuses a second prompt() on it.\n    deferred.value = null\n\n    return outcome === 'accepted'\n  }\n\n  return {\n    isInstalled: computed(() => installed.value),\n    /** A button can open the real install sheet. */\n    canPrompt: computed(() => !installed.value && deferred.value !== null),\n    /** No API — the user has to be shown the Share menu. */\n    needsManualSteps: computed(() => !installed.value && needsIosInstall()),\n    prompt,\n  }\n}\n","import { computed, ref } from 'vue'\n\nimport { addDays, todayKey } from '../utils/date'\n\n/**\n * A nudge that stops asking for a while after it is dismissed.\n *\n * Both phone apps had this inside their install card, identically: a date in\n * `localStorage`, compared against today. Pulled out because the install card\n * is not the only thing that should stop asking — a notification nudge wants\n * exactly the same behaviour, and had exactly the same code.\n *\n * Storage is wrapped in try/catch on both sides. A private window or a browser\n * set to block site data throws on access, and the honest failure there is a\n * nudge that reappears next session rather than one that crashes the screen it\n * is asking from.\n *\n * @param key - Where the date is kept. Namespace it to the app.\n * @param days - How long to stay quiet after a dismissal.\n */\nexport function useSnooze(key: string, days = 7) {\n  const read = (): string => {\n    try {\n      return localStorage.getItem(key) ?? ''\n    } catch {\n      return ''\n    }\n  }\n\n  const until = ref(read())\n\n  return {\n    /** False while the nudge is snoozed. */\n    isOver: computed(() => todayKey() >= until.value),\n\n    /** Stop asking for `days`. */\n    snooze(): void {\n      const next = addDays(todayKey(), days)\n      until.value = next\n\n      try {\n        localStorage.setItem(key, next)\n      } catch {\n        // Storage blocked; it reappears next session rather than never.\n      }\n    },\n  }\n}\n","<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { Download, Share } from 'lucide-vue-next'\n\nimport BaseButton from '../components/BaseButton.vue'\nimport { useInstall } from './use-install'\nimport { useSnooze } from './use-snooze'\n\n/**\n * The card that offers to install the app, and remembers being turned down.\n *\n * Both phone apps had this, 111 lines, differing in a storage key and a colour.\n * What is here is the part that was the same: the three-way platform check, the\n * week-long snooze, and the shape.\n *\n * Every string is a prop. The kit does not know a language, and \"Add to Home\n * Screen\" is a sentence about a platform, not about this component.\n */\nconst {\n  storageKey,\n  title,\n  body,\n  action,\n  later,\n  iosTitle = '',\n  iosBody = '',\n  snoozeDays = 7,\n} = defineProps<{\n  /** Where the dismissal is remembered. Namespace it: `hibi-install-nudge`. */\n  storageKey: string\n  title: string\n  body: string\n  /** The install button. Not shown on iOS, which has no API to call. */\n  action: string\n  later: string\n  /** Shown instead of `title` where the user has to use the Share menu. */\n  iosTitle?: string | undefined\n  iosBody?: string | undefined\n  snoozeDays?: number | undefined\n}>()\n\nconst { canPrompt, needsManualSteps, prompt } = useInstall()\nconst { isOver, snooze } = useSnooze(storageKey, snoozeDays)\n\nconst visible = computed(() => (canPrompt.value || needsManualSteps.value) && isOver.value)\n\nasync function install() {\n  await prompt()\n\n  // Accepted or dismissed, stop asking for a week. The prompt is what gets\n  // tiring, not the answer.\n  snooze()\n}\n</script>\n\n<template>\n  <Transition name=\"install\">\n    <section\n      v-if=\"visible\"\n      class=\"border-positive/25 bg-positive/5 rounded-card flex gap-3 border p-3.5\"\n    >\n      <span\n        class=\"bg-positive/15 text-positive flex size-10 shrink-0 items-center justify-center rounded-xl\"\n        aria-hidden=\"true\"\n      >\n        <component :is=\"needsManualSteps ? Share : Download\" class=\"size-5\" />\n      </span>\n\n      <div class=\"flex min-w-0 flex-1 flex-col gap-2\">\n        <div>\n          <p class=\"text-ink text-sm font-semibold\">\n            {{ needsManualSteps && iosTitle ? iosTitle : title }}\n          </p>\n          <p class=\"text-ink-soft mt-0.5 text-xs leading-relaxed\">\n            {{ needsManualSteps && iosBody ? iosBody : body }}\n          </p>\n        </div>\n\n        <div class=\"flex items-center gap-2\">\n          <!-- No button on iOS: Safari exposes no way to open the Share sheet\n               from script, so a button here could only fail. -->\n          <BaseButton\n            v-if=\"canPrompt\"\n            variant=\"positive\"\n            pill\n            size=\"xs\"\n            class=\"font-semibold\"\n            @click=\"install\"\n          >\n            {{ action }}\n          </BaseButton>\n\n          <BaseButton pill size=\"xs\" variant=\"quiet\" @click=\"snooze\">{{ later }}</BaseButton>\n        </div>\n      </div>\n    </section>\n  </Transition>\n</template>\n\n<style scoped>\n.install-enter-active,\n.install-leave-active {\n  transition:\n    opacity 200ms ease,\n    transform 200ms ease;\n}\n\n.install-enter-from,\n.install-leave-to {\n  opacity: 0;\n  transform: translateY(-4px);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .install-enter-from,\n  .install-leave-to {\n    transform: none;\n  }\n}\n</style>\n","<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { Download, Share } from 'lucide-vue-next'\n\nimport BaseButton from '../components/BaseButton.vue'\nimport { useInstall } from './use-install'\nimport { useSnooze } from './use-snooze'\n\n/**\n * The card that offers to install the app, and remembers being turned down.\n *\n * Both phone apps had this, 111 lines, differing in a storage key and a colour.\n * What is here is the part that was the same: the three-way platform check, the\n * week-long snooze, and the shape.\n *\n * Every string is a prop. The kit does not know a language, and \"Add to Home\n * Screen\" is a sentence about a platform, not about this component.\n */\nconst {\n  storageKey,\n  title,\n  body,\n  action,\n  later,\n  iosTitle = '',\n  iosBody = '',\n  snoozeDays = 7,\n} = defineProps<{\n  /** Where the dismissal is remembered. Namespace it: `hibi-install-nudge`. */\n  storageKey: string\n  title: string\n  body: string\n  /** The install button. Not shown on iOS, which has no API to call. */\n  action: string\n  later: string\n  /** Shown instead of `title` where the user has to use the Share menu. */\n  iosTitle?: string | undefined\n  iosBody?: string | undefined\n  snoozeDays?: number | undefined\n}>()\n\nconst { canPrompt, needsManualSteps, prompt } = useInstall()\nconst { isOver, snooze } = useSnooze(storageKey, snoozeDays)\n\nconst visible = computed(() => (canPrompt.value || needsManualSteps.value) && isOver.value)\n\nasync function install() {\n  await prompt()\n\n  // Accepted or dismissed, stop asking for a week. The prompt is what gets\n  // tiring, not the answer.\n  snooze()\n}\n</script>\n\n<template>\n  <Transition name=\"install\">\n    <section\n      v-if=\"visible\"\n      class=\"border-positive/25 bg-positive/5 rounded-card flex gap-3 border p-3.5\"\n    >\n      <span\n        class=\"bg-positive/15 text-positive flex size-10 shrink-0 items-center justify-center rounded-xl\"\n        aria-hidden=\"true\"\n      >\n        <component :is=\"needsManualSteps ? Share : Download\" class=\"size-5\" />\n      </span>\n\n      <div class=\"flex min-w-0 flex-1 flex-col gap-2\">\n        <div>\n          <p class=\"text-ink text-sm font-semibold\">\n            {{ needsManualSteps && iosTitle ? iosTitle : title }}\n          </p>\n          <p class=\"text-ink-soft mt-0.5 text-xs leading-relaxed\">\n            {{ needsManualSteps && iosBody ? iosBody : body }}\n          </p>\n        </div>\n\n        <div class=\"flex items-center gap-2\">\n          <!-- No button on iOS: Safari exposes no way to open the Share sheet\n               from script, so a button here could only fail. -->\n          <BaseButton\n            v-if=\"canPrompt\"\n            variant=\"positive\"\n            pill\n            size=\"xs\"\n            class=\"font-semibold\"\n            @click=\"install\"\n          >\n            {{ action }}\n          </BaseButton>\n\n          <BaseButton pill size=\"xs\" variant=\"quiet\" @click=\"snooze\">{{ later }}</BaseButton>\n        </div>\n      </div>\n    </section>\n  </Transition>\n</template>\n\n<style scoped>\n.install-enter-active,\n.install-leave-active {\n  transition:\n    opacity 200ms ease,\n    transform 200ms ease;\n}\n\n.install-enter-from,\n.install-leave-to {\n  opacity: 0;\n  transform: translateY(-4px);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .install-enter-from,\n  .install-leave-to {\n    transform: none;\n  }\n}\n</style>\n","<script setup lang=\"ts\">\nimport { RefreshCw, X } from 'lucide-vue-next'\n\nimport BaseButton from '../components/BaseButton.vue'\n\n/**\n * The card that says a new version is waiting.\n *\n * `registerType: 'prompt'` means a new service worker waits rather than taking\n * over, and this is what asks whether to apply it. Asking rather than reloading\n * is the decision worth keeping: an automatic swap mid-sentence loses whatever\n * was being typed.\n *\n * **The service worker stays the app's.** `virtual:pwa-register/vue` is a\n * build-time module from `vite-plugin-pwa`, and a library cannot import one —\n * so the app owns `useRegisterSW` and hands the answer down as `open`. That\n * split is also honest: whether an update is waiting is the app's business,\n * and what the card looks like is this component's.\n *\n * @example\n * ```vue\n * <script setup>\n * const { needRefresh, updateServiceWorker } = useRegisterSW()\n * <\\/script>\n *\n * <UpdatePrompt\n *   :open=\"needRefresh\"\n *   :title=\"t('pwa.updateTitle')\"\n *   :body=\"t('pwa.updateBody')\"\n *   :action=\"t('pwa.reload')\"\n *   :dismiss-label=\"t('pwa.later')\"\n *   @update=\"updateServiceWorker(true)\"\n *   @dismiss=\"needRefresh = false\"\n * />\n * ```\n */\ndefineProps<{\n  open: boolean\n  title: string\n  body: string\n  action: string\n  /** The X's accessible name. An X on its own has none. */\n  dismissLabel: string\n}>()\n\ndefineEmits<{ update: []; dismiss: [] }>()\n</script>\n\n<template>\n  <Transition name=\"update\">\n    <aside v-if=\"open\" class=\"update-card\" role=\"status\">\n      <span class=\"update-icon\" aria-hidden=\"true\">\n        <RefreshCw class=\"size-4\" />\n      </span>\n\n      <div class=\"min-w-0 flex-1\">\n        <p class=\"text-ink text-sm font-semibold\">{{ title }}</p>\n        <p class=\"text-ink-soft text-xs leading-snug\">{{ body }}</p>\n      </div>\n\n      <BaseButton\n        variant=\"primary\"\n        pill\n        size=\"xs\"\n        class=\"shrink-0 font-semibold\"\n        @click=\"$emit('update')\"\n      >\n        {{ action }}\n      </BaseButton>\n\n      <BaseButton\n        variant=\"quiet\"\n        icon\n        pill\n        size=\"sm\"\n        class=\"shrink-0\"\n        :aria-label=\"dismissLabel\"\n        @click=\"$emit('dismiss')\"\n      >\n        <X class=\"size-4\" />\n      </BaseButton>\n    </aside>\n  </Transition>\n</template>\n\n<style scoped>\n/* Sits above the tab bar and the action button, because it outranks both — but\n   absolutely inside its container, so on a desktop-sized shell it does not\n   float off into the page. Give the shell `relative`. */\n.update-card {\n  border-color: var(--color-hair);\n  background: color-mix(in srgb, var(--color-surface) 95%, transparent);\n  border-radius: var(--radius-card);\n  position: absolute;\n  left: 50%;\n  z-index: 50;\n  display: flex;\n  width: 100%;\n  max-width: 360px;\n  align-items: center;\n  gap: 0.75rem;\n  border-width: 1px;\n  padding: 0.75rem;\n  backdrop-filter: blur(12px);\n  box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1);\n  transform: translateX(-50%);\n  bottom: calc(1rem + env(safe-area-inset-bottom, 0px));\n}\n\n.update-icon {\n  background: color-mix(in srgb, var(--color-primary) 15%, transparent);\n  color: var(--color-primary);\n  display: flex;\n  height: 2.25rem;\n  width: 2.25rem;\n  flex-shrink: 0;\n  align-items: center;\n  justify-content: center;\n  border-radius: 0.75rem;\n}\n\n.update-enter-active,\n.update-leave-active {\n  transition:\n    opacity 250ms ease,\n    transform 250ms cubic-bezier(0.32, 0.72, 0, 1);\n}\n\n.update-enter-from,\n.update-leave-to {\n  opacity: 0;\n  transform: translate(-50%, 1rem);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .update-enter-from,\n  .update-leave-to {\n    transform: translate(-50%, 0);\n  }\n}\n</style>\n","<script setup lang=\"ts\">\nimport { RefreshCw, X } from 'lucide-vue-next'\n\nimport BaseButton from '../components/BaseButton.vue'\n\n/**\n * The card that says a new version is waiting.\n *\n * `registerType: 'prompt'` means a new service worker waits rather than taking\n * over, and this is what asks whether to apply it. Asking rather than reloading\n * is the decision worth keeping: an automatic swap mid-sentence loses whatever\n * was being typed.\n *\n * **The service worker stays the app's.** `virtual:pwa-register/vue` is a\n * build-time module from `vite-plugin-pwa`, and a library cannot import one —\n * so the app owns `useRegisterSW` and hands the answer down as `open`. That\n * split is also honest: whether an update is waiting is the app's business,\n * and what the card looks like is this component's.\n *\n * @example\n * ```vue\n * <script setup>\n * const { needRefresh, updateServiceWorker } = useRegisterSW()\n * <\\/script>\n *\n * <UpdatePrompt\n *   :open=\"needRefresh\"\n *   :title=\"t('pwa.updateTitle')\"\n *   :body=\"t('pwa.updateBody')\"\n *   :action=\"t('pwa.reload')\"\n *   :dismiss-label=\"t('pwa.later')\"\n *   @update=\"updateServiceWorker(true)\"\n *   @dismiss=\"needRefresh = false\"\n * />\n * ```\n */\ndefineProps<{\n  open: boolean\n  title: string\n  body: string\n  action: string\n  /** The X's accessible name. An X on its own has none. */\n  dismissLabel: string\n}>()\n\ndefineEmits<{ update: []; dismiss: [] }>()\n</script>\n\n<template>\n  <Transition name=\"update\">\n    <aside v-if=\"open\" class=\"update-card\" role=\"status\">\n      <span class=\"update-icon\" aria-hidden=\"true\">\n        <RefreshCw class=\"size-4\" />\n      </span>\n\n      <div class=\"min-w-0 flex-1\">\n        <p class=\"text-ink text-sm font-semibold\">{{ title }}</p>\n        <p class=\"text-ink-soft text-xs leading-snug\">{{ body }}</p>\n      </div>\n\n      <BaseButton\n        variant=\"primary\"\n        pill\n        size=\"xs\"\n        class=\"shrink-0 font-semibold\"\n        @click=\"$emit('update')\"\n      >\n        {{ action }}\n      </BaseButton>\n\n      <BaseButton\n        variant=\"quiet\"\n        icon\n        pill\n        size=\"sm\"\n        class=\"shrink-0\"\n        :aria-label=\"dismissLabel\"\n        @click=\"$emit('dismiss')\"\n      >\n        <X class=\"size-4\" />\n      </BaseButton>\n    </aside>\n  </Transition>\n</template>\n\n<style scoped>\n/* Sits above the tab bar and the action button, because it outranks both — but\n   absolutely inside its container, so on a desktop-sized shell it does not\n   float off into the page. Give the shell `relative`. */\n.update-card {\n  border-color: var(--color-hair);\n  background: color-mix(in srgb, var(--color-surface) 95%, transparent);\n  border-radius: var(--radius-card);\n  position: absolute;\n  left: 50%;\n  z-index: 50;\n  display: flex;\n  width: 100%;\n  max-width: 360px;\n  align-items: center;\n  gap: 0.75rem;\n  border-width: 1px;\n  padding: 0.75rem;\n  backdrop-filter: blur(12px);\n  box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1);\n  transform: translateX(-50%);\n  bottom: calc(1rem + env(safe-area-inset-bottom, 0px));\n}\n\n.update-icon {\n  background: color-mix(in srgb, var(--color-primary) 15%, transparent);\n  color: var(--color-primary);\n  display: flex;\n  height: 2.25rem;\n  width: 2.25rem;\n  flex-shrink: 0;\n  align-items: center;\n  justify-content: center;\n  border-radius: 0.75rem;\n}\n\n.update-enter-active,\n.update-leave-active {\n  transition:\n    opacity 250ms ease,\n    transform 250ms cubic-bezier(0.32, 0.72, 0, 1);\n}\n\n.update-enter-from,\n.update-leave-to {\n  opacity: 0;\n  transform: translate(-50%, 1rem);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .update-enter-from,\n  .update-leave-to {\n    transform: translate(-50%, 0);\n  }\n}\n</style>\n"],"mappings":"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"}

package/dist/styles.css

@@ -359,4 +359,73 @@
   syntax: "*";
   inherits: false
 }
+
+.install-enter-active[data-v-34c86300],
+.install-leave-active[data-v-34c86300] {
+  transition:
+    opacity 200ms ease,
+    transform 200ms ease;
+}
+.install-enter-from[data-v-34c86300],
+.install-leave-to[data-v-34c86300] {
+  opacity: 0;
+  transform: translateY(-4px);
+}
+@media (prefers-reduced-motion: reduce) {
+.install-enter-from[data-v-34c86300],
+  .install-leave-to[data-v-34c86300] {
+    transform: none;
+}
+}
+
+/* Sits above the tab bar and the action button, because it outranks both — but
+   absolutely inside its container, so on a desktop-sized shell it does not
+   float off into the page. Give the shell `relative`. */
+.update-card[data-v-7cf60526] {
+  border-color: var(--color-hair);
+  background: color-mix(in srgb, var(--color-surface) 95%, transparent);
+  border-radius: var(--radius-card);
+  position: absolute;
+  left: 50%;
+  z-index: 50;
+  display: flex;
+  width: 100%;
+  max-width: 360px;
+  align-items: center;
+  gap: 0.75rem;
+  border-width: 1px;
+  padding: 0.75rem;
+  backdrop-filter: blur(12px);
+  box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1);
+  transform: translateX(-50%);
+  bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
+}
+.update-icon[data-v-7cf60526] {
+  background: color-mix(in srgb, var(--color-primary) 15%, transparent);
+  color: var(--color-primary);
+  display: flex;
+  height: 2.25rem;
+  width: 2.25rem;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  border-radius: 0.75rem;
+}
+.update-enter-active[data-v-7cf60526],
+.update-leave-active[data-v-7cf60526] {
+  transition:
+    opacity 250ms ease,
+    transform 250ms cubic-bezier(0.32, 0.72, 0, 1);
+}
+.update-enter-from[data-v-7cf60526],
+.update-leave-to[data-v-7cf60526] {
+  opacity: 0;
+  transform: translate(-50%, 1rem);
+}
+@media (prefers-reduced-motion: reduce) {
+.update-enter-from[data-v-7cf60526],
+  .update-leave-to[data-v-7cf60526] {
+    transform: translate(-50%, 0);
+}
+}
 /*$vite$:1*/

package/dist/use-theme-_MnaDD5v.js

@@ -0,0 +1,94 @@
+import { ref, watch } from "vue";
+//#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
+export { useTheme as a, setThemeStorageKey as i, isThemePreference as n, readStoredTheme as r, applyTheme as t };
+
+//# sourceMappingURL=use-theme-_MnaDD5v.js.map

package/dist/use-theme-_MnaDD5v.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-theme-_MnaDD5v.js","names":[],"sources":["../src/composables/use-theme.ts"],"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"],"mappings":";;;;;;;;AAYA,IAAI,aAAa;AAEjB,SAAgB,kBAAkB,OAA0C;CAC1E,OAAO,UAAU,YAAY,UAAU,WAAW,UAAU;AAC9D;;AAGA,SAAgB,kBAAmC;CACjD,IAAI;EACF,MAAM,SAAS,aAAa,QAAQ,UAAU;EAE9C,OAAO,kBAAkB,MAAM,IAAI,SAAS;CAC9C,QAAQ;EACN,OAAO;CACT;AACF;AAEA,SAAS,WAAW,YAAmC;CACrD,IAAI;EACF,aAAa,QAAQ,YAAY,UAAU;CAC7C,QAAQ,CAER;AACF;;;;;;;;;;AAWA,SAAS,oBAA6B;CACpC,OAAO,OAAO,WAAW,eAAe,OAAO,OAAO,eAAe,aACjE,OAAO,WAAW,8BAA8B,CAAC,CAAC,UAClD;AACN;;;;;;;;AASA,SAAgB,WAAW,YAAmC;CAC5D,IAAI,OAAO,aAAa,aAAa;CAErC,MAAM,SAAS,eAAe,UAAW,eAAe,YAAY,kBAAkB;CAEtF,SAAS,gBAAgB,UAAU,OAAO,QAAQ,MAAM;AAC1D;;;;;;;;AASA,IAAI,aAA0C;AAE9C,SAAS,aAAmC;CAC1C,IAAI,YAAY,OAAO;CAEvB,aAAa,IAAqB,gBAAgB,CAAC;CAEnD,MACE,aACC,SAAS;EACR,WAAW,IAAI;EACf,WAAW,IAAI;CACjB,GACA,EAAE,WAAW,KAAK,CACpB;CAIA,IAAI,OAAO,WAAW,eAAe,OAAO,OAAO,eAAe,YAChE,OAAO,WAAW,8BAA8B,CAAC,CAAC,iBAAiB,gBAAgB;EACjF,IAAI,YAAY,UAAU,UAAU,WAAW,QAAQ;CACzD,CAAC;CAGH,OAAO;AACT;;;;;;;;;;;;;AAcA,SAAgB,mBAAmB,KAAmB;CACpD,aAAa;CACb,IAAI,YAAY,WAAW,QAAQ,gBAAgB;AACrD;;AAGA,SAAgB,WAAiC;CAC/C,OAAO,WAAW;AACpB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rei-kit",
-  "version": "0.12.0",
+  "version": "0.13.0",
   "description": "Vue 3 and Tailwind 4 design system and shared runtime. Extracted from Hibi.",
   "license": "MIT",
   "author": "Ramazan Doğan",
@@ -24,6 +24,14 @@
     "./shell/mobile.css": "./dist/shell/mobile.css",
     "./shell/web.css": "./dist/shell/web.css",
     "./styles.css": "./dist/styles.css",
+    "./app": {
+      "types": "./dist/app/index.d.ts",
+      "import": "./dist/app.js"
+    },
+    "./pwa": {
+      "types": "./dist/pwa/index.d.ts",
+      "import": "./dist/pwa.js"
+    },
     "./supabase": {
       "types": "./dist/supabase/index.d.ts",
       "import": "./dist/supabase.js"