npm - rei-kit - Versions diffs - 1.0.3 → 2.0.0 - Mend

rei-kit 1.0.3 → 2.0.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.

Files changed (31) hide show

package/README.md +100 -15
package/dist/{GoogleButton-lxNEycyw.js → GoogleButton-DS-3rpUA.js} +6 -6
package/dist/GoogleButton-DS-3rpUA.js.map +1 -0
package/dist/{SettingsGroup-JsD19V81.js → SettingsGroup-BXkajKGl.js} +2 -2
package/dist/{SettingsGroup-JsD19V81.js.map → SettingsGroup-BXkajKGl.js.map} +1 -1
package/dist/{SettingsRow-3lPRJbBZ.js → SettingsRow-BXFn8tCk.js} +12 -12
package/dist/SettingsRow-BXFn8tCk.js.map +1 -0
package/dist/app.js +7 -7
package/dist/app.js.map +1 -1
package/dist/index.d.ts +2 -0
package/dist/index.js +130 -30
package/dist/index.js.map +1 -1
package/dist/materials/brutal.css +32 -0
package/dist/materials/glass.css +104 -0
package/dist/materials/quiet.css +39 -0
package/dist/materials/soft.css +57 -0
package/dist/materials.css +15 -0
package/dist/palettes/palettes.generated.json.d.ts +475 -0
package/dist/palettes.css +420 -0
package/dist/pwa.js +4 -4
package/dist/pwa.js.map +1 -1
package/dist/shell/mobile.css +7 -7
package/dist/shell/web.css +4 -4
package/dist/styles.css +296 -426
package/dist/tokens.css +254 -8
package/dist/utils/appearance.d.ts +71 -0
package/dist/web.js +9 -9
package/dist/web.js.map +1 -1
package/package.json +21 -5
package/dist/GoogleButton-lxNEycyw.js.map +0 -1
package/dist/SettingsRow-3lPRJbBZ.js.map +0 -1

package/README.md CHANGED Viewed

@@ -1,24 +1,31 @@
 # rei-kit
-**A Vue 3 and Tailwind 4 component kit.** 53 components, five entry points, and
-a theme an app rebrands by redefining eleven values.
+**One kit. Every look.** 53 accessible components for Vue 3 and Tailwind 4.
+Change the **material** with one attribute and the **palette** with another —
+every component follows, and none of them knows your brand.
 [![npm](https://img.shields.io/npm/v/rei-kit?color=%23227c70&label=npm)](https://www.npmjs.com/package/rei-kit)
 [![license](https://img.shields.io/npm/l/rei-kit?color=%23227c70)](./LICENSE)
 [![showcase](https://img.shields.io/badge/showcase-live-%23227c70)](https://ramazandogna.github.io/rei-kit/)
-**[See every component →](https://ramazandogna.github.io/rei-kit/)**
+**[Try every material and palette live →](https://ramazandogna.github.io/rei-kit/)**
 ```sh
 pnpm add rei-kit
 ```
-```vue
-<script setup lang="ts">
-import { BaseButton, BaseModal, useToast } from 'rei-kit'
-</script>
+```html
+<html data-material="glass" data-palette="nord" class="dark"></html>
 ```
+That line is the whole redesign. Three axes, each changed on its own:
+|              |                                                                                                          |
+| ------------ | -------------------------------------------------------------------------------------------------------- |
+| **Material** | `quiet` · `glass` · `brutal` · `soft` — what a surface is made of: its fill, edge, depth, blur and press |
+| **Palette**  | 10 built in — Nord, Dracula, Catppuccin, Solarized, Gruvbox, Tokyo Night, Rosé Pine, Rei, Sakura, Matcha |
+| **Mode**     | light and dark, every palette measured against WCAG AA in both                                           |
 零 — the layer everything else starts from.
 |                        |                                                                                |
@@ -73,14 +80,14 @@ the app, and not a matter of taste.
 ## Status
-**v1.0.3 — three consumers.**
+**v2.0.0 — three consumers.**
 |              |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
 | ------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | Components   | 53 (`AuthForm`, `BaseTable`, `BaseCombobox`, `BaseSlider`, `TabShell`, `BaseModal`, `BaseTabs`, `BaseTooltip`, `BasePagination`, `BaseBreadcrumb`, `BaseDisclosure`, `BaseAccordion`, `NavLinks`, `OfflineBanner`, `FabButton`, `BaseButton`, `BaseCard`, `BaseInput`, `BaseSelect`, `BaseTextarea`, `BaseCheckbox`, `BaseSwitch`, `BaseRadioGroup`, `BaseMenu`, `BaseAvatar`, `BaseSpinner`, `BaseAlert`, `BaseBadge`, `BaseSheet`, `ProgressBar`, `PriceCard`, `ToastHost`, `TabBar`, `GoogleButton`, `LocaleLinks`, `LocaleSheet`, `AuthShell`, `TourShell`, `InstallPrompt`, `UpdatePrompt`, `InstallSettings`, `SkeletonList`, `PageContainer`, `ErrorBoundary`, etc.) |
-| Composables  | 14 (`useToast`, `useTheme`, `useToday`, `useMediaQuery`, `useInstall`, `watchInstallability`, `createTabTransition`, `useThemeSync`, `useVisualViewport`, etc.)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
-| Utilities    | 27 (`applyTheme`, `formatDate`, `fieldErrors`, `toAuthMessageKey`, `createAuthGuard`, `createQueryDefaults`, `createWriteReport`, `toRedirectPath`, `Supabase error mapper`, i18n runtime, etc.)                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
-| Entry Points | `rei-kit`, `rei-kit/app`, `rei-kit/web`, `rei-kit/pwa`, `rei-kit/shell/mobile.css`, `rei-kit/shell/web.css`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| Composables  | 16 (`useToast`, `useTheme`, `useMaterial`, `usePalette`, `useToday`, `useMediaQuery`, `useInstall`, `watchInstallability`, `createTabTransition`, `useThemeSync`, `useVisualViewport`, etc.)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
+| Utilities    | 33 (`applyTheme`, `applyMaterial`, `applyPalette`, `MATERIALS`, `PALETTES`, `formatDate`, `fieldErrors`, `toAuthMessageKey`, `createAuthGuard`, `createQueryDefaults`, `createWriteReport`, `toRedirectPath`, `Supabase error mapper`, i18n runtime, etc.)                                                                                                                                                                                                                                                                                                                                                                                                                  |
+| Entry Points | `rei-kit`, `rei-kit/app`, `rei-kit/web`, `rei-kit/pwa`, `rei-kit/supabase`, `rei-kit/shell/*.css`, `rei-kit/materials.css`, `rei-kit/palettes.css`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
 | Consumers | [Hibi](https://github.com/ramazandogna/hibi) · [Kakei](https://github.com/ramazandogna/kakei) · [Kakehashi](https://github.com/ramazandogna/kakehashi-nihongo) |
@@ -128,13 +135,16 @@ import { createSupabaseClient } from 'rei-kit/supabase'
 ### Wiring the styles
-Four lines, and every one is load-bearing:
+Four lines, and every one is load-bearing — plus two optional ones for the
+materials and palettes:
 ```css
 /* your app's main.css */
 @import 'tailwindcss';
-@import 'rei-kit/tokens.css'; /* colour roles, the dark variant, measures, utilities */
+@import 'rei-kit/tokens.css'; /* colour roles, depth, motion, the dark variant */
 @import 'rei-kit/shell/mobile.css'; /* or shell/web.css — see The shell, below */
+@import 'rei-kit/materials.css'; /* optional: glass, brutal, soft */
+@import 'rei-kit/palettes.css'; /* optional: the ten palettes */
 @import 'rei-kit/styles.css'; /* compiled component styles */
 /* Tailwind generates a utility only where it has seen the class, and it does
@@ -155,10 +165,82 @@ That test exists because the failure is real: Hibi shipped with the tab bar
 invisible once, and separately spent three versions restating `tokens.css`
 locally instead of importing it, which nothing noticed.
+### Materials
+A material is how a surface is made — its fill, its edge, its depth, how it
+blurs what is behind it and what pressing it does. It is independent of
+colour, so any material works in any palette.
+| Material | Closest to                              | What changes                                                                      |
+| -------- | --------------------------------------- | --------------------------------------------------------------------------------- |
+| `quiet`  | minimalism                              | The default. Hairline edges, tinted fills, depth you barely notice.               |
+| `glass`  | glassmorphism, spatial UI, liquid glass | Frosted, translucent surfaces lit along the rim, over a page with colour to blur. |
+| `brutal` | neo-brutalism                           | 2px ink borders, hard offset shadows, square corners. Buttons press into them.    |
+| `soft`   | claymorphism, neumorphism               | Rounded, raised, lit from above, with a little spring — and a real edge kept.     |
+```html
+<html data-material="brutal"></html>
+```
+```ts
+import { useMaterial } from 'rei-kit'
+const material = useMaterial() // persisted, like useTheme
+material.value = 'glass'
+```
+The attribute works on any element, so a region can differ from the page.
+`quiet` is the absence of the attribute; to restore it inside another
+material, set `data-material="quiet"` on the region.
+**Glass needs something to see through.** Put the page on the `canvas`
+utility, which carries the material's backdrop — a frosted panel over flat
+white is a grey panel. It falls back to solid where `backdrop-filter` is
+unsupported and for readers who set `prefers-reduced-transparency`.
+**Depth is read at runtime, so reach it at runtime.** Use the surface
+utilities — `surface`, `surface-raised`, `surface-overlay`, `control` — or
+`shadow-(--shadow-card)`. There is deliberately no `shadow-card` utility:
+Tailwind builds a theme shadow's utility by inlining its value, which would
+freeze it at the quiet material's depth.
+### Palettes
+Ten palettes, each with a light and a dark mode. Seven are well-known open
+palettes by their official values; three are the kit's own.
+| Palette      | By                | Palette       | By        |
+| ------------ | ----------------- | ------------- | --------- |
+| `rei`        | rei-kit (default) | `gruvbox`     | morhetz   |
+| `nord`       | Arctic Ice Studio | `tokyo-night` | enkia     |
+| `dracula`    | Dracula Theme     | `rose-pine`   | Rosé Pine |
+| `catppuccin` | Catppuccin        | `sakura`      | rei-kit   |
+| `solarized`  | Ethan Schoonover  | `matcha`      | rei-kit   |
+```ts
+import { PALETTES, usePalette } from 'rei-kit'
+const palette = usePalette()
+palette.value = 'catppuccin'
+PALETTES.map((p) => p.swatch) // four colours each, for a picker
+```
+**Every palette is measured before it ships.** The text colour on each
+filled role — `on-primary`, `on-warning` and the rest — is chosen by contrast
+rather than by habit, so Solarized's yellow gets dark text and its blue gets
+white. Every text pairing in both modes is checked against WCAG AA, and a
+palette that fails one does not ship. Seven official values fell short on the
+way in; each got the smallest nudge that clears the line.
+Palettes are generated from `src/palettes/palettes.source.json` by
+`pnpm palettes`; a test asserts the shipped CSS matches the source.
 ### Colours
-`tokens.css` defines all eleven roles, a `.dark` block for each surface, and
-the `dark` variant. A new app rebrands by overriding values, never by renaming:
+`tokens.css` defines all eleven roles, the five `on-*` colours that sit on a
+filled role, a `.dark` block for each, and the `dark` variant. A new app
+rebrands by overriding values, never by renaming — or by choosing a palette:
 ```css
 @theme {
@@ -173,6 +255,9 @@ the `dark` variant. A new app rebrands by overriding values, never by renaming:
   --color-ink: #17132b; /* text */
   --color-ink-soft: #6a6484; /* secondary text */
   --color-hair: #e8e4f2; /* rule */
+  /* the text on a filled role — set it dark when the role is light */
+  --color-on-primary: #ffffff;
 }
 ```

package/dist/{GoogleButton-lxNEycyw.js → GoogleButton-DS-3rpUA.js} RENAMED Viewed

@@ -1,5 +1,5 @@
 import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper-BOaGB7Aw.js";
-import { n as BaseButton_default } from "./SettingsRow-3lPRJbBZ.js";
+import { n as BaseButton_default } from "./SettingsRow-BXFn8tCk.js";
 import { Teleport, Transition, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createStaticVNode, createTextVNode, createVNode, defineComponent, mergeModels, mergeProps, nextTick, normalizeClass, normalizeStyle, onMounted, onScopeDispose, onUnmounted, openBlock, readonly, ref, renderSlot, toDisplayString, unref, useId, useModel, vModelCheckbox, vModelDynamic, watch, withCtx, withDirectives } from "vue";
 import { X } from "lucide-vue-next";
 //#region src/utils/sheet-root.ts
@@ -533,7 +533,7 @@ var BaseInput_default = /* @__PURE__ */ defineComponent({
 					"aria-invalid": invalid,
 					"aria-describedby": describedBy
 				}, _ctx.$attrs, { class: [
-					__props.variant === "unstyled" ? "" : "border-hair bg-surface text-ink rounded-card focus-visible:outline-primary border px-3 focus-visible:outline-2 focus-visible:outline-offset-1",
+					__props.variant === "unstyled" ? "" : "control text-ink rounded-card focus-visible:outline-primary px-3 focus-visible:outline-2 focus-visible:outline-offset-1",
 					__props.variant === "unstyled" ? "text-base" : CONTROL_CLASS,
 					__props.variant !== "unstyled" && invalid ? "border-negative" : ""
 				] }), null, 16, _hoisted_1$3), [[vModelDynamic, model.value]])]),
@@ -643,7 +643,7 @@ var BaseSheet_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PU
 					"aria-modal": "true",
 					"aria-label": __props.title,
 					tabindex: "-1",
-					class: "sheet-panel bg-surface relative flex max-h-[94%] min-h-[56dvh] flex-col rounded-t-[28px] shadow-2xl outline-none"
+					class: "sheet-panel surface-overlay relative flex max-h-[94%] min-h-[56dvh] flex-col rounded-t-[28px] outline-none"
 				}, [
 					_cache[0] || (_cache[0] = createElementVNode("div", {
 						class: "flex shrink-0 justify-center pt-3",
@@ -664,7 +664,7 @@ var BaseSheet_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PU
 			})], 8, ["to"]);
 		};
 	}
-}), [["__scopeId", "data-v-ab6c6ace"]]);
+}), [["__scopeId", "data-v-6194b8f4"]]);
 //#endregion
 //#region src/components/BaseCheckbox.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1$1 = { class: "flex flex-col gap-1.5" };
@@ -758,7 +758,7 @@ var GoogleButton_default = /* @__PURE__ */ defineComponent({
 			return openBlock(), createElementBlock("button", {
 				type: "button",
 				disabled: __props.disabled,
-				class: "border-hair bg-surface text-ink rounded-card hover:bg-muted flex h-11 w-full items-center justify-center gap-2 border text-sm font-medium transition-colors active:scale-95 disabled:pointer-events-none disabled:opacity-50",
+				class: "control text-ink rounded-card hover:bg-muted flex h-11 w-full items-center justify-center gap-2 text-sm font-medium transition-colors duration-(--duration-fast) active:scale-(--press-scale) disabled:pointer-events-none disabled:opacity-50",
 				onClick: _cache[0] || (_cache[0] = ($event) => emit("click"))
 			}, [_cache[1] || (_cache[1] = createStaticVNode("<svg class=\"size-4\" viewBox=\"0 0 48 48\" aria-hidden=\"true\"><path fill=\"#EA4335\" d=\"M24 9.5c3.5 0 6.6 1.2 9 3.6l6.7-6.7C35.6 2.7 30.2.5 24 .5 14.6.5 6.5 5.9 2.6 13.7l7.8 6.1C12.3 13.7 17.7 9.5 24 9.5z\"></path><path fill=\"#4285F4\" d=\"M46.5 24.5c0-1.6-.1-3.1-.4-4.5H24v9h12.7c-.6 3-2.3 5.6-4.9 7.3l7.6 5.9c4.4-4.1 7.1-10.2 7.1-17.7z\"></path><path fill=\"#FBBC05\" d=\"M10.4 28.2a14.6 14.6 0 0 1 0-8.4l-7.8-6.1a24 24 0 0 0 0 20.6l7.8-6.1z\"></path><path fill=\"#34A853\" d=\"M24 47.5c6.2 0 11.5-2 15.4-5.6l-7.6-5.9c-2.1 1.4-4.8 2.3-7.8 2.3-6.3 0-11.7-4.2-13.6-10l-7.8 6.1C6.5 42.1 14.6 47.5 24 47.5z\"></path></svg>", 1)), createTextVNode(" " + toDisplayString(__props.label), 1)], 8, _hoisted_1);
 		};
@@ -767,4 +767,4 @@ var GoogleButton_default = /* @__PURE__ */ defineComponent({
 //#endregion
 export { toRedirectPath as _, FormField_default as a, useVisualViewport as c, isThemePreference as d, readStoredTheme as f, safeRedirect as g, tapFeedback as h, BaseInput_default as i, useOnline as l, useTheme as m, BaseCheckbox_default as n, BaseAlert_default as o, setThemeStorageKey as p, BaseSheet_default as r, useToast as s, GoogleButton_default as t, applyTheme as u, SHEET_ROOT_ID as v, ensureSheetRoot as y };
-//# sourceMappingURL=GoogleButton-lxNEycyw.js.map
+//# sourceMappingURL=GoogleButton-DS-3rpUA.js.map

package/dist/GoogleButton-DS-3rpUA.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"GoogleButton-DS-3rpUA.js","names":["$slots","$attrs"],"sources":["../src/utils/sheet-root.ts","../src/utils/redirect.ts","../src/utils/haptics.ts","../src/composables/use-theme.ts","../src/composables/use-online.ts","../src/composables/use-visual-viewport.ts","../src/composables/use-toast.ts","../src/components/BaseAlert.vue","../src/components/BaseAlert.vue","../src/components/FormField.vue","../src/components/FormField.vue","../src/components/BaseInput.vue","../src/components/BaseInput.vue","../src/components/BaseSheet.vue","../src/components/BaseSheet.vue","../src/components/BaseCheckbox.vue","../src/components/BaseCheckbox.vue","../src/components/GoogleButton.vue","../src/components/GoogleButton.vue"],"sourcesContent":["/** The node every sheet teleports into. */\nexport const SHEET_ROOT_ID = 'sheet-root'\n\n/**\n * Returns the sheet root, creating it if the page has none.\n *\n * `BaseSheet` teleports out of the app's tree so the app behind it can be\n * marked `inert` — a sheet inside the element it is disabling would disable\n * itself. That means it needs a mount point outside `#app`.\n *\n * It used to need the consuming app to put `<div id=\"sheet-root\">` in its\n * `index.html`, and nothing said so. A page without it got a sheet that opened,\n * blocked the page, and rendered nothing: Vue warns to the console about a\n * missing teleport target and carries on, so the build is green, the types are\n * fine, and the screen is wrong. The kit's own showcase had exactly that bug,\n * which is how it was found.\n *\n * So the node is made on demand. An app that already declares one keeps it —\n * this only fills a gap, it never replaces.\n */\nexport function ensureSheetRoot(): string {\n const selector = `#${SHEET_ROOT_ID}`\n\n // Server-rendered: there is no document, and Teleport is skipped anyway.\n if (typeof document === 'undefined') return selector\n if (document.getElementById(SHEET_ROOT_ID)) return selector\n\n const root = document.createElement('div')\n root.id = SHEET_ROOT_ID\n document.body.appendChild(root)\n\n return selector\n}\n","/**\n * What a router hands back for one query key.\n *\n * Inlined rather than imported from vue-router: the shape is `string | null`\n * either way, and a helper this small should not drag a router into the\n * package's dependencies.\n */\nexport type QueryValue = string | null\n\n/**\n * Resolves a `?redirect=` query value into a safe in-app path.\n *\n * Only same-origin paths are accepted. Anything else falls back to `/`,\n * so a crafted link cannot bounce a user from the real login page to a\n * phishing clone.\n *\n * Pure: takes the query value instead of reading the router, so it also\n * works inside navigation guards and can be unit tested.\n *\n * @param target - Raw `route.query.redirect` value. May be a string, an\n * array (repeated query key), `null`, or `undefined`.\n * @returns A path starting with a single `/`. Defaults to `/`.\n *\n * @example\n * ```ts\n * // in a view\n * await router.push(safeRedirect(route.query.redirect))\n *\n * // in a guard\n * return safeRedirect(to.query.redirect)\n * ```\n *\n * @example\n * ```ts\n * safeRedirect('/week') // '/week'\n * safeRedirect('https://evil.com') // '/'\n * safeRedirect('//evil.com') // '/' (protocol-relative URL)\n * safeRedirect(['/a', '/b']) // '/'\n * safeRedirect(undefined) // '/'\n * ```\n */\nexport function safeRedirect(target: QueryValue | QueryValue[] | undefined): string {\n if (typeof target === 'string' && target.startsWith('/') && !target.startsWith('//')) {\n return target\n }\n\n return '/'\n}\n\n/**\n * Where to send somebody back to after signing in, without the fragment.\n *\n * Supabase's implicit OAuth flow hands the browser back with the access and\n * refresh tokens in the URL fragment. A fragment is client-side only — it is\n * never sent to a server. Copied into a query parameter it stops being one:\n * `/login?redirect=/%23access_token=…` is sent on the very next request and\n * lands in the host's access logs, in `Referer` headers and in browser history.\n *\n * So the redirect keeps the path and the query and drops everything from the\n * `#`. There is nothing after it worth returning to anyway.\n *\n * One of the two phone apps had this and the other was passing `fullPath`\n * straight through, which is the leak above with nothing in the way of it. That\n * is the shape of bug a shared kit exists to end: it was fixed once, in the app\n * whose author happened to think of it.\n *\n * @example\n * ```ts\n * toRedirectPath('/ledger?direction=out') // '/ledger?direction=out'\n * toRedirectPath('/#access_token=abc') // '/'\n * ```\n */\nexport function toRedirectPath(fullPath: string): string {\n const [path] = fullPath.split('#')\n\n return path === undefined || path === '' ? '/' : path\n}\n","/**\n * A short vibration for a confirmed tap.\n *\n * Optional chaining is not decoration: iOS Safari has no `vibrate` at all, and\n * calling it unguarded would throw on every marked day.\n *\n * @param duration - Milliseconds. Keep it under ~15ms; longer reads as an alert.\n */\nexport function tapFeedback(duration = 10): void {\n navigator.vibrate?.(duration)\n}\n","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 { onMounted, onUnmounted, readonly, ref } from 'vue'\n\n/**\n * Tracks whether the browser thinks it has a network connection.\n *\n * Note the limit: `navigator.onLine` only reports whether a network interface\n * is up, not whether requests actually succeed. Treat it as a hint for the UI,\n * never as a reason to skip error handling.\n *\n * Listeners are removed on unmount, so the composable is safe to call per view.\n *\n * @returns A readonly ref that flips with the browser's online/offline events.\n *\n * @example\n * ```ts\n * const isOnline = useOnline()\n * // <p v-if=\"!isOnline\">You're offline.</p>\n * ```\n */\nexport function useOnline() {\n const isOnline = ref(true)\n\n function update() {\n isOnline.value = navigator.onLine\n }\n\n onMounted(() => {\n update()\n window.addEventListener('online', update)\n window.addEventListener('offline', update)\n })\n\n onUnmounted(() => {\n window.removeEventListener('online', update)\n window.removeEventListener('offline', update)\n })\n\n return readonly(isOnline)\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","import { readonly, ref } from 'vue'\n\n/**\n * Saying that something happened.\n *\n * The reason this exists is a measurement rather than a preference: the word\n * \"toast\" appeared **zero times** across all three consuming apps. Not because\n * they had decided against it — because there was no mechanism, so every save,\n * every delete and every export finished in silence and the only way to know\n * it had worked was that nothing had visibly broken.\n *\n * ── What is deliberately not here ──\n *\n * **No text.** The kit never knows a sentence. Callers pass the message; a\n * component that called a translator would force one on the app.\n *\n * **Not for form errors.** A field that was rejected says so beside itself,\n * where the reader's eye already is and where it stays until fixed. A toast\n * that disappears after four seconds is the wrong place for something the\n * reader has to act on. Use `BaseAlert` and `FormField` for those; use this\n * for what has already happened.\n *\n * **A singleton, on purpose.** Two hosts would mean two stacks racing for the\n * same corner. The store lives at module scope and `ToastHost` renders it.\n */\nexport type ToastTone = 'info' | 'success' | 'warning' | 'danger'\n\nexport interface Toast {\n readonly id: number\n readonly message: string\n readonly tone: ToastTone\n /** Milliseconds on screen. `0` stays until dismissed. */\n readonly duration: number\n}\n\nexport interface ToastOptions {\n /** Milliseconds on screen; `0` stays until dismissed. */\n duration?: number | undefined\n}\n\n/**\n * Four seconds: long enough to read a short sentence twice, short enough that\n * a second action does not queue behind it.\n */\nconst DEFAULT_DURATION = 4000\n\n/**\n * A failure is read more slowly than a confirmation, and more often twice.\n */\nconst DANGER_DURATION = 7000\n\n/**\n * Three at once. A fourth pushes the oldest out rather than growing the stack\n * off the top of the screen — an action that produces ten toasts is a loop,\n * and a loop should not be able to cover the app it is running in.\n */\nconst MAX_VISIBLE = 3\n\nconst items = ref<Toast[]>([])\n\nlet nextId = 0\n\ninterface Countdown {\n handle: ReturnType<typeof setTimeout>\n remaining: number\n startedAt: number\n}\n\nconst countdowns = new Map<number, Countdown>()\n\nfunction clearCountdown(id: number): void {\n const countdown = countdowns.get(id)\n if (countdown === undefined) return\n\n clearTimeout(countdown.handle)\n countdowns.delete(id)\n}\n\n/** Removes a toast, whether it timed out or was dismissed. */\nfunction dismiss(id: number): void {\n clearCountdown(id)\n items.value = items.value.filter((item) => item.id !== id)\n}\n\n/** Removes everything on screen. For a route change, or a sign-out. */\nfunction dismissAll(): void {\n for (const id of countdowns.keys()) clearCountdown(id)\n items.value = []\n}\n\nfunction arm(id: number, remaining: number): void {\n // A timer is a browser thing. On a server there is nothing to time and\n // nothing to see, and arming one would keep the process alive past the last\n // page — which is how a prerender build hangs instead of finishing.\n if (typeof window === 'undefined' || remaining <= 0) return\n\n countdowns.set(id, {\n handle: setTimeout(() => dismiss(id), remaining),\n remaining,\n startedAt: Date.now(),\n })\n}\n\n/**\n * Stops the clock on a toast the reader is pointing at.\n *\n * Somebody who has moved the pointer onto it is reading it, and taking it away\n * mid-sentence is the one thing a notification must not do.\n */\nfunction pause(id: number): void {\n const countdown = countdowns.get(id)\n if (countdown === undefined) return\n\n clearTimeout(countdown.handle)\n countdowns.set(id, {\n ...countdown,\n remaining: Math.max(0, countdown.remaining - (Date.now() - countdown.startedAt)),\n })\n}\n\n/** Starts it again, from where it stopped rather than from the beginning. */\nfunction resume(id: number): void {\n const countdown = countdowns.get(id)\n if (countdown === undefined) return\n\n arm(id, countdown.remaining)\n}\n\nfunction push(tone: ToastTone, message: string, options: ToastOptions = {}): number {\n const id = ++nextId\n const duration = options.duration ?? (tone === 'danger' ? DANGER_DURATION : DEFAULT_DURATION)\n\n const next = [...items.value, { id, message, tone, duration }]\n\n while (next.length > MAX_VISIBLE) {\n const oldest = next.shift()\n if (oldest !== undefined) clearCountdown(oldest.id)\n }\n\n items.value = next\n arm(id, duration)\n\n return id\n}\n\n/**\n * The stack, and the four ways to add to it.\n *\n * @example\n * ```ts\n * const toast = useToast()\n *\n * toast.success(t('habit.saved'))\n * toast.danger(t('common.failed'), { duration: 0 }) // stays until dismissed\n *\n * const id = toast.info(t('export.preparing'), { duration: 0 })\n * toast.dismiss(id)\n * ```\n */\nexport function useToast() {\n return {\n /** Every toast on screen, oldest first. `ToastHost` renders this. */\n toasts: readonly(items),\n info: (message: string, options?: ToastOptions) => push('info', message, options),\n success: (message: string, options?: ToastOptions) => push('success', message, options),\n warning: (message: string, options?: ToastOptions) => push('warning', message, options),\n danger: (message: string, options?: ToastOptions) => push('danger', message, options),\n dismiss,\n dismissAll,\n pause,\n resume,\n }\n}\n","<script setup lang=\"ts\">\nimport { computed } from 'vue'\n\n/**\n * A message the reader has to take in before carrying on.\n *\n * Roles rather than colours, like everything else here: `info` is neutral,\n * `success` confirms, `warning` is a condition to know about, `danger` is\n * something that went wrong or is about to. A component that took a hex would\n * be a component that ignores the theme, and the theme is the whole reason the\n * kit exists.\n *\n * `assertive` decides how a screen reader treats it: a failed save interrupts,\n * a note about a form field waits its turn. Getting this wrong is invisible on\n * screen and rude in a screen reader, which is why it is a prop and not a\n * guess.\n */\nconst { tone = 'info', assertive = false } = defineProps<{\n tone?: 'info' | 'success' | 'warning' | 'danger' | undefined\n /** Announce immediately, interrupting. For failures the reader must act on. */\n assertive?: boolean | undefined\n}>()\n\nconst TONES = {\n info: 'border-hair bg-muted/40 text-ink',\n success: 'border-positive/35 bg-positive/8 text-ink',\n warning: 'border-warning/40 bg-warning/8 text-ink',\n danger: 'border-negative/35 bg-negative/8 text-ink',\n} as const\n\nconst MARKS = {\n info: 'bg-ink-soft/15 text-ink-soft',\n success: 'bg-positive/15 text-positive',\n warning: 'bg-warning/15 text-warning',\n danger: 'bg-negative/15 text-negative',\n} as const\n\nconst skin = computed(() => TONES[tone])\nconst mark = computed(() => MARKS[tone])\n</script>\n\n<template>\n <div\n class=\"rounded-card flex items-start gap-3 border px-4 py-3.5 text-sm leading-relaxed\"\n :class=\"skin\"\n :role=\"assertive ? 'alert' : 'status'\"\n :aria-live=\"assertive ? 'assertive' : 'polite'\"\n >\n <span\n v-if=\"$slots.mark\"\n class=\"mt-px grid size-6 shrink-0 place-items-center rounded-full text-xs font-semibold\"\n :class=\"mark\"\n aria-hidden=\"true\"\n >\n <slot name=\"mark\" />\n </span>\n\n <div class=\"min-w-0 flex-1\">\n <p v-if=\"$slots.title\" class=\"text-ink font-semibold\">\n <slot name=\"title\" />\n </p>\n <div :class=\"$slots.title ? 'mt-1' : ''\"><slot /></div>\n </div>\n\n <slot name=\"action\" />\n </div>\n</template>\n","<script setup lang=\"ts\">\nimport { computed } from 'vue'\n\n/**\n * A message the reader has to take in before carrying on.\n *\n * Roles rather than colours, like everything else here: `info` is neutral,\n * `success` confirms, `warning` is a condition to know about, `danger` is\n * something that went wrong or is about to. A component that took a hex would\n * be a component that ignores the theme, and the theme is the whole reason the\n * kit exists.\n *\n * `assertive` decides how a screen reader treats it: a failed save interrupts,\n * a note about a form field waits its turn. Getting this wrong is invisible on\n * screen and rude in a screen reader, which is why it is a prop and not a\n * guess.\n */\nconst { tone = 'info', assertive = false } = defineProps<{\n tone?: 'info' | 'success' | 'warning' | 'danger' | undefined\n /** Announce immediately, interrupting. For failures the reader must act on. */\n assertive?: boolean | undefined\n}>()\n\nconst TONES = {\n info: 'border-hair bg-muted/40 text-ink',\n success: 'border-positive/35 bg-positive/8 text-ink',\n warning: 'border-warning/40 bg-warning/8 text-ink',\n danger: 'border-negative/35 bg-negative/8 text-ink',\n} as const\n\nconst MARKS = {\n info: 'bg-ink-soft/15 text-ink-soft',\n success: 'bg-positive/15 text-positive',\n warning: 'bg-warning/15 text-warning',\n danger: 'bg-negative/15 text-negative',\n} as const\n\nconst skin = computed(() => TONES[tone])\nconst mark = computed(() => MARKS[tone])\n</script>\n\n<template>\n <div\n class=\"rounded-card flex items-start gap-3 border px-4 py-3.5 text-sm leading-relaxed\"\n :class=\"skin\"\n :role=\"assertive ? 'alert' : 'status'\"\n :aria-live=\"assertive ? 'assertive' : 'polite'\"\n >\n <span\n v-if=\"$slots.mark\"\n class=\"mt-px grid size-6 shrink-0 place-items-center rounded-full text-xs font-semibold\"\n :class=\"mark\"\n aria-hidden=\"true\"\n >\n <slot name=\"mark\" />\n </span>\n\n <div class=\"min-w-0 flex-1\">\n <p v-if=\"$slots.title\" class=\"text-ink font-semibold\">\n <slot name=\"title\" />\n </p>\n <div :class=\"$slots.title ? 'mt-1' : ''\"><slot /></div>\n </div>\n\n <slot name=\"action\" />\n </div>\n</template>\n","<script setup lang=\"ts\">\nimport { computed, useId } from 'vue'\n\n/**\n * A label, a hint, an error, and the wiring between them.\n *\n * This was inside `BaseInput`, which is why the kit had one form control\n * instead of five. The hard part of a field is not the `<input>` — it is\n * generating an id, pointing the label at it, deciding whether the description\n * is the hint or the error, and telling assistive tech which one to read. That\n * is identical for a select, a textarea and an input, and every app that\n * needed one of the other two wrote the whole thing again.\n *\n * The control comes in through the slot and is handed what it needs to be\n * described. It is a slot rather than a prop so the field never has to know\n * what it is wrapping.\n *\n * @example\n * ```vue\n * <FormField :label=\"t('profile.name')\" :error=\"errors.name\">\n * <template #default=\"{ id, describedBy, invalid }\">\n * <input :id=\"id\" :aria-describedby=\"describedBy\" :aria-invalid=\"invalid\" />\n * </template>\n * </FormField>\n * ```\n */\nconst {\n label,\n error = '',\n hint = '',\n labelHidden = false,\n size = 'md',\n} = defineProps<{\n label: string\n error?: string | undefined\n hint?: string | undefined\n /**\n * `sm` for a control that sits inside something else — a toolbar, a filter\n * row, a settings line — rather than in a form of its own.\n *\n * It exists because every hand-written select in all three apps was the\n * small one, and the kit only had the large one. A part is not reusable if\n * reaching for it costs a size somebody chose on purpose.\n */\n size?: 'sm' | 'md' | undefined\n /**\n * Hides the label visually but keeps it for assistive tech. For fields whose\n * surrounding row already names them — dropping the label entirely would\n * leave the control with no accessible name at all.\n */\n labelHidden?: boolean | undefined\n}>()\n\nconst id = useId()\nconst errorId = `${id}-error`\nconst hintId = `${id}-hint`\n\n/* One description at a time, and the error wins. Announcing the hint as well\n buries the reason the field was rejected under advice the reader has already\n had. */\nconst describedBy = computed(() => {\n if (error) return errorId\n if (hint) return hintId\n return undefined\n})\n</script>\n\n<template>\n <div class=\"flex flex-col\" :class=\"size === 'sm' ? 'gap-1' : 'gap-1.5'\">\n <label\n :for=\"id\"\n class=\"font-medium\"\n :class=\"[\n labelHidden ? 'sr-only' : '',\n size === 'sm' ? 'text-ink-soft text-xs' : 'text-ink text-sm',\n ]\"\n >\n {{ label }}\n </label>\n\n <slot :id=\"id\" :described-by=\"describedBy\" :invalid=\"Boolean(error)\" :size=\"size\" />\n\n <p v-if=\"error\" :id=\"errorId\" class=\"text-negative text-xs\">{{ error }}</p>\n <p v-else-if=\"hint\" :id=\"hintId\" class=\"text-ink-soft text-xs\">{{ hint }}</p>\n </div>\n</template>\n","<script setup lang=\"ts\">\nimport { computed, useId } from 'vue'\n\n/**\n * A label, a hint, an error, and the wiring between them.\n *\n * This was inside `BaseInput`, which is why the kit had one form control\n * instead of five. The hard part of a field is not the `<input>` — it is\n * generating an id, pointing the label at it, deciding whether the description\n * is the hint or the error, and telling assistive tech which one to read. That\n * is identical for a select, a textarea and an input, and every app that\n * needed one of the other two wrote the whole thing again.\n *\n * The control comes in through the slot and is handed what it needs to be\n * described. It is a slot rather than a prop so the field never has to know\n * what it is wrapping.\n *\n * @example\n * ```vue\n * <FormField :label=\"t('profile.name')\" :error=\"errors.name\">\n * <template #default=\"{ id, describedBy, invalid }\">\n * <input :id=\"id\" :aria-describedby=\"describedBy\" :aria-invalid=\"invalid\" />\n * </template>\n * </FormField>\n * ```\n */\nconst {\n label,\n error = '',\n hint = '',\n labelHidden = false,\n size = 'md',\n} = defineProps<{\n label: string\n error?: string | undefined\n hint?: string | undefined\n /**\n * `sm` for a control that sits inside something else — a toolbar, a filter\n * row, a settings line — rather than in a form of its own.\n *\n * It exists because every hand-written select in all three apps was the\n * small one, and the kit only had the large one. A part is not reusable if\n * reaching for it costs a size somebody chose on purpose.\n */\n size?: 'sm' | 'md' | undefined\n /**\n * Hides the label visually but keeps it for assistive tech. For fields whose\n * surrounding row already names them — dropping the label entirely would\n * leave the control with no accessible name at all.\n */\n labelHidden?: boolean | undefined\n}>()\n\nconst id = useId()\nconst errorId = `${id}-error`\nconst hintId = `${id}-hint`\n\n/* One description at a time, and the error wins. Announcing the hint as well\n buries the reason the field was rejected under advice the reader has already\n had. */\nconst describedBy = computed(() => {\n if (error) return errorId\n if (hint) return hintId\n return undefined\n})\n</script>\n\n<template>\n <div class=\"flex flex-col\" :class=\"size === 'sm' ? 'gap-1' : 'gap-1.5'\">\n <label\n :for=\"id\"\n class=\"font-medium\"\n :class=\"[\n labelHidden ? 'sr-only' : '',\n size === 'sm' ? 'text-ink-soft text-xs' : 'text-ink text-sm',\n ]\"\n >\n {{ label }}\n </label>\n\n <slot :id=\"id\" :described-by=\"describedBy\" :invalid=\"Boolean(error)\" :size=\"size\" />\n\n <p v-if=\"error\" :id=\"errorId\" class=\"text-negative text-xs\">{{ error }}</p>\n <p v-else-if=\"hint\" :id=\"hintId\" class=\"text-ink-soft text-xs\">{{ hint }}</p>\n </div>\n</template>\n","<script setup lang=\"ts\">\nimport FormField from './FormField.vue'\n\ndefineOptions({ inheritAttrs: false })\n\nconst {\n label,\n error = '',\n hint = '',\n type = 'text',\n labelHidden = false,\n size = 'md',\n variant = 'default',\n} = defineProps<{\n label: string\n error?: string | undefined\n hint?: string | undefined\n /**\n * Hides the label visually but keeps it for assistive tech. For fields whose\n * surrounding row already names them — dropping the label entirely would\n * leave the input with no accessible name at all.\n */\n labelHidden?: boolean | undefined\n /**\n * Every type a text field can be, because the ones missing were the ones\n * apps needed: `date` and `search` were hand-written three times each and\n * `url` twice, in files that already imported this component.\n */\n type?:\n | 'text'\n | 'email'\n | 'password'\n | 'number'\n | 'search'\n | 'tel'\n | 'url'\n | 'date'\n | 'time'\n | 'datetime-local'\n | undefined\n /** `sm` for a field inside a row rather than in a form of its own. */\n size?: 'sm' | 'md' | undefined\n /**\n * `unstyled` keeps the wiring and drops the surface.\n *\n * The label, the generated id, `aria-describedby` and the error are what a\n * field is; the border and the height are what it looks like. A search box\n * inside a bordered row, a url field in an editor popover — those places\n * were hand-writing the whole thing to avoid the appearance, and losing the\n * wiring with it.\n *\n * The same reasoning as `BaseButton`'s `unstyled`, and the same test: a\n * primitive is finished when the app can take its behaviour without its\n * paint.\n */\n variant?: 'default' | 'unstyled' | undefined\n}>()\n\n/* The control keeps 16px at every size, and that is not a rounding of the\n scale — it is the rule. iOS zooms the viewport when a text field it is\n focusing has a font-size under 16px, and the page never zooms back. Both\n phone consumers had written `input { font-size: 16px }` into their base\n layer to stop exactly this, and a `text-sm` utility from here would have\n overridden it in every app at once.\n\n So `size` reaches the label and the spacing, through FormField, and leaves\n the typing target alone. `BaseSelect` is free to shrink: a select opens a\n native picker rather than a caret, and does not trigger the zoom. */\nconst CONTROL_CLASS = 'h-11 text-base'\n\n/**\n * A number field's value is a number.\n *\n * Typed to `string` alone, `type=\"number\"` forced the caller to keep a string\n * ref and convert on both sides of it — and a component you have to wrap in\n * order to use is one you write yourself instead, which is exactly what the\n * first numeric field tried to reach for it did.\n */\nconst model = defineModel<string | number | undefined>()\n</script>\n\n<template>\n <FormField :label=\"label\" :error=\"error\" :hint=\"hint\" :label-hidden=\"labelHidden\" :size=\"size\">\n <template #default=\"{ id, describedBy, invalid }\">\n <input\n :id=\"id\"\n v-model=\"model\"\n :type=\"type\"\n :aria-invalid=\"invalid\"\n :aria-describedby=\"describedBy\"\n v-bind=\"$attrs\"\n :class=\"[\n variant === 'unstyled'\n ? ''\n : 'control text-ink rounded-card focus-visible:outline-primary px-3 focus-visible:outline-2 focus-visible:outline-offset-1',\n variant === 'unstyled' ? 'text-base' : CONTROL_CLASS,\n variant !== 'unstyled' && invalid ? 'border-negative' : '',\n ]\"\n />\n </template>\n </FormField>\n</template>\n","<script setup lang=\"ts\">\nimport FormField from './FormField.vue'\n\ndefineOptions({ inheritAttrs: false })\n\nconst {\n label,\n error = '',\n hint = '',\n type = 'text',\n labelHidden = false,\n size = 'md',\n variant = 'default',\n} = defineProps<{\n label: string\n error?: string | undefined\n hint?: string | undefined\n /**\n * Hides the label visually but keeps it for assistive tech. For fields whose\n * surrounding row already names them — dropping the label entirely would\n * leave the input with no accessible name at all.\n */\n labelHidden?: boolean | undefined\n /**\n * Every type a text field can be, because the ones missing were the ones\n * apps needed: `date` and `search` were hand-written three times each and\n * `url` twice, in files that already imported this component.\n */\n type?:\n | 'text'\n | 'email'\n | 'password'\n | 'number'\n | 'search'\n | 'tel'\n | 'url'\n | 'date'\n | 'time'\n | 'datetime-local'\n | undefined\n /** `sm` for a field inside a row rather than in a form of its own. */\n size?: 'sm' | 'md' | undefined\n /**\n * `unstyled` keeps the wiring and drops the surface.\n *\n * The label, the generated id, `aria-describedby` and the error are what a\n * field is; the border and the height are what it looks like. A search box\n * inside a bordered row, a url field in an editor popover — those places\n * were hand-writing the whole thing to avoid the appearance, and losing the\n * wiring with it.\n *\n * The same reasoning as `BaseButton`'s `unstyled`, and the same test: a\n * primitive is finished when the app can take its behaviour without its\n * paint.\n */\n variant?: 'default' | 'unstyled' | undefined\n}>()\n\n/* The control keeps 16px at every size, and that is not a rounding of the\n scale — it is the rule. iOS zooms the viewport when a text field it is\n focusing has a font-size under 16px, and the page never zooms back. Both\n phone consumers had written `input { font-size: 16px }` into their base\n layer to stop exactly this, and a `text-sm` utility from here would have\n overridden it in every app at once.\n\n So `size` reaches the label and the spacing, through FormField, and leaves\n the typing target alone. `BaseSelect` is free to shrink: a select opens a\n native picker rather than a caret, and does not trigger the zoom. */\nconst CONTROL_CLASS = 'h-11 text-base'\n\n/**\n * A number field's value is a number.\n *\n * Typed to `string` alone, `type=\"number\"` forced the caller to keep a string\n * ref and convert on both sides of it — and a component you have to wrap in\n * order to use is one you write yourself instead, which is exactly what the\n * first numeric field tried to reach for it did.\n */\nconst model = defineModel<string | number | undefined>()\n</script>\n\n<template>\n <FormField :label=\"label\" :error=\"error\" :hint=\"hint\" :label-hidden=\"labelHidden\" :size=\"size\">\n <template #default=\"{ id, describedBy, invalid }\">\n <input\n :id=\"id\"\n v-model=\"model\"\n :type=\"type\"\n :aria-invalid=\"invalid\"\n :aria-describedby=\"describedBy\"\n v-bind=\"$attrs\"\n :class=\"[\n variant === 'unstyled'\n ? ''\n : 'control text-ink rounded-card focus-visible:outline-primary px-3 focus-visible:outline-2 focus-visible:outline-offset-1',\n variant === 'unstyled' ? 'text-base' : CONTROL_CLASS,\n variant !== 'unstyled' && invalid ? 'border-negative' : '',\n ]\"\n />\n </template>\n </FormField>\n</template>\n","<script setup lang=\"ts\">\nimport BaseButton from './BaseButton.vue'\nimport { computed, nextTick, onUnmounted, ref, watch } from 'vue'\nimport { X } from 'lucide-vue-next'\n\nimport { useVisualViewport } from '../composables/use-visual-viewport'\nimport { ensureSheetRoot } from '../utils/sheet-root'\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\n/* Resolved in setup, before the first render, so the Teleport always has a\n target to find. */\nconst sheetRoot = ensureSheetRoot()\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=\"sheetRoot\">\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 \n <section\n ref=\"panel\"\n role=\"dialog\"\n aria-modal=\"true\"\n :aria-label=\"title\"\n tabindex=\"-1\"\n class=\"sheet-panel surface-overlay relative flex max-h-[94%] min-h-[56dvh] flex-col rounded-t-[28px] 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 \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 var(--duration-base) 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 var(--duration-slow) var(--ease-sheet);\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'\nimport { ensureSheetRoot } from '../utils/sheet-root'\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\n/* Resolved in setup, before the first render, so the Teleport always has a\n target to find. */\nconst sheetRoot = ensureSheetRoot()\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=\"sheetRoot\">\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 \n <section\n ref=\"panel\"\n role=\"dialog\"\n aria-modal=\"true\"\n :aria-label=\"title\"\n tabindex=\"-1\"\n class=\"sheet-panel surface-overlay relative flex max-h-[94%] min-h-[56dvh] flex-col rounded-t-[28px] 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 \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 var(--duration-base) 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 var(--duration-slow) var(--ease-sheet);\n}\n.sheet-enter-from .sheet-panel,\n.sheet-leave-to .sheet-panel {\n transform: translateY(6%);\n}\n\n@media (prefers-reduced-motion: reduce) {\n .sheet-enter-from .sheet-panel,\n .sheet-leave-to .sheet-panel {\n transform: none;\n }\n}\n</style>\n","<script setup lang=\"ts\">\nimport { computed, useId } from 'vue'\n\n/**\n * A single checkbox, with its label beside it.\n *\n * Deliberately not built on `FormField`. That component stacks a label above\n * its control, which is right for every field where the control is a box you\n * type into and wrong here: a checkbox is read as one sentence with a mark in\n * front of it, and putting the words above the box breaks the association a\n * sighted reader makes before they get to the accessible name.\n *\n * The whole row is the label, so the words are part of the hit target. On a\n * phone that is the difference between a control and a coin toss.\n */\nconst {\n label,\n error = '',\n hint = '',\n disabled = false,\n size = 'md',\n} = defineProps<{\n label: string\n error?: string | undefined\n hint?: string | undefined\n disabled?: boolean | undefined\n /**\n * `md` is a setting: a line the reader came here to change, in ink.\n * `sm` is an aside — \"remember me\" under a sign-in form, \"show the ones I\n * have learned\" above a list — quieter and tighter.\n *\n * The two are not a guess. Of the five hand-written checkboxes across the\n * three consuming apps, four were the aside and one was the setting, and\n * they differed in exactly these two ways.\n */\n size?: 'sm' | 'md' | undefined\n}>()\n\nconst model = defineModel<boolean>({ default: false })\n\nconst id = useId()\nconst errorId = `${id}-error`\nconst hintId = `${id}-hint`\n\nconst describedBy = computed(() => {\n if (error) return errorId\n if (hint) return hintId\n return undefined\n})\n</script>\n\n<template>\n <div class=\"flex flex-col gap-1.5\">\n <label\n :for=\"id\"\n class=\"flex items-center\"\n :class=\"[size === 'sm' ? 'gap-2' : 'gap-3', disabled ? 'opacity-50' : 'cursor-pointer']\"\n >\n <input\n :id=\"id\"\n v-model=\"model\"\n type=\"checkbox\"\n :disabled=\"disabled\"\n :aria-invalid=\"Boolean(error)\"\n :aria-describedby=\"describedBy\"\n class=\"accent-primary focus-visible:outline-primary size-4 shrink-0 focus-visible:outline-2 focus-visible:outline-offset-2\"\n />\n <span class=\"text-sm\" :class=\"size === 'sm' ? 'text-ink-soft' : 'text-ink'\">\n {{ label }}\n </span>\n </label>\n\n <p v-if=\"error\" :id=\"errorId\" class=\"text-negative text-xs\">{{ error }}</p>\n <p v-else-if=\"hint\" :id=\"hintId\" class=\"text-ink-soft text-xs\">{{ hint }}</p>\n </div>\n</template>\n","<script setup lang=\"ts\">\nimport { computed, useId } from 'vue'\n\n/**\n * A single checkbox, with its label beside it.\n *\n * Deliberately not built on `FormField`. That component stacks a label above\n * its control, which is right for every field where the control is a box you\n * type into and wrong here: a checkbox is read as one sentence with a mark in\n * front of it, and putting the words above the box breaks the association a\n * sighted reader makes before they get to the accessible name.\n *\n * The whole row is the label, so the words are part of the hit target. On a\n * phone that is the difference between a control and a coin toss.\n */\nconst {\n label,\n error = '',\n hint = '',\n disabled = false,\n size = 'md',\n} = defineProps<{\n label: string\n error?: string | undefined\n hint?: string | undefined\n disabled?: boolean | undefined\n /**\n * `md` is a setting: a line the reader came here to change, in ink.\n * `sm` is an aside — \"remember me\" under a sign-in form, \"show the ones I\n * have learned\" above a list — quieter and tighter.\n *\n * The two are not a guess. Of the five hand-written checkboxes across the\n * three consuming apps, four were the aside and one was the setting, and\n * they differed in exactly these two ways.\n */\n size?: 'sm' | 'md' | undefined\n}>()\n\nconst model = defineModel<boolean>({ default: false })\n\nconst id = useId()\nconst errorId = `${id}-error`\nconst hintId = `${id}-hint`\n\nconst describedBy = computed(() => {\n if (error) return errorId\n if (hint) return hintId\n return undefined\n})\n</script>\n\n<template>\n <div class=\"flex flex-col gap-1.5\">\n <label\n :for=\"id\"\n class=\"flex items-center\"\n :class=\"[size === 'sm' ? 'gap-2' : 'gap-3', disabled ? 'opacity-50' : 'cursor-pointer']\"\n >\n <input\n :id=\"id\"\n v-model=\"model\"\n type=\"checkbox\"\n :disabled=\"disabled\"\n :aria-invalid=\"Boolean(error)\"\n :aria-describedby=\"describedBy\"\n class=\"accent-primary focus-visible:outline-primary size-4 shrink-0 focus-visible:outline-2 focus-visible:outline-offset-2\"\n />\n <span class=\"text-sm\" :class=\"size === 'sm' ? 'text-ink-soft' : 'text-ink'\">\n {{ label }}\n </span>\n </label>\n\n <p v-if=\"error\" :id=\"errorId\" class=\"text-negative text-xs\">{{ error }}</p>\n <p v-else-if=\"hint\" :id=\"hintId\" class=\"text-ink-soft text-xs\">{{ hint }}</p>\n </div>\n</template>\n","<script setup lang=\"ts\">\n/**\n * Sign in with Google, in Google's own clothes.\n *\n * The mark is inlined rather than themed, and that is not an oversight: Google's\n * brand guidelines require their colours, and a reader scanning for the button\n * they already know is scanning for those exact four. It is the one component\n * here that carries a colour value, and the reason is written on the path.\n */\nconst { label, disabled = false } = defineProps<{\n label: string\n /**\n * Greyed out and unclickable while a sign-in is already in flight.\n *\n * A real prop rather than a fallthrough attribute: the button needs to look\n * disabled as well as be it, and a bare `disabled` landing on the element by\n * itself gets the second half only.\n */\n disabled?: boolean | undefined\n}>()\n\nconst emit = defineEmits<{ click: [] }>()\n</script>\n\n<template>\n <button\n type=\"button\"\n :disabled=\"disabled\"\n class=\"control text-ink rounded-card hover:bg-muted flex h-11 w-full items-center justify-center gap-2 text-sm font-medium transition-colors duration-(--duration-fast) active:scale-(--press-scale) disabled:pointer-events-none disabled:opacity-50\"\n @click=\"emit('click')\"\n >\n \n <svg class=\"size-4\" viewBox=\"0 0 48 48\" aria-hidden=\"true\">\n <path\n fill=\"#EA4335\"\n d=\"M24 9.5c3.5 0 6.6 1.2 9 3.6l6.7-6.7C35.6 2.7 30.2.5 24 .5 14.6.5 6.5 5.9 2.6 13.7l7.8 6.1C12.3 13.7 17.7 9.5 24 9.5z\"\n />\n <path\n fill=\"#4285F4\"\n d=\"M46.5 24.5c0-1.6-.1-3.1-.4-4.5H24v9h12.7c-.6 3-2.3 5.6-4.9 7.3l7.6 5.9c4.4-4.1 7.1-10.2 7.1-17.7z\"\n />\n <path\n fill=\"#FBBC05\"\n d=\"M10.4 28.2a14.6 14.6 0 0 1 0-8.4l-7.8-6.1a24 24 0 0 0 0 20.6l7.8-6.1z\"\n />\n <path\n fill=\"#34A853\"\n d=\"M24 47.5c6.2 0 11.5-2 15.4-5.6l-7.6-5.9c-2.1 1.4-4.8 2.3-7.8 2.3-6.3 0-11.7-4.2-13.6-10l-7.8 6.1C6.5 42.1 14.6 47.5 24 47.5z\"\n />\n </svg>\n {{ label }}\n </button>\n</template>\n","<script setup lang=\"ts\">\n/**\n * Sign in with Google, in Google's own clothes.\n *\n * The mark is inlined rather than themed, and that is not an oversight: Google's\n * brand guidelines require their colours, and a reader scanning for the button\n * they already know is scanning for those exact four. It is the one component\n * here that carries a colour value, and the reason is written on the path.\n */\nconst { label, disabled = false } = defineProps<{\n label: string\n /**\n * Greyed out and unclickable while a sign-in is already in flight.\n *\n * A real prop rather than a fallthrough attribute: the button needs to look\n * disabled as well as be it, and a bare `disabled` landing on the element by\n * itself gets the second half only.\n */\n disabled?: boolean | undefined\n}>()\n\nconst emit = defineEmits<{ click: [] }>()\n</script>\n\n<template>\n <button\n type=\"button\"\n :disabled=\"disabled\"\n class=\"control text-ink rounded-card hover:bg-muted flex h-11 w-full items-center justify-center gap-2 text-sm font-medium transition-colors duration-(--duration-fast) active:scale-(--press-scale) disabled:pointer-events-none disabled:opacity-50\"\n @click=\"emit('click')\"\n >\n \n <svg class=\"size-4\" viewBox=\"0 0 48 48\" aria-hidden=\"true\">\n <path\n fill=\"#EA4335\"\n d=\"M24 9.5c3.5 0 6.6 1.2 9 3.6l6.7-6.7C35.6 2.7 30.2.5 24 .5 14.6.5 6.5 5.9 2.6 13.7l7.8 6.1C12.3 13.7 17.7 9.5 24 9.5z\"\n />\n <path\n fill=\"#4285F4\"\n d=\"M46.5 24.5c0-1.6-.1-3.1-.4-4.5H24v9h12.7c-.6 3-2.3 5.6-4.9 7.3l7.6 5.9c4.4-4.1 7.1-10.2 7.1-17.7z\"\n />\n <path\n fill=\"#FBBC05\"\n d=\"M10.4 28.2a14.6 14.6 0 0 1 0-8.4l-7.8-6.1a24 24 0 0 0 0 20.6l7.8-6.1z\"\n />\n <path\n fill=\"#34A853\"\n d=\"M24 47.5c6.2 0 11.5-2 15.4-5.6l-7.6-5.9c-2.1 1.4-4.8 2.3-7.8 2.3-6.3 0-11.7-4.2-13.6-10l-7.8 6.1C6.5 42.1 14.6 47.5 24 47.5z\"\n />\n </svg>\n {{ label }}\n </button>\n</template>\n"],"mappings":"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"}

package/dist/{SettingsGroup-JsD19V81.js → SettingsGroup-BXkajKGl.js} RENAMED Viewed

@@ -185,7 +185,7 @@ function needsIosInstall() {
 //#region src/components/SettingsGroup.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = { class: "flex flex-col gap-2" };
 var _hoisted_2 = { class: "text-ink-soft px-1 text-xs font-semibold tracking-wide uppercase" };
-var _hoisted_3 = { class: "border-hair bg-surface rounded-card divide-hair divide-y overflow-hidden border" };
+var _hoisted_3 = { class: "surface rounded-card divide-hair divide-y overflow-hidden" };
 //#endregion
 //#region src/components/SettingsGroup.vue
 var SettingsGroup_default = /* @__PURE__ */ defineComponent({
@@ -207,4 +207,4 @@ var SettingsGroup_default = /* @__PURE__ */ defineComponent({
 //#endregion
 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 };
-//# sourceMappingURL=SettingsGroup-JsD19V81.js.map
+//# sourceMappingURL=SettingsGroup-BXkajKGl.js.map

package/dist/{SettingsGroup-JsD19V81.js.map → SettingsGroup-BXkajKGl.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SettingsGroup-JsD19V81.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\">\n/\n A titled run of settings rows.\n \n The heading is a real `h2` rather than styled text, because a settings screen\n * is long and the headings are how somebody moves through it without reading\n * all of it. Uppercase and quiet in the design, structural in the markup.\n /\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\">\n/\n A titled run of settings rows.\n \n The heading is a real `h2` rather than styled text, because a settings screen\n * is long and the headings are how somebody moves through it without reading\n * all of it. Uppercase and quiet in the design, structural in the markup.\n */\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;;;;;;;;;;;;;;;;;;;;GC5BE,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"}
1	+ {"version":3,"file":"SettingsGroup-BXkajKGl.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\">\n/\n A titled run of settings rows.\n \n The heading is a real `h2` rather than styled text, because a settings screen\n * is long and the headings are how somebody moves through it without reading\n * all of it. Uppercase and quiet in the design, structural in the markup.\n /\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=\"surface rounded-card divide-hair divide-y overflow-hidden\">\n <slot />\n </div>\n </section>\n</template>\n","<script setup lang=\"ts\">\n/\n A titled run of settings rows.\n \n The heading is a real `h2` rather than styled text, because a settings screen\n * is long and the headings are how somebody moves through it without reading\n * all of it. Uppercase and quiet in the design, structural in the markup.\n */\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=\"surface rounded-card divide-hair divide-y overflow-hidden\">\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;;;;;;;;;;;;;;;;;;;;GC5BE,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"}

package/dist/{SettingsRow-3lPRJbBZ.js → SettingsRow-BXFn8tCk.js} RENAMED Viewed

@@ -44,16 +44,16 @@ var BaseButton_default = /* @__PURE__ */ defineComponent({
 	},
 	setup(__props) {
 		const VARIANT_CLASS = {
-			primary: "bg-primary text-white hover:bg-primary/90",
-			secondary: "border-hair bg-surface text-ink border hover:bg-muted",
+			primary: "bg-primary text-on-primary shadow-(--shadow-control) hover:bg-primary/90",
+			secondary: "control text-ink hover:bg-muted",
 			ghost: "bg-transparent text-ink hover:bg-muted",
 			destructive: "bg-transparent text-ink-soft hover:text-negative",
 			row: "w-full justify-start text-left bg-transparent text-ink hover:bg-muted",
 			quiet: "bg-transparent text-ink-soft hover:bg-muted hover:text-ink",
-			danger: "bg-negative text-white hover:bg-negative/90",
-			positive: "bg-positive text-white hover:bg-positive/90",
-			warning: "bg-warning text-white hover:bg-warning/90",
-			accent: "bg-accent text-white hover:bg-accent/90",
+			danger: "bg-negative text-on-negative shadow-(--shadow-control) hover:bg-negative/90",
+			positive: "bg-positive text-on-positive shadow-(--shadow-control) hover:bg-positive/90",
+			warning: "bg-warning text-on-warning shadow-(--shadow-control) hover:bg-warning/90",
+			accent: "bg-accent text-on-accent shadow-(--shadow-control) hover:bg-accent/90",
 			link: "bg-transparent underline underline-offset-2 hover:opacity-80",
 			unstyled: ""
 		};
@@ -88,9 +88,9 @@ var BaseButton_default = /* @__PURE__ */ defineComponent({
 			return __props.icon ? ICON_SIZE_CLASS[__props.size] : SIZE_CLASS[__props.size];
 		});
 		const PRESSED_CLASS = {
-			ghost: "bg-primary text-white hover:bg-primary/90",
-			quiet: "bg-primary text-white hover:bg-primary/90",
-			secondary: "bg-primary border-primary text-white hover:bg-primary/90",
+			ghost: "bg-primary text-on-primary hover:bg-primary/90",
+			quiet: "bg-primary text-on-primary hover:bg-primary/90",
+			secondary: "bg-primary border-primary text-on-primary hover:bg-primary/90",
 			row: "w-full justify-start text-left bg-muted text-ink hover:bg-muted"
 		};
 		const surface = computed(() => {
@@ -100,9 +100,9 @@ var BaseButton_default = /* @__PURE__ */ defineComponent({
 		});
 		const shell = computed(() => {
 			if (__props.variant === "unstyled") return "";
-			const feel = "transition-[transform,color,background-color,border-color] duration-100 select-none";
+			const feel = "transition-[transform,translate,scale,color,background-color,border-color,box-shadow] duration-(--duration-fast) ease-standard select-none";
 			if (__props.variant === "row") return `inline-flex items-center gap-2 font-medium ${feel}`;
-			return `inline-flex items-center justify-center gap-2 font-medium ${feel} active:scale-95`;
+			return `inline-flex items-center justify-center gap-2 font-medium ${feel} active:scale-(--press-scale) active:translate-x-(--press-offset) active:translate-y-(--press-offset) active:shadow-(--shadow-control-pressed)`;
 		});
 		const radius = computed(() => {
 			if (__props.variant === "unstyled") return "";
@@ -207,4 +207,4 @@ var SettingsRow_default = /* @__PURE__ */ defineComponent({
 //#endregion
 export { BaseButton_default as n, SettingsRow_default as t };
-//# sourceMappingURL=SettingsRow-3lPRJbBZ.js.map
+//# sourceMappingURL=SettingsRow-BXFn8tCk.js.map