rei-kit 0.12.1 → 0.14.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/BaseSheet-CLIhXDwe.js +253 -0
- package/dist/BaseSheet-CLIhXDwe.js.map +1 -0
- package/dist/SettingsGroup-DtEB_Hrd.js +203 -0
- package/dist/SettingsGroup-DtEB_Hrd.js.map +1 -0
- package/dist/SettingsRow-MnVleeTR.js +217 -0
- package/dist/SettingsRow-MnVleeTR.js.map +1 -0
- package/dist/app/AuthShell.vue.d.ts +29 -0
- package/dist/app/LocaleSheet.vue.d.ts +36 -0
- package/dist/app/TourShell.vue.d.ts +74 -0
- package/dist/app/index.d.ts +18 -0
- package/dist/app/use-tab-transition.d.ts +52 -0
- package/dist/app/use-theme-sync.d.ts +23 -0
- package/dist/app.js +357 -0
- package/dist/app.js.map +1 -0
- package/dist/index.js +77 -733
- package/dist/index.js.map +1 -1
- package/dist/pwa/InstallPrompt.vue.d.ts +26 -0
- package/dist/pwa/InstallSettings.vue.d.ts +26 -0
- package/dist/pwa/UpdatePrompt.vue.d.ts +48 -0
- package/dist/pwa/index.d.ts +16 -0
- package/dist/pwa/use-install.d.ts +41 -0
- package/dist/pwa/use-snooze.d.ts +22 -0
- package/dist/pwa.js +283 -0
- package/dist/pwa.js.map +1 -0
- package/dist/styles.css +114 -0
- package/package.json +9 -1
|
@@ -0,0 +1,253 @@
|
|
|
1
|
+
import { n as _plugin_vue_export_helper_default, r as BaseButton_default } from "./SettingsRow-MnVleeTR.js";
|
|
2
|
+
import { Teleport, Transition, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, mergeModels, nextTick, normalizeStyle, onScopeDispose, onUnmounted, openBlock, readonly, ref, renderSlot, toDisplayString, unref, useModel, watch, withCtx } from "vue";
|
|
3
|
+
import { X } from "lucide-vue-next";
|
|
4
|
+
//#region src/composables/use-theme.ts
|
|
5
|
+
/**
|
|
6
|
+
* Namespaced by the app, not by this package.
|
|
7
|
+
*
|
|
8
|
+
* Two rei-kit apps served from the same origin would otherwise share one theme
|
|
9
|
+
* setting — and during development on localhost, they will be.
|
|
10
|
+
*/
|
|
11
|
+
var storageKey = "rei-theme";
|
|
12
|
+
function isThemePreference(value) {
|
|
13
|
+
return value === "system" || value === "light" || value === "dark";
|
|
14
|
+
}
|
|
15
|
+
/** Reads the stored preference, falling back to `system`. */
|
|
16
|
+
function readStoredTheme() {
|
|
17
|
+
try {
|
|
18
|
+
const stored = localStorage.getItem(storageKey);
|
|
19
|
+
return isThemePreference(stored) ? stored : "system";
|
|
20
|
+
} catch {
|
|
21
|
+
return "system";
|
|
22
|
+
}
|
|
23
|
+
}
|
|
24
|
+
function storeTheme(preference) {
|
|
25
|
+
try {
|
|
26
|
+
localStorage.setItem(storageKey, preference);
|
|
27
|
+
} catch {}
|
|
28
|
+
}
|
|
29
|
+
/**
|
|
30
|
+
* Does the environment prefer a dark scheme?
|
|
31
|
+
*
|
|
32
|
+
* `matchMedia` is checked for on its own rather than inferred from `document`.
|
|
33
|
+
* Having one does not imply having the other: jsdom supplies a document and no
|
|
34
|
+
* `matchMedia`, so a consumer's component test that so much as mounts something
|
|
35
|
+
* calling `useTheme` threw — and some embedded webviews are the same. Where
|
|
36
|
+
* there is nothing to ask, the answer is no rather than an exception.
|
|
37
|
+
*/
|
|
38
|
+
function prefersDarkScheme() {
|
|
39
|
+
return typeof window !== "undefined" && typeof window.matchMedia === "function" ? window.matchMedia("(prefers-color-scheme: dark)").matches : false;
|
|
40
|
+
}
|
|
41
|
+
/**
|
|
42
|
+
* Adds or removes `.dark` on `<html>`, resolving `system` against the OS.
|
|
43
|
+
*
|
|
44
|
+
* A no-op without a document. There is no OS preference to read on a server and
|
|
45
|
+
* no `<html>` to write to, so a prerender leaves the class off and the app
|
|
46
|
+
* decides the theme before hydration — see the note in the README.
|
|
47
|
+
*/
|
|
48
|
+
function applyTheme(preference) {
|
|
49
|
+
if (typeof document === "undefined") return;
|
|
50
|
+
const isDark = preference === "dark" || preference === "system" && prefersDarkScheme();
|
|
51
|
+
document.documentElement.classList.toggle("dark", isDark);
|
|
52
|
+
}
|
|
53
|
+
/**
|
|
54
|
+
* The shared preference, created on first use rather than at import.
|
|
55
|
+
*
|
|
56
|
+
* Lazy on purpose: reading storage at import time would lock in the default key
|
|
57
|
+
* before an app had a chance to set its own, leaving the controller reading one
|
|
58
|
+
* key and writing another.
|
|
59
|
+
*/
|
|
60
|
+
var preference = null;
|
|
61
|
+
function controller() {
|
|
62
|
+
if (preference) return preference;
|
|
63
|
+
preference = ref(readStoredTheme());
|
|
64
|
+
watch(preference, (next) => {
|
|
65
|
+
storeTheme(next);
|
|
66
|
+
applyTheme(next);
|
|
67
|
+
}, { immediate: true });
|
|
68
|
+
if (typeof window !== "undefined" && typeof window.matchMedia === "function") window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", () => {
|
|
69
|
+
if (preference?.value === "system") applyTheme("system");
|
|
70
|
+
});
|
|
71
|
+
return preference;
|
|
72
|
+
}
|
|
73
|
+
/**
|
|
74
|
+
* Sets where the preference is stored.
|
|
75
|
+
*
|
|
76
|
+
* Safe in either order: called before the first `useTheme()` it simply changes
|
|
77
|
+
* the key, and called after it re-reads under the new one, so the controller
|
|
78
|
+
* never reads from one key while writing to another.
|
|
79
|
+
*
|
|
80
|
+
* @example
|
|
81
|
+
* ```ts
|
|
82
|
+
* setThemeStorageKey('hibi-theme') // once, at startup
|
|
83
|
+
* ```
|
|
84
|
+
*/
|
|
85
|
+
function setThemeStorageKey(key) {
|
|
86
|
+
storageKey = key;
|
|
87
|
+
if (preference) preference.value = readStoredTheme();
|
|
88
|
+
}
|
|
89
|
+
/** @returns The shared preference ref; assigning to it stores and applies it. */
|
|
90
|
+
function useTheme() {
|
|
91
|
+
return controller();
|
|
92
|
+
}
|
|
93
|
+
//#endregion
|
|
94
|
+
//#region src/composables/use-visual-viewport.ts
|
|
95
|
+
/**
|
|
96
|
+
* Tracks the visual viewport.
|
|
97
|
+
*
|
|
98
|
+
* Chrome and Android browsers honour `interactive-widget=resizes-content`, so
|
|
99
|
+
* the layout viewport already shrinks for the keyboard there. Safari on iOS
|
|
100
|
+
* does not implement it: it shrinks only the *visual* viewport, leaving a sheet
|
|
101
|
+
* sized in `dvh` sitting partly underneath the keyboard.
|
|
102
|
+
*
|
|
103
|
+
* `null` means the API is unavailable, which callers should read as "trust the
|
|
104
|
+
* layout viewport" rather than as zero. A server has no viewport at all, so it
|
|
105
|
+
* gets that same `null` — this runs during `setup`, and a component using it
|
|
106
|
+
* has to survive being rendered there.
|
|
107
|
+
*
|
|
108
|
+
* @example
|
|
109
|
+
* ```ts
|
|
110
|
+
* const viewport = useVisualViewport()
|
|
111
|
+
* // :style="viewport ? { height: `${viewport.height}px` } : undefined"
|
|
112
|
+
* ```
|
|
113
|
+
*/
|
|
114
|
+
function useVisualViewport() {
|
|
115
|
+
const rect = ref(null);
|
|
116
|
+
const viewport = typeof window === "undefined" ? void 0 : window.visualViewport;
|
|
117
|
+
if (!viewport) return readonly(rect);
|
|
118
|
+
function read() {
|
|
119
|
+
if (!viewport) return;
|
|
120
|
+
rect.value = {
|
|
121
|
+
height: viewport.height,
|
|
122
|
+
offsetTop: viewport.offsetTop
|
|
123
|
+
};
|
|
124
|
+
}
|
|
125
|
+
read();
|
|
126
|
+
viewport.addEventListener("resize", read);
|
|
127
|
+
viewport.addEventListener("scroll", read);
|
|
128
|
+
onScopeDispose(() => {
|
|
129
|
+
viewport.removeEventListener("resize", read);
|
|
130
|
+
viewport.removeEventListener("scroll", read);
|
|
131
|
+
});
|
|
132
|
+
return readonly(rect);
|
|
133
|
+
}
|
|
134
|
+
//#endregion
|
|
135
|
+
//#region src/components/BaseSheet.vue?vue&type=script&setup=true&lang.ts
|
|
136
|
+
var _hoisted_1 = { class: "shell-frame md:rounded-shell relative flex max-h-full flex-col justify-end overflow-hidden" };
|
|
137
|
+
var _hoisted_2 = ["aria-label"];
|
|
138
|
+
var _hoisted_3 = { class: "flex shrink-0 items-start gap-3 px-6 pt-4 pb-5" };
|
|
139
|
+
var _hoisted_4 = { class: "min-w-0 flex-1" };
|
|
140
|
+
var _hoisted_5 = { class: "text-ink text-xl leading-tight font-semibold" };
|
|
141
|
+
var _hoisted_6 = {
|
|
142
|
+
key: 0,
|
|
143
|
+
class: "text-ink-soft mt-1 text-sm leading-snug"
|
|
144
|
+
};
|
|
145
|
+
var _hoisted_7 = { class: "min-h-0 flex-1 overflow-y-auto px-6 pb-[calc(2rem+env(safe-area-inset-bottom,0px))]" };
|
|
146
|
+
//#endregion
|
|
147
|
+
//#region src/components/BaseSheet.vue
|
|
148
|
+
var BaseSheet_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
|
|
149
|
+
__name: "BaseSheet",
|
|
150
|
+
props: /*@__PURE__*/ mergeModels({
|
|
151
|
+
title: {},
|
|
152
|
+
subtitle: { default: "" },
|
|
153
|
+
closeLabel: { default: "Close" }
|
|
154
|
+
}, {
|
|
155
|
+
"modelValue": {
|
|
156
|
+
type: Boolean,
|
|
157
|
+
required: true
|
|
158
|
+
},
|
|
159
|
+
"modelModifiers": {}
|
|
160
|
+
}),
|
|
161
|
+
emits: ["update:modelValue"],
|
|
162
|
+
setup(__props) {
|
|
163
|
+
const open = useModel(__props, "modelValue");
|
|
164
|
+
const viewport = useVisualViewport();
|
|
165
|
+
/**
|
|
166
|
+
* Pins the sheet to the area the keyboard has left visible.
|
|
167
|
+
*
|
|
168
|
+
* Only needed where the layout viewport does not shrink on its own — iOS. On
|
|
169
|
+
* Android the numbers already agree, so this is a no-op there rather than a
|
|
170
|
+
* second, competing adjustment.
|
|
171
|
+
*/
|
|
172
|
+
const viewportStyle = computed(() => viewport.value ? {
|
|
173
|
+
height: `${viewport.value.height}px`,
|
|
174
|
+
top: `${viewport.value.offsetTop}px`
|
|
175
|
+
} : void 0);
|
|
176
|
+
const panel = ref(null);
|
|
177
|
+
let lastFocused = null;
|
|
178
|
+
function close() {
|
|
179
|
+
open.value = false;
|
|
180
|
+
}
|
|
181
|
+
function onKeydown(event) {
|
|
182
|
+
if (event.key === "Escape") close();
|
|
183
|
+
}
|
|
184
|
+
watch(open, async (isOpen) => {
|
|
185
|
+
if (isOpen) {
|
|
186
|
+
setBackgroundInert(true);
|
|
187
|
+
lastFocused = document.activeElement instanceof HTMLElement ? document.activeElement : null;
|
|
188
|
+
window.addEventListener("keydown", onKeydown);
|
|
189
|
+
await nextTick();
|
|
190
|
+
panel.value?.focus();
|
|
191
|
+
} else {
|
|
192
|
+
window.removeEventListener("keydown", onKeydown);
|
|
193
|
+
lastFocused?.focus();
|
|
194
|
+
lastFocused = null;
|
|
195
|
+
setBackgroundInert(false);
|
|
196
|
+
}
|
|
197
|
+
});
|
|
198
|
+
/**
|
|
199
|
+
* `inert` takes the whole app out of tab order and pointer events while the
|
|
200
|
+
* sheet is open — a real focus trap without keydown bookkeeping.
|
|
201
|
+
*
|
|
202
|
+
* The sheet itself is teleported to `#sheet-root`, a sibling of `#app`, so it
|
|
203
|
+
* stays interactive.
|
|
204
|
+
*/
|
|
205
|
+
function setBackgroundInert(isInert) {
|
|
206
|
+
document.getElementById("app")?.toggleAttribute("inert", isInert);
|
|
207
|
+
}
|
|
208
|
+
onUnmounted(() => {
|
|
209
|
+
window.removeEventListener("keydown", onKeydown);
|
|
210
|
+
setBackgroundInert(false);
|
|
211
|
+
});
|
|
212
|
+
return (_ctx, _cache) => {
|
|
213
|
+
return openBlock(), createBlock(Teleport, { to: "#sheet-root" }, [createVNode(Transition, { name: "sheet" }, {
|
|
214
|
+
default: withCtx(() => [open.value ? (openBlock(), createElementBlock("div", {
|
|
215
|
+
key: 0,
|
|
216
|
+
class: "fixed inset-x-0 top-0 bottom-0 z-50 flex items-center justify-center",
|
|
217
|
+
style: normalizeStyle(viewportStyle.value)
|
|
218
|
+
}, [createElementVNode("div", _hoisted_1, [createElementVNode("div", {
|
|
219
|
+
class: "bg-ink/45 absolute inset-0 backdrop-blur-[2px]",
|
|
220
|
+
onClick: close
|
|
221
|
+
}), createElementVNode("section", {
|
|
222
|
+
ref_key: "panel",
|
|
223
|
+
ref: panel,
|
|
224
|
+
role: "dialog",
|
|
225
|
+
"aria-modal": "true",
|
|
226
|
+
"aria-label": __props.title,
|
|
227
|
+
tabindex: "-1",
|
|
228
|
+
class: "sheet-panel bg-surface relative flex max-h-[94%] min-h-[56dvh] flex-col rounded-t-[28px] shadow-2xl outline-none"
|
|
229
|
+
}, [
|
|
230
|
+
_cache[0] || (_cache[0] = createElementVNode("div", {
|
|
231
|
+
class: "flex shrink-0 justify-center pt-3",
|
|
232
|
+
"aria-hidden": "true"
|
|
233
|
+
}, [createElementVNode("span", { class: "bg-hair h-1.5 w-10 rounded-full" })], -1)),
|
|
234
|
+
createElementVNode("header", _hoisted_3, [createElementVNode("div", _hoisted_4, [createElementVNode("h2", _hoisted_5, toDisplayString(__props.title), 1), __props.subtitle ? (openBlock(), createElementBlock("p", _hoisted_6, toDisplayString(__props.subtitle), 1)) : createCommentVNode("", true)]), createVNode(BaseButton_default, {
|
|
235
|
+
variant: "unstyled",
|
|
236
|
+
class: "text-ink-soft hover:bg-muted hover:text-ink -mt-1 flex size-10 shrink-0 items-center justify-center rounded-full transition-colors active:scale-90",
|
|
237
|
+
"aria-label": __props.closeLabel,
|
|
238
|
+
onClick: close
|
|
239
|
+
}, {
|
|
240
|
+
default: withCtx(() => [createVNode(unref(X), { class: "size-5" })]),
|
|
241
|
+
_: 1
|
|
242
|
+
}, 8, ["aria-label"])]),
|
|
243
|
+
createElementVNode("div", _hoisted_7, [renderSlot(_ctx.$slots, "default", {}, void 0, true)])
|
|
244
|
+
], 8, _hoisted_2)])], 4)) : createCommentVNode("", true)]),
|
|
245
|
+
_: 3
|
|
246
|
+
})]);
|
|
247
|
+
};
|
|
248
|
+
}
|
|
249
|
+
}), [["__scopeId", "data-v-51709579"]]);
|
|
250
|
+
//#endregion
|
|
251
|
+
export { readStoredTheme as a, isThemePreference as i, useVisualViewport as n, setThemeStorageKey as o, applyTheme as r, useTheme as s, BaseSheet_default as t };
|
|
252
|
+
|
|
253
|
+
//# sourceMappingURL=BaseSheet-CLIhXDwe.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"BaseSheet-CLIhXDwe.js","names":[],"sources":["../src/composables/use-theme.ts","../src/composables/use-visual-viewport.ts","../src/components/BaseSheet.vue","../src/components/BaseSheet.vue"],"sourcesContent":["import { ref, watch } from 'vue'\nimport type { Ref } from 'vue'\n\n/** What the user asked for; `system` follows the OS. */\nexport type ThemePreference = 'system' | 'light' | 'dark'\n\n/**\n * Namespaced by the app, not by this package.\n *\n * Two rei-kit apps served from the same origin would otherwise share one theme\n * setting — and during development on localhost, they will be.\n */\nlet storageKey = 'rei-theme'\n\nexport function isThemePreference(value: unknown): value is ThemePreference {\n return value === 'system' || value === 'light' || value === 'dark'\n}\n\n/** Reads the stored preference, falling back to `system`. */\nexport function readStoredTheme(): ThemePreference {\n try {\n const stored = localStorage.getItem(storageKey)\n\n return isThemePreference(stored) ? stored : 'system'\n } catch {\n return 'system'\n }\n}\n\nfunction storeTheme(preference: ThemePreference): void {\n try {\n localStorage.setItem(storageKey, preference)\n } catch {\n // Private mode or blocked storage: the choice just will not persist.\n }\n}\n\n/**\n * Does the environment prefer a dark scheme?\n *\n * `matchMedia` is checked for on its own rather than inferred from `document`.\n * Having one does not imply having the other: jsdom supplies a document and no\n * `matchMedia`, so a consumer's component test that so much as mounts something\n * calling `useTheme` threw — and some embedded webviews are the same. Where\n * there is nothing to ask, the answer is no rather than an exception.\n */\nfunction prefersDarkScheme(): boolean {\n return typeof window !== 'undefined' && typeof window.matchMedia === 'function'\n ? window.matchMedia('(prefers-color-scheme: dark)').matches\n : false\n}\n\n/**\n * Adds or removes `.dark` on `<html>`, resolving `system` against the OS.\n *\n * A no-op without a document. There is no OS preference to read on a server and\n * no `<html>` to write to, so a prerender leaves the class off and the app\n * decides the theme before hydration — see the note in the README.\n */\nexport function applyTheme(preference: ThemePreference): void {\n if (typeof document === 'undefined') return\n\n const isDark = preference === 'dark' || (preference === 'system' && prefersDarkScheme())\n\n document.documentElement.classList.toggle('dark', isDark)\n}\n\n/**\n * The shared preference, created on first use rather than at import.\n *\n * Lazy on purpose: reading storage at import time would lock in the default key\n * before an app had a chance to set its own, leaving the controller reading one\n * key and writing another.\n */\nlet preference: Ref<ThemePreference> | null = null\n\nfunction controller(): Ref<ThemePreference> {\n if (preference) return preference\n\n preference = ref<ThemePreference>(readStoredTheme())\n\n watch(\n preference,\n (next) => {\n storeTheme(next)\n applyTheme(next)\n },\n { immediate: true },\n )\n\n // While on `system`, follow the OS if the user flips it at night. Only where\n // there is something to listen to; see `prefersDarkScheme`.\n if (typeof window !== 'undefined' && typeof window.matchMedia === 'function') {\n window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {\n if (preference?.value === 'system') applyTheme('system')\n })\n }\n\n return preference\n}\n\n/**\n * Sets where the preference is stored.\n *\n * Safe in either order: called before the first `useTheme()` it simply changes\n * the key, and called after it re-reads under the new one, so the controller\n * never reads from one key while writing to another.\n *\n * @example\n * ```ts\n * setThemeStorageKey('hibi-theme') // once, at startup\n * ```\n */\nexport function setThemeStorageKey(key: string): void {\n storageKey = key\n if (preference) preference.value = readStoredTheme()\n}\n\n/** @returns The shared preference ref; assigning to it stores and applies it. */\nexport function useTheme(): Ref<ThemePreference> {\n return controller()\n}\n","import { onScopeDispose, readonly, ref } from 'vue'\n\n/** The visible area, once the on-screen keyboard has taken its share. */\nexport interface VisualViewportRect {\n height: number\n offsetTop: number\n}\n\n/**\n * Tracks the visual viewport.\n *\n * Chrome and Android browsers honour `interactive-widget=resizes-content`, so\n * the layout viewport already shrinks for the keyboard there. Safari on iOS\n * does not implement it: it shrinks only the *visual* viewport, leaving a sheet\n * sized in `dvh` sitting partly underneath the keyboard.\n *\n * `null` means the API is unavailable, which callers should read as \"trust the\n * layout viewport\" rather than as zero. A server has no viewport at all, so it\n * gets that same `null` — this runs during `setup`, and a component using it\n * has to survive being rendered there.\n *\n * @example\n * ```ts\n * const viewport = useVisualViewport()\n * // :style=\"viewport ? { height: `${viewport.height}px` } : undefined\"\n * ```\n */\nexport function useVisualViewport() {\n const rect = ref<VisualViewportRect | null>(null)\n\n const viewport = typeof window === 'undefined' ? undefined : window.visualViewport\n if (!viewport) return readonly(rect)\n\n function read() {\n if (!viewport) return\n\n rect.value = { height: viewport.height, offsetTop: viewport.offsetTop }\n }\n\n read()\n\n // `scroll` matters as much as `resize`: iOS shifts the visual viewport up to\n // keep the focused field visible, without changing its height.\n viewport.addEventListener('resize', read)\n viewport.addEventListener('scroll', read)\n\n onScopeDispose(() => {\n viewport.removeEventListener('resize', read)\n viewport.removeEventListener('scroll', read)\n })\n\n return readonly(rect)\n}\n","<script setup lang=\"ts\">\nimport BaseButton from './BaseButton.vue'\nimport { computed, nextTick, onUnmounted, ref, watch } from 'vue'\nimport { X } from 'lucide-vue-next'\n\nimport { useVisualViewport } from '../composables/use-visual-viewport'\n\nconst open = defineModel<boolean>({ required: true })\nconst {\n title,\n subtitle = '',\n closeLabel = 'Close',\n} = defineProps<{\n title: string\n subtitle?: string | undefined\n /**\n * Accessible name for the close button.\n *\n * A prop rather than a translation: a component that calls t() forces every\n * consumer onto one i18n setup, and this is the package's only visible string.\n */\n closeLabel?: string | undefined\n}>()\n\nconst viewport = useVisualViewport()\n\n/**\n * Pins the sheet to the area the keyboard has left visible.\n *\n * Only needed where the layout viewport does not shrink on its own — iOS. On\n * Android the numbers already agree, so this is a no-op there rather than a\n * second, competing adjustment.\n */\nconst viewportStyle = computed(() =>\n viewport.value\n ? { height: `${viewport.value.height}px`, top: `${viewport.value.offsetTop}px` }\n : undefined,\n)\n\nconst panel = ref<HTMLElement | null>(null)\nlet lastFocused: HTMLElement | null = null\n\nfunction close() {\n open.value = false\n}\n\nfunction onKeydown(event: KeyboardEvent) {\n if (event.key === 'Escape') close()\n}\n\nwatch(open, async (isOpen) => {\n if (isOpen) {\n setBackgroundInert(true)\n lastFocused = document.activeElement instanceof HTMLElement ? document.activeElement : null\n window.addEventListener('keydown', onKeydown)\n await nextTick()\n panel.value?.focus()\n } else {\n window.removeEventListener('keydown', onKeydown)\n lastFocused?.focus()\n lastFocused = null\n setBackgroundInert(false)\n }\n})\n\n/**\n * `inert` takes the whole app out of tab order and pointer events while the\n * sheet is open — a real focus trap without keydown bookkeeping.\n *\n * The sheet itself is teleported to `#sheet-root`, a sibling of `#app`, so it\n * stays interactive.\n */\nfunction setBackgroundInert(isInert: boolean) {\n document.getElementById('app')?.toggleAttribute('inert', isInert)\n}\n\nonUnmounted(() => {\n window.removeEventListener('keydown', onKeydown)\n // Unmounting while open would otherwise leave the whole app inert forever.\n setBackgroundInert(false)\n})\n</script>\n\n<template>\n <Teleport to=\"#sheet-root\">\n <Transition name=\"sheet\">\n <div\n v-if=\"open\"\n class=\"fixed inset-x-0 top-0 bottom-0 z-50 flex items-center justify-center\"\n :style=\"viewportStyle\"\n >\n <div\n class=\"shell-frame md:rounded-shell relative flex max-h-full flex-col justify-end overflow-hidden\"\n >\n <div class=\"bg-ink/45 absolute inset-0 backdrop-blur-[2px]\" @click=\"close\" />\n\n <!-- Header and footer stay put; only the slot scrolls. Sized in dvh so\n the on-screen keyboard shrinks the sheet instead of pushing its\n content out of reach. -->\n <section\n ref=\"panel\"\n role=\"dialog\"\n aria-modal=\"true\"\n :aria-label=\"title\"\n tabindex=\"-1\"\n class=\"sheet-panel bg-surface relative flex max-h-[94%] min-h-[56dvh] flex-col rounded-t-[28px] shadow-2xl outline-none\"\n >\n <div class=\"flex shrink-0 justify-center pt-3\" aria-hidden=\"true\">\n <span class=\"bg-hair h-1.5 w-10 rounded-full\" />\n </div>\n\n <header class=\"flex shrink-0 items-start gap-3 px-6 pt-4 pb-5\">\n <div class=\"min-w-0 flex-1\">\n <h2 class=\"text-ink text-xl leading-tight font-semibold\">{{ title }}</h2>\n <p v-if=\"subtitle\" class=\"text-ink-soft mt-1 text-sm leading-snug\">\n {{ subtitle }}\n </p>\n </div>\n\n <!-- `unstyled`, so the sheet keeps the exact button it had. What it\n gains is the focus ring it never had: this was a raw\n `<button>` with no `focus-visible` rule, so closing a sheet\n from the keyboard was invisible. -->\n <BaseButton\n variant=\"unstyled\"\n class=\"text-ink-soft hover:bg-muted hover:text-ink -mt-1 flex size-10 shrink-0 items-center justify-center rounded-full transition-colors active:scale-90\"\n :aria-label=\"closeLabel\"\n @click=\"close\"\n >\n <X class=\"size-5\" />\n </BaseButton>\n </header>\n\n <div\n class=\"min-h-0 flex-1 overflow-y-auto px-6 pb-[calc(2rem+env(safe-area-inset-bottom,0px))]\"\n >\n <slot />\n </div>\n </section>\n </div>\n </div>\n </Transition>\n </Teleport>\n</template>\n\n<style scoped>\n.sheet-enter-active,\n.sheet-leave-active {\n transition: opacity 200ms ease;\n}\n.sheet-enter-from,\n.sheet-leave-to {\n opacity: 0;\n}\n\n/* The panel travels further than the scrim fades, which is what makes the\n sheet read as rising rather than appearing. */\n.sheet-enter-active .sheet-panel,\n.sheet-leave-active .sheet-panel {\n transition: transform 280ms cubic-bezier(0.32, 0.72, 0, 1);\n}\n.sheet-enter-from .sheet-panel,\n.sheet-leave-to .sheet-panel {\n transform: translateY(6%);\n}\n\n@media (prefers-reduced-motion: reduce) {\n .sheet-enter-from .sheet-panel,\n .sheet-leave-to .sheet-panel {\n transform: none;\n }\n}\n</style>\n","<script setup lang=\"ts\">\nimport BaseButton from './BaseButton.vue'\nimport { computed, nextTick, onUnmounted, ref, watch } from 'vue'\nimport { X } from 'lucide-vue-next'\n\nimport { useVisualViewport } from '../composables/use-visual-viewport'\n\nconst open = defineModel<boolean>({ required: true })\nconst {\n title,\n subtitle = '',\n closeLabel = 'Close',\n} = defineProps<{\n title: string\n subtitle?: string | undefined\n /**\n * Accessible name for the close button.\n *\n * A prop rather than a translation: a component that calls t() forces every\n * consumer onto one i18n setup, and this is the package's only visible string.\n */\n closeLabel?: string | undefined\n}>()\n\nconst viewport = useVisualViewport()\n\n/**\n * Pins the sheet to the area the keyboard has left visible.\n *\n * Only needed where the layout viewport does not shrink on its own — iOS. On\n * Android the numbers already agree, so this is a no-op there rather than a\n * second, competing adjustment.\n */\nconst viewportStyle = computed(() =>\n viewport.value\n ? { height: `${viewport.value.height}px`, top: `${viewport.value.offsetTop}px` }\n : undefined,\n)\n\nconst panel = ref<HTMLElement | null>(null)\nlet lastFocused: HTMLElement | null = null\n\nfunction close() {\n open.value = false\n}\n\nfunction onKeydown(event: KeyboardEvent) {\n if (event.key === 'Escape') close()\n}\n\nwatch(open, async (isOpen) => {\n if (isOpen) {\n setBackgroundInert(true)\n lastFocused = document.activeElement instanceof HTMLElement ? document.activeElement : null\n window.addEventListener('keydown', onKeydown)\n await nextTick()\n panel.value?.focus()\n } else {\n window.removeEventListener('keydown', onKeydown)\n lastFocused?.focus()\n lastFocused = null\n setBackgroundInert(false)\n }\n})\n\n/**\n * `inert` takes the whole app out of tab order and pointer events while the\n * sheet is open — a real focus trap without keydown bookkeeping.\n *\n * The sheet itself is teleported to `#sheet-root`, a sibling of `#app`, so it\n * stays interactive.\n */\nfunction setBackgroundInert(isInert: boolean) {\n document.getElementById('app')?.toggleAttribute('inert', isInert)\n}\n\nonUnmounted(() => {\n window.removeEventListener('keydown', onKeydown)\n // Unmounting while open would otherwise leave the whole app inert forever.\n setBackgroundInert(false)\n})\n</script>\n\n<template>\n <Teleport to=\"#sheet-root\">\n <Transition name=\"sheet\">\n <div\n v-if=\"open\"\n class=\"fixed inset-x-0 top-0 bottom-0 z-50 flex items-center justify-center\"\n :style=\"viewportStyle\"\n >\n <div\n class=\"shell-frame md:rounded-shell relative flex max-h-full flex-col justify-end overflow-hidden\"\n >\n <div class=\"bg-ink/45 absolute inset-0 backdrop-blur-[2px]\" @click=\"close\" />\n\n <!-- Header and footer stay put; only the slot scrolls. Sized in dvh so\n the on-screen keyboard shrinks the sheet instead of pushing its\n content out of reach. -->\n <section\n ref=\"panel\"\n role=\"dialog\"\n aria-modal=\"true\"\n :aria-label=\"title\"\n tabindex=\"-1\"\n class=\"sheet-panel bg-surface relative flex max-h-[94%] min-h-[56dvh] flex-col rounded-t-[28px] shadow-2xl outline-none\"\n >\n <div class=\"flex shrink-0 justify-center pt-3\" aria-hidden=\"true\">\n <span class=\"bg-hair h-1.5 w-10 rounded-full\" />\n </div>\n\n <header class=\"flex shrink-0 items-start gap-3 px-6 pt-4 pb-5\">\n <div class=\"min-w-0 flex-1\">\n <h2 class=\"text-ink text-xl leading-tight font-semibold\">{{ title }}</h2>\n <p v-if=\"subtitle\" class=\"text-ink-soft mt-1 text-sm leading-snug\">\n {{ subtitle }}\n </p>\n </div>\n\n <!-- `unstyled`, so the sheet keeps the exact button it had. What it\n gains is the focus ring it never had: this was a raw\n `<button>` with no `focus-visible` rule, so closing a sheet\n from the keyboard was invisible. -->\n <BaseButton\n variant=\"unstyled\"\n class=\"text-ink-soft hover:bg-muted hover:text-ink -mt-1 flex size-10 shrink-0 items-center justify-center rounded-full transition-colors active:scale-90\"\n :aria-label=\"closeLabel\"\n @click=\"close\"\n >\n <X class=\"size-5\" />\n </BaseButton>\n </header>\n\n <div\n class=\"min-h-0 flex-1 overflow-y-auto px-6 pb-[calc(2rem+env(safe-area-inset-bottom,0px))]\"\n >\n <slot />\n </div>\n </section>\n </div>\n </div>\n </Transition>\n </Teleport>\n</template>\n\n<style scoped>\n.sheet-enter-active,\n.sheet-leave-active {\n transition: opacity 200ms ease;\n}\n.sheet-enter-from,\n.sheet-leave-to {\n opacity: 0;\n}\n\n/* The panel travels further than the scrim fades, which is what makes the\n sheet read as rising rather than appearing. */\n.sheet-enter-active .sheet-panel,\n.sheet-leave-active .sheet-panel {\n transition: transform 280ms cubic-bezier(0.32, 0.72, 0, 1);\n}\n.sheet-enter-from .sheet-panel,\n.sheet-leave-to .sheet-panel {\n transform: translateY(6%);\n}\n\n@media (prefers-reduced-motion: reduce) {\n .sheet-enter-from .sheet-panel,\n .sheet-leave-to .sheet-panel {\n transform: none;\n }\n}\n</style>\n"],"mappings":"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"}
|
|
@@ -0,0 +1,203 @@
|
|
|
1
|
+
import { createElementBlock, createElementVNode, defineComponent, openBlock, renderSlot, toDisplayString } from "vue";
|
|
2
|
+
//#region src/utils/date.ts
|
|
3
|
+
/**
|
|
4
|
+
* Local calendar-day helpers.
|
|
5
|
+
*
|
|
6
|
+
* Every function is pure and works on `YYYY-MM-DD` keys, the same shape as the
|
|
7
|
+
* `date` columns in Postgres. Nothing here calls `toISOString`: that converts to
|
|
8
|
+
* UTC, so in a UTC+9 timezone every entry made between midnight and 09:00 would
|
|
9
|
+
* be written to the previous day.
|
|
10
|
+
*/
|
|
11
|
+
/**
|
|
12
|
+
* Formats a `Date` as a local `YYYY-MM-DD` key.
|
|
13
|
+
*
|
|
14
|
+
* @param date - Any `Date`; only its local year, month and day are read.
|
|
15
|
+
* @returns The calendar day in the runtime's own timezone.
|
|
16
|
+
*
|
|
17
|
+
* @example
|
|
18
|
+
* ```ts
|
|
19
|
+
* // 2026-08-23 01:30 in Tokyo
|
|
20
|
+
* toDateKey(new Date()) // '2026-08-23'
|
|
21
|
+
* new Date().toISOString() // '2026-08-22T16:30…' ← the bug
|
|
22
|
+
* ```
|
|
23
|
+
*/
|
|
24
|
+
function toDateKey(date) {
|
|
25
|
+
return `${String(date.getFullYear()).padStart(4, "0")}-${String(date.getMonth() + 1).padStart(2, "0")}-${String(date.getDate()).padStart(2, "0")}`;
|
|
26
|
+
}
|
|
27
|
+
/** Today's key in the user's own timezone. */
|
|
28
|
+
function todayKey() {
|
|
29
|
+
return toDateKey(/* @__PURE__ */ new Date());
|
|
30
|
+
}
|
|
31
|
+
/**
|
|
32
|
+
* Parses a `YYYY-MM-DD` key into a `Date` at local midnight.
|
|
33
|
+
*
|
|
34
|
+
* @param key - A key produced by {@link toDateKey}.
|
|
35
|
+
* @returns Local midnight of that calendar day.
|
|
36
|
+
* @throws If the key is not three numeric parts.
|
|
37
|
+
*
|
|
38
|
+
* @example
|
|
39
|
+
* ```ts
|
|
40
|
+
* fromDateKey('2026-08-23') // local midnight, correct
|
|
41
|
+
* new Date('2026-08-23') // UTC midnight — shifts a day in some zones
|
|
42
|
+
* ```
|
|
43
|
+
*/
|
|
44
|
+
function fromDateKey(key) {
|
|
45
|
+
const [year, month, day] = key.split("-").map(Number);
|
|
46
|
+
if (year === void 0 || month === void 0 || day === void 0) throw new Error(`Invalid date key: ${key}`);
|
|
47
|
+
return new Date(year, month - 1, day);
|
|
48
|
+
}
|
|
49
|
+
/**
|
|
50
|
+
* Shifts a date key by whole calendar days.
|
|
51
|
+
*
|
|
52
|
+
* Uses `setDate`, which is calendar-aware: it rolls over month and year ends,
|
|
53
|
+
* and stays correct across daylight-saving transitions. Adding
|
|
54
|
+
* `days * 86_400_000` milliseconds would not — a DST day is 23 or 25 hours long.
|
|
55
|
+
*
|
|
56
|
+
* @param key - Starting `YYYY-MM-DD` key.
|
|
57
|
+
* @param days - Days to add; negative goes back.
|
|
58
|
+
* @returns The resulting key.
|
|
59
|
+
*
|
|
60
|
+
* @example
|
|
61
|
+
* ```ts
|
|
62
|
+
* addDays('2026-01-31', 1) // '2026-02-01'
|
|
63
|
+
* addDays('2026-01-01', -1) // '2025-12-31'
|
|
64
|
+
* addDays('2028-02-28', 1) // '2028-02-29' — leap year
|
|
65
|
+
* ```
|
|
66
|
+
*/
|
|
67
|
+
function addDays(key, days) {
|
|
68
|
+
const date = fromDateKey(key);
|
|
69
|
+
date.setDate(date.getDate() + days);
|
|
70
|
+
return toDateKey(date);
|
|
71
|
+
}
|
|
72
|
+
/**
|
|
73
|
+
* The last `count` days ending today, oldest first.
|
|
74
|
+
*
|
|
75
|
+
* `today` is a parameter so the function stays pure and testable; call sites
|
|
76
|
+
* normally omit it.
|
|
77
|
+
*
|
|
78
|
+
* @param count - How many days to return, including `today`.
|
|
79
|
+
* @param today - End of the range. Defaults to the real today.
|
|
80
|
+
* @returns Keys in ascending order.
|
|
81
|
+
*
|
|
82
|
+
* @example
|
|
83
|
+
* ```ts
|
|
84
|
+
* lastNDays(3, '2026-08-23') // ['2026-08-21', '2026-08-22', '2026-08-23']
|
|
85
|
+
* ```
|
|
86
|
+
*/
|
|
87
|
+
function lastNDays(count, today = todayKey()) {
|
|
88
|
+
const keys = [];
|
|
89
|
+
for (let offset = count - 1; offset >= 0; offset -= 1) keys.push(addDays(today, -offset));
|
|
90
|
+
return keys;
|
|
91
|
+
}
|
|
92
|
+
/**
|
|
93
|
+
* The first day of the week containing `key`.
|
|
94
|
+
*
|
|
95
|
+
* The user's preference is a parameter, not a module-level setting: changing it
|
|
96
|
+
* in Profile has to re-render the week grid and the year heatmap immediately,
|
|
97
|
+
* and a global would make that a hidden dependency.
|
|
98
|
+
*
|
|
99
|
+
* @param key - Any day in the week.
|
|
100
|
+
* @param weekStartsOn - 0 for Sunday, 1 for Monday.
|
|
101
|
+
* @returns Key of that week's first day.
|
|
102
|
+
*
|
|
103
|
+
* @example
|
|
104
|
+
* ```ts
|
|
105
|
+
* // 2026-08-23 is a Sunday
|
|
106
|
+
* startOfWeek('2026-08-23', 1) // '2026-08-17' — previous Monday
|
|
107
|
+
* startOfWeek('2026-08-23', 0) // '2026-08-23' — already Sunday
|
|
108
|
+
* ```
|
|
109
|
+
*/
|
|
110
|
+
function startOfWeek(key, weekStartsOn) {
|
|
111
|
+
return addDays(key, -((fromDateKey(key).getDay() - weekStartsOn + 7) % 7));
|
|
112
|
+
}
|
|
113
|
+
/**
|
|
114
|
+
* Every day of a calendar year, in order.
|
|
115
|
+
*
|
|
116
|
+
* Leap years fall out of the loop for free: it walks day by day until the year
|
|
117
|
+
* rolls over, so February 29 is included when it exists.
|
|
118
|
+
*
|
|
119
|
+
* @param year - Four-digit year.
|
|
120
|
+
* @returns 365 or 366 keys, oldest first.
|
|
121
|
+
*/
|
|
122
|
+
function eachDayOfYear(year) {
|
|
123
|
+
const keys = [];
|
|
124
|
+
const date = new Date(year, 0, 1);
|
|
125
|
+
while (date.getFullYear() === year) {
|
|
126
|
+
keys.push(toDateKey(date));
|
|
127
|
+
date.setDate(date.getDate() + 1);
|
|
128
|
+
}
|
|
129
|
+
return keys;
|
|
130
|
+
}
|
|
131
|
+
/**
|
|
132
|
+
* Empty cells before a block's first day in a seven-row column grid.
|
|
133
|
+
*
|
|
134
|
+
* The grid fills column by column, so the first column is only partly used
|
|
135
|
+
* unless the block starts exactly on the week's first day. An off-by-one here
|
|
136
|
+
* shifts the whole block by a row, so this is unit tested.
|
|
137
|
+
*
|
|
138
|
+
* @param firstDayKey - First day of the block, e.g. `'2026-02-01'`.
|
|
139
|
+
* @param weekStartsOn - 0 for Sunday, 1 for Monday.
|
|
140
|
+
* @returns 0-6 blank cells.
|
|
141
|
+
*
|
|
142
|
+
* @example
|
|
143
|
+
* ```ts
|
|
144
|
+
* leadingBlanks('2026-01-01', 1) // 3 — a Thursday, Mon-Wed are blank
|
|
145
|
+
* leadingBlanks('2024-01-01', 1) // 0 — a Monday
|
|
146
|
+
* ```
|
|
147
|
+
*/
|
|
148
|
+
function leadingBlanks(firstDayKey, weekStartsOn) {
|
|
149
|
+
return (fromDateKey(firstDayKey).getDay() - weekStartsOn + 7) % 7;
|
|
150
|
+
}
|
|
151
|
+
//#endregion
|
|
152
|
+
//#region src/utils/platform.ts
|
|
153
|
+
/**
|
|
154
|
+
* Whether the app is running from the Home Screen rather than a browser tab.
|
|
155
|
+
*
|
|
156
|
+
* Two checks because iOS predates the standard one: `display-mode: standalone`
|
|
157
|
+
* is the modern signal, `navigator.standalone` is Safari's own.
|
|
158
|
+
*/
|
|
159
|
+
function isInstalled() {
|
|
160
|
+
if (typeof window === "undefined") return false;
|
|
161
|
+
return window.matchMedia("(display-mode: standalone)").matches || navigator.standalone === true;
|
|
162
|
+
}
|
|
163
|
+
/** iPhone and iPad, including iPadOS reporting itself as a Mac. */
|
|
164
|
+
function isApplePortable() {
|
|
165
|
+
if (typeof window === "undefined") return false;
|
|
166
|
+
return /iPad|iPhone|iPod/.test(navigator.userAgent) || navigator.platform === "MacIntel" && navigator.maxTouchPoints > 1;
|
|
167
|
+
}
|
|
168
|
+
/**
|
|
169
|
+
* Whether this device can only receive notifications once the app is installed.
|
|
170
|
+
*
|
|
171
|
+
* Safari on iOS grants notification permission to an installed web app and to
|
|
172
|
+
* nothing else — in a normal tab the request does not even prompt. Telling the
|
|
173
|
+
* user to allow notifications there is asking for something the browser will
|
|
174
|
+
* not offer, so the UI has to say "add to Home Screen" instead.
|
|
175
|
+
*
|
|
176
|
+
* @example
|
|
177
|
+
* ```ts
|
|
178
|
+
* if (needsIosInstall()) // show the Home Screen instruction, not the button
|
|
179
|
+
* ```
|
|
180
|
+
*/
|
|
181
|
+
function needsIosInstall() {
|
|
182
|
+
return isApplePortable() && !isInstalled();
|
|
183
|
+
}
|
|
184
|
+
//#endregion
|
|
185
|
+
//#region src/components/SettingsGroup.vue?vue&type=script&setup=true&lang.ts
|
|
186
|
+
var _hoisted_1 = { class: "flex flex-col gap-2" };
|
|
187
|
+
var _hoisted_2 = { class: "text-ink-soft px-1 text-xs font-semibold tracking-wide uppercase" };
|
|
188
|
+
var _hoisted_3 = { class: "border-hair bg-surface rounded-card divide-hair divide-y overflow-hidden border" };
|
|
189
|
+
//#endregion
|
|
190
|
+
//#region src/components/SettingsGroup.vue
|
|
191
|
+
var SettingsGroup_default = /* @__PURE__ */ defineComponent({
|
|
192
|
+
__name: "SettingsGroup",
|
|
193
|
+
props: { title: {} },
|
|
194
|
+
setup(__props) {
|
|
195
|
+
return (_ctx, _cache) => {
|
|
196
|
+
return openBlock(), createElementBlock("section", _hoisted_1, [createElementVNode("h2", _hoisted_2, toDisplayString(__props.title), 1), createElementVNode("div", _hoisted_3, [renderSlot(_ctx.$slots, "default")])]);
|
|
197
|
+
};
|
|
198
|
+
}
|
|
199
|
+
});
|
|
200
|
+
//#endregion
|
|
201
|
+
export { addDays as a, lastNDays as c, toDateKey as d, todayKey as f, needsIosInstall as i, leadingBlanks as l, isApplePortable as n, eachDayOfYear as o, isInstalled as r, fromDateKey as s, SettingsGroup_default as t, startOfWeek as u };
|
|
202
|
+
|
|
203
|
+
//# sourceMappingURL=SettingsGroup-DtEB_Hrd.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SettingsGroup-DtEB_Hrd.js","names":[],"sources":["../src/utils/date.ts","../src/utils/platform.ts","../src/components/SettingsGroup.vue","../src/components/SettingsGroup.vue"],"sourcesContent":["/**\n * Local calendar-day helpers.\n *\n * Every function is pure and works on `YYYY-MM-DD` keys, the same shape as the\n * `date` columns in Postgres. Nothing here calls `toISOString`: that converts to\n * UTC, so in a UTC+9 timezone every entry made between midnight and 09:00 would\n * be written to the previous day.\n */\n\n/**\n * Formats a `Date` as a local `YYYY-MM-DD` key.\n *\n * @param date - Any `Date`; only its local year, month and day are read.\n * @returns The calendar day in the runtime's own timezone.\n *\n * @example\n * ```ts\n * // 2026-08-23 01:30 in Tokyo\n * toDateKey(new Date()) // '2026-08-23'\n * new Date().toISOString() // '2026-08-22T16:30…' ← the bug\n * ```\n */\nexport function toDateKey(date: Date): string {\n const year = String(date.getFullYear()).padStart(4, '0')\n const month = String(date.getMonth() + 1).padStart(2, '0')\n const day = String(date.getDate()).padStart(2, '0')\n\n return `${year}-${month}-${day}`\n}\n\n/** Today's key in the user's own timezone. */\nexport function todayKey(): string {\n return toDateKey(new Date())\n}\n\n/**\n * Parses a `YYYY-MM-DD` key into a `Date` at local midnight.\n *\n * @param key - A key produced by {@link toDateKey}.\n * @returns Local midnight of that calendar day.\n * @throws If the key is not three numeric parts.\n *\n * @example\n * ```ts\n * fromDateKey('2026-08-23') // local midnight, correct\n * new Date('2026-08-23') // UTC midnight — shifts a day in some zones\n * ```\n */\nexport function fromDateKey(key: string): Date {\n const [year, month, day] = key.split('-').map(Number)\n\n if (year === undefined || month === undefined || day === undefined) {\n throw new Error(`Invalid date key: ${key}`)\n }\n\n return new Date(year, month - 1, day)\n}\n\n/**\n * Shifts a date key by whole calendar days.\n *\n * Uses `setDate`, which is calendar-aware: it rolls over month and year ends,\n * and stays correct across daylight-saving transitions. Adding\n * `days * 86_400_000` milliseconds would not — a DST day is 23 or 25 hours long.\n *\n * @param key - Starting `YYYY-MM-DD` key.\n * @param days - Days to add; negative goes back.\n * @returns The resulting key.\n *\n * @example\n * ```ts\n * addDays('2026-01-31', 1) // '2026-02-01'\n * addDays('2026-01-01', -1) // '2025-12-31'\n * addDays('2028-02-28', 1) // '2028-02-29' — leap year\n * ```\n */\nexport function addDays(key: string, days: number): string {\n const date = fromDateKey(key)\n date.setDate(date.getDate() + days)\n\n return toDateKey(date)\n}\n\n/**\n * The last `count` days ending today, oldest first.\n *\n * `today` is a parameter so the function stays pure and testable; call sites\n * normally omit it.\n *\n * @param count - How many days to return, including `today`.\n * @param today - End of the range. Defaults to the real today.\n * @returns Keys in ascending order.\n *\n * @example\n * ```ts\n * lastNDays(3, '2026-08-23') // ['2026-08-21', '2026-08-22', '2026-08-23']\n * ```\n */\nexport function lastNDays(count: number, today: string = todayKey()): string[] {\n const keys: string[] = []\n\n for (let offset = count - 1; offset >= 0; offset -= 1) {\n keys.push(addDays(today, -offset))\n }\n\n return keys\n}\n\n/** 0 = week starts on Sunday, 1 = on Monday. Mirrors `profiles.week_starts_on`. */\nexport type WeekStart = 0 | 1\n\n/**\n * The first day of the week containing `key`.\n *\n * The user's preference is a parameter, not a module-level setting: changing it\n * in Profile has to re-render the week grid and the year heatmap immediately,\n * and a global would make that a hidden dependency.\n *\n * @param key - Any day in the week.\n * @param weekStartsOn - 0 for Sunday, 1 for Monday.\n * @returns Key of that week's first day.\n *\n * @example\n * ```ts\n * // 2026-08-23 is a Sunday\n * startOfWeek('2026-08-23', 1) // '2026-08-17' — previous Monday\n * startOfWeek('2026-08-23', 0) // '2026-08-23' — already Sunday\n * ```\n */\nexport function startOfWeek(key: string, weekStartsOn: WeekStart): string {\n const weekday = fromDateKey(key).getDay()\n const offset = (weekday - weekStartsOn + 7) % 7\n\n return addDays(key, -offset)\n}\n\n/**\n * Every day of a calendar year, in order.\n *\n * Leap years fall out of the loop for free: it walks day by day until the year\n * rolls over, so February 29 is included when it exists.\n *\n * @param year - Four-digit year.\n * @returns 365 or 366 keys, oldest first.\n */\nexport function eachDayOfYear(year: number): string[] {\n const keys: string[] = []\n const date = new Date(year, 0, 1)\n\n while (date.getFullYear() === year) {\n keys.push(toDateKey(date))\n date.setDate(date.getDate() + 1)\n }\n\n return keys\n}\n\n/**\n * Empty cells before a block's first day in a seven-row column grid.\n *\n * The grid fills column by column, so the first column is only partly used\n * unless the block starts exactly on the week's first day. An off-by-one here\n * shifts the whole block by a row, so this is unit tested.\n *\n * @param firstDayKey - First day of the block, e.g. `'2026-02-01'`.\n * @param weekStartsOn - 0 for Sunday, 1 for Monday.\n * @returns 0-6 blank cells.\n *\n * @example\n * ```ts\n * leadingBlanks('2026-01-01', 1) // 3 — a Thursday, Mon-Wed are blank\n * leadingBlanks('2024-01-01', 1) // 0 — a Monday\n * ```\n */\nexport function leadingBlanks(firstDayKey: string, weekStartsOn: WeekStart): number {\n return (fromDateKey(firstDayKey).getDay() - weekStartsOn + 7) % 7\n}\n","/**\n * Whether the app is running from the Home Screen rather than a browser tab.\n *\n * Two checks because iOS predates the standard one: `display-mode: standalone`\n * is the modern signal, `navigator.standalone` is Safari's own.\n */\nexport function isInstalled(): boolean {\n if (typeof window === 'undefined') return false\n\n return (\n window.matchMedia('(display-mode: standalone)').matches ||\n (navigator as Navigator & { standalone?: boolean }).standalone === true\n )\n}\n\n/** iPhone and iPad, including iPadOS reporting itself as a Mac. */\nexport function isApplePortable(): boolean {\n if (typeof window === 'undefined') return false\n\n return (\n /iPad|iPhone|iPod/.test(navigator.userAgent) ||\n (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1)\n )\n}\n\n/**\n * Whether this device can only receive notifications once the app is installed.\n *\n * Safari on iOS grants notification permission to an installed web app and to\n * nothing else — in a normal tab the request does not even prompt. Telling the\n * user to allow notifications there is asking for something the browser will\n * not offer, so the UI has to say \"add to Home Screen\" instead.\n *\n * @example\n * ```ts\n * if (needsIosInstall()) // show the Home Screen instruction, not the button\n * ```\n */\nexport function needsIosInstall(): boolean {\n return isApplePortable() && !isInstalled()\n}\n","<script setup lang=\"ts\">\ndefineProps<{ title: string }>()\n</script>\n\n<template>\n <section class=\"flex flex-col gap-2\">\n <h2 class=\"text-ink-soft px-1 text-xs font-semibold tracking-wide uppercase\">{{ title }}</h2>\n\n <!-- One card per group, rows divided by hairlines. Loose fields floating on\n the page gave no sense of what belonged with what. -->\n <div class=\"border-hair bg-surface rounded-card divide-hair divide-y overflow-hidden border\">\n <slot />\n </div>\n </section>\n</template>\n","<script setup lang=\"ts\">\ndefineProps<{ title: string }>()\n</script>\n\n<template>\n <section class=\"flex flex-col gap-2\">\n <h2 class=\"text-ink-soft px-1 text-xs font-semibold tracking-wide uppercase\">{{ title }}</h2>\n\n <!-- One card per group, rows divided by hairlines. Loose fields floating on\n the page gave no sense of what belonged with what. -->\n <div class=\"border-hair bg-surface rounded-card divide-hair divide-y overflow-hidden border\">\n <slot />\n </div>\n </section>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAsBA,SAAgB,UAAU,MAAoB;CAK5C,OAAO,GAJM,OAAO,KAAK,YAAY,CAAC,CAAC,CAAC,SAAS,GAAG,GAI1C,EAAK,GAHD,OAAO,KAAK,SAAS,IAAI,CAAC,CAAC,CAAC,SAAS,GAAG,GAGpC,EAAM,GAFZ,OAAO,KAAK,QAAQ,CAAC,CAAC,CAAC,SAAS,GAAG,GAEpB;AAC7B;;AAGA,SAAgB,WAAmB;CACjC,OAAO,0BAAU,IAAI,KAAK,CAAC;AAC7B;;;;;;;;;;;;;;AAeA,SAAgB,YAAY,KAAmB;CAC7C,MAAM,CAAC,MAAM,OAAO,OAAO,IAAI,MAAM,GAAG,CAAC,CAAC,IAAI,MAAM;CAEpD,IAAI,SAAS,KAAA,KAAa,UAAU,KAAA,KAAa,QAAQ,KAAA,GACvD,MAAM,IAAI,MAAM,qBAAqB,KAAK;CAG5C,OAAO,IAAI,KAAK,MAAM,QAAQ,GAAG,GAAG;AACtC;;;;;;;;;;;;;;;;;;;AAoBA,SAAgB,QAAQ,KAAa,MAAsB;CACzD,MAAM,OAAO,YAAY,GAAG;CAC5B,KAAK,QAAQ,KAAK,QAAQ,IAAI,IAAI;CAElC,OAAO,UAAU,IAAI;AACvB;;;;;;;;;;;;;;;;AAiBA,SAAgB,UAAU,OAAe,QAAgB,SAAS,GAAa;CAC7E,MAAM,OAAiB,CAAC;CAExB,KAAK,IAAI,SAAS,QAAQ,GAAG,UAAU,GAAG,UAAU,GAClD,KAAK,KAAK,QAAQ,OAAO,CAAC,MAAM,CAAC;CAGnC,OAAO;AACT;;;;;;;;;;;;;;;;;;;AAuBA,SAAgB,YAAY,KAAa,cAAiC;CAIxE,OAAO,QAAQ,KAAK,GAHJ,YAAY,GAAG,CAAC,CAAC,OACjB,IAAU,eAAe,KAAK,EAEnB;AAC7B;;;;;;;;;;AAWA,SAAgB,cAAc,MAAwB;CACpD,MAAM,OAAiB,CAAC;CACxB,MAAM,OAAO,IAAI,KAAK,MAAM,GAAG,CAAC;CAEhC,OAAO,KAAK,YAAY,MAAM,MAAM;EAClC,KAAK,KAAK,UAAU,IAAI,CAAC;EACzB,KAAK,QAAQ,KAAK,QAAQ,IAAI,CAAC;CACjC;CAEA,OAAO;AACT;;;;;;;;;;;;;;;;;;AAmBA,SAAgB,cAAc,aAAqB,cAAiC;CAClF,QAAQ,YAAY,WAAW,CAAC,CAAC,OAAO,IAAI,eAAe,KAAK;AAClE;;;;;;;;;AC1KA,SAAgB,cAAuB;CACrC,IAAI,OAAO,WAAW,aAAa,OAAO;CAE1C,OACE,OAAO,WAAW,4BAA4B,CAAC,CAAC,WAC/C,UAAmD,eAAe;AAEvE;;AAGA,SAAgB,kBAA2B;CACzC,IAAI,OAAO,WAAW,aAAa,OAAO;CAE1C,OACE,mBAAmB,KAAK,UAAU,SAAS,KAC1C,UAAU,aAAa,cAAc,UAAU,iBAAiB;AAErE;;;;;;;;;;;;;;AAeA,SAAgB,kBAA2B;CACzC,OAAO,gBAAgB,KAAK,CAAC,YAAY;AAC3C;;;;;;;;;;;;;GCnCE,OAAA,UAAA,GAAA,mBAQU,WARV,YAQU,CAPR,mBAA6F,MAA7F,YAA6F,gBAAb,QAAA,KAAK,GAAA,CAAA,GAIrF,mBAEM,OAFN,YAEM,CADJ,WAAQ,KAAA,QAAA,SAAA,CAAA,CAAA,CAAA,CAAA"}
|