rei-kit 0.14.0 → 0.15.0

package/dist/shell/mobile.css

@@ -91,3 +91,52 @@
     filter: none;
   }
 }
+
+/* ── Between a guide's slides ───────────────────────────────────────────────
+   Used by `TourShell`, and unscoped on purpose: the slides are the app's, so a
+   scoped rule inside the component could never reach them.
+
+   Leaving takes half the time of arriving, the same reasoning as the page
+   fade — the slide being left is not worth watching. */
+.tour-forward-enter-active,
+.tour-backward-enter-active {
+  transition:
+    opacity 260ms ease-out,
+    transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+.tour-forward-leave-active,
+.tour-backward-leave-active {
+  transition:
+    opacity 130ms ease-in,
+    transform 130ms ease-in;
+}
+
+.tour-forward-enter-from {
+  opacity: 0;
+  transform: translateX(1.25rem);
+}
+
+.tour-forward-leave-to {
+  opacity: 0;
+  transform: translateX(-0.75rem);
+}
+
+.tour-backward-enter-from {
+  opacity: 0;
+  transform: translateX(-1.25rem);
+}
+
+.tour-backward-leave-to {
+  opacity: 0;
+  transform: translateX(0.75rem);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .tour-forward-enter-from,
+  .tour-forward-leave-to,
+  .tour-backward-enter-from,
+  .tour-backward-leave-to {
+    transform: none;
+  }
+}

package/dist/styles.css

@@ -25,50 +25,18 @@
 }
 }
 
-.tour-enter-active[data-v-75292716],
-.tour-leave-active[data-v-75292716] {
+/* The dialog's own fade. The *slide* transition is not here: a scoped rule
+   cannot reach slot content, which belongs to the caller's scope, so
+   `.tour-forward-*` and `.tour-backward-*` ship unscoped in
+   `rei-kit/shell/mobile.css` where the caller's slide can actually see them. */
+.tour-enter-active[data-v-1b9e7f4d],
+.tour-leave-active[data-v-1b9e7f4d] {
   transition: opacity 220ms ease;
 }
-.tour-enter-from[data-v-75292716],
-.tour-leave-to[data-v-75292716] {
+.tour-enter-from[data-v-1b9e7f4d],
+.tour-leave-to[data-v-1b9e7f4d] {
   opacity: 0;
 }
-.tour-forward-enter-active[data-v-75292716],
-.tour-backward-enter-active[data-v-75292716] {
-  transition:
-    opacity 260ms ease-out,
-    transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
-}
-.tour-forward-leave-active[data-v-75292716],
-.tour-backward-leave-active[data-v-75292716] {
-  transition:
-    opacity 130ms ease-in,
-    transform 130ms ease-in;
-}
-.tour-forward-enter-from[data-v-75292716] {
-  opacity: 0;
-  transform: translateX(1.25rem);
-}
-.tour-forward-leave-to[data-v-75292716] {
-  opacity: 0;
-  transform: translateX(-0.75rem);
-}
-.tour-backward-enter-from[data-v-75292716] {
-  opacity: 0;
-  transform: translateX(-1.25rem);
-}
-.tour-backward-leave-to[data-v-75292716] {
-  opacity: 0;
-  transform: translateX(0.75rem);
-}
-@media (prefers-reduced-motion: reduce) {
-.tour-forward-enter-from[data-v-75292716],
-  .tour-forward-leave-to[data-v-75292716],
-  .tour-backward-enter-from[data-v-75292716],
-  .tour-backward-leave-to[data-v-75292716] {
-    transform: none;
-}
-}
 
 /* Movement is small and downward from the top, upward from the bottom — the
    direction it came from either way. */

package/dist/supabase/auth-errors.d.ts

@@ -0,0 +1,40 @@
+/**
+ * The Supabase auth codes a sign-in screen has to have wording for.
+ *
+ * Exported so an app can assert its locale files cover them. The list is not
+ * every code Supabase can send — it is the ones that are the user's to act on,
+ * which is the only kind worth a sentence of its own. Everything else is a
+ * fault, and a fault reads the same whatever caused it.
+ */
+export declare const AUTH_ERROR_CODES: readonly ["invalid_credentials", "email_not_confirmed", "user_already_exists", "email_exists", "weak_password", "over_request_rate_limit", "over_email_send_rate_limit", "signup_disabled", "user_banned"];
+export type AuthErrorCode = (typeof AUTH_ERROR_CODES)[number];
+export type AuthMessageKeyOptions = {
+    /**
+     * Codes this app has wording for beyond the shared list.
+     *
+     * A key is only an improvement on the generic message if something
+     * translates it, so widening the list is the app's decision and not the
+     * kit's: an app that has not written `authError.validation_failed` is better
+     * served by the sentence it has than by a key rendered raw on screen.
+     */
+    extraCodes?: readonly string[] | undefined;
+    /** The key returned when nothing matches. */
+    fallback?: string | undefined;
+};
+/**
+ * Maps an auth failure to a message key.
+ *
+ * Returns a key rather than a sentence so the caller translates it at render
+ * time — an error stored before a language switch still reads correctly after,
+ * which is the whole reason this returns a string that looks unfinished.
+ *
+ * Recognising a Supabase error is Supabase's business, so the type guard stays
+ * on this side of the boundary and the caller only ever sees a key.
+ *
+ * @example
+ * ```ts
+ * serverError.value = toAuthMessageKey(error) // 'authError.invalid_credentials'
+ * // <p>{{ $t(serverError) }}</p>
+ * ```
+ */
+export declare function toAuthMessageKey(error: unknown, options?: AuthMessageKeyOptions): string;

package/dist/supabase/index.d.ts

@@ -1,4 +1,6 @@
 import { SupabaseClient } from '@supabase/supabase-js';
+export { AUTH_ERROR_CODES, toAuthMessageKey } from './auth-errors';
+export type { AuthErrorCode, AuthMessageKeyOptions } from './auth-errors';
 /**
  * Records whether the next session should outlive the tab.
  *

package/dist/supabase.js

@@ -1,5 +1,49 @@
 import { n as registerErrorMapper, t as AppError } from "./app-error-DF9cijE0.js";
-import { PostgrestError, createClient } from "@supabase/supabase-js";
+import { PostgrestError, createClient, isAuthError } from "@supabase/supabase-js";
+//#region src/supabase/auth-errors.ts
+/**
+* The Supabase auth codes a sign-in screen has to have wording for.
+*
+* Exported so an app can assert its locale files cover them. The list is not
+* every code Supabase can send — it is the ones that are the user's to act on,
+* which is the only kind worth a sentence of its own. Everything else is a
+* fault, and a fault reads the same whatever caused it.
+*/
+var AUTH_ERROR_CODES = [
+	"invalid_credentials",
+	"email_not_confirmed",
+	"user_already_exists",
+	"email_exists",
+	"weak_password",
+	"over_request_rate_limit",
+	"over_email_send_rate_limit",
+	"signup_disabled",
+	"user_banned"
+];
+/**
+* Maps an auth failure to a message key.
+*
+* Returns a key rather than a sentence so the caller translates it at render
+* time — an error stored before a language switch still reads correctly after,
+* which is the whole reason this returns a string that looks unfinished.
+*
+* Recognising a Supabase error is Supabase's business, so the type guard stays
+* on this side of the boundary and the caller only ever sees a key.
+*
+* @example
+* ```ts
+* serverError.value = toAuthMessageKey(error) // 'authError.invalid_credentials'
+* // <p>{{ $t(serverError) }}</p>
+* ```
+*/
+function toAuthMessageKey(error, options = {}) {
+	const { extraCodes = [], fallback = "authError.generic" } = options;
+	if (!isAuthError(error)) return fallback;
+	const code = error.code;
+	if (!code) return fallback;
+	return AUTH_ERROR_CODES.includes(code) || extraCodes.includes(code) ? `authError.${code}` : fallback;
+}
+//#endregion
 //#region src/supabase/index.ts
 /**
 * The optional Supabase entry.
@@ -121,6 +165,6 @@ registerErrorMapper((error) => {
 	return new AppError("unknown", error.message, { cause: error });
 });
 //#endregion
-export { createSupabaseClient, setRememberMe };
+export { AUTH_ERROR_CODES, createSupabaseClient, setRememberMe, toAuthMessageKey };
 
 //# sourceMappingURL=supabase.js.map

package/dist/supabase.js.map

@@ -1 +1 @@
-{"version":3,"file":"supabase.js","names":[],"sources":["../src/supabase/index.ts"],"sourcesContent":["import { createClient } from '@supabase/supabase-js'\nimport { PostgrestError } from '@supabase/supabase-js'\nimport type { SupabaseClient, SupportedStorage } from '@supabase/supabase-js'\n\nimport { AppError, registerErrorMapper } from '../utils/app-error'\n\n/**\n * The optional Supabase entry.\n *\n * Behind its own export so an app that never touches Supabase downloads none of\n * it — importing this module is what opts in, including to the error mapping\n * registered at the bottom.\n */\n\nconst REMEMBER_KEY = 'rei-remember'\n\n/**\n * Records whether the next session should outlive the tab.\n *\n * Call before signing in: the SDK writes the session as soon as the request\n * succeeds, and this decides where it lands.\n */\nexport function setRememberMe(remember: boolean): void {\n  try {\n    localStorage.setItem(REMEMBER_KEY, String(remember))\n  } catch {\n    // Storage blocked; the session will simply not persist.\n  }\n}\n\nfunction activeStore(): Storage {\n  try {\n    return localStorage.getItem(REMEMBER_KEY) === 'false' ? sessionStorage : localStorage\n  } catch {\n    return sessionStorage\n  }\n}\n\n/**\n * Session storage that follows the \"remember me\" choice.\n *\n * Supabase issues a short-lived access token plus a long-lived refresh token.\n * Where the refresh token is kept decides how long a login survives:\n * `localStorage` outlives the browser, `sessionStorage` dies with the tab. On a\n * shared machine that difference is the whole point, so the choice switches the\n * store rather than the token lifetime.\n *\n * Removal clears both, so signing out cannot leave a copy behind.\n */\nconst rememberAwareStorage: SupportedStorage = {\n  getItem: (key) => {\n    try {\n      return activeStore().getItem(key)\n    } catch {\n      return null\n    }\n  },\n  setItem: (key, value) => {\n    try {\n      activeStore().setItem(key, value)\n    } catch {\n      // Storage blocked.\n    }\n  },\n  removeItem: (key) => {\n    try {\n      localStorage.removeItem(key)\n      sessionStorage.removeItem(key)\n    } catch {\n      // Storage blocked.\n    }\n  },\n}\n\n/**\n * Builds a typed Supabase client with the remember-me storage wired in.\n *\n * A factory, not a module singleton reading `import.meta.env`: a package cannot\n * know what an app calls its environment variables, and a second app would have\n * different ones.\n *\n * @param url - Project URL. Public; it is the API endpoint.\n * @param anonKey - Anon key. Also public — row-level security is the boundary,\n *   not the key.\n *\n * @example\n * ```ts\n * export const supabase = createSupabaseClient<Database>(\n *   import.meta.env.VITE_SUPABASE_URL,\n *   import.meta.env.VITE_SUPABASE_ANON_KEY,\n * )\n * ```\n */\nexport function createSupabaseClient<Database>(\n  url: string,\n  anonKey: string,\n): SupabaseClient<Database> {\n  if (!url) throw new Error('createSupabaseClient: the project URL is missing.')\n  if (!anonKey) throw new Error('createSupabaseClient: the anon key is missing.')\n\n  return createClient<Database>(url, anonKey, { auth: { storage: rememberAwareStorage } })\n}\n\n/**\n * Teaches `toAppError` to read Postgres.\n *\n * Registered on import rather than exported as a step to remember: importing\n * this module is already the decision to use Supabase.\n */\n/**\n * A PostgREST failure, however it reached us.\n *\n * `instanceof PostgrestError` is the obvious test and it is not enough. The\n * error returned in `{ data, error }` is a plain object — supabase-js builds\n * the class only on the paths that throw — and even where it does construct\n * one, a project holding two copies of `@supabase/postgrest-js` gets two\n * different classes and an `instanceof` that is false against a genuine error.\n *\n * The consequence was silent and total: every database failure fell past this\n * mapper into the generic branch, so `permission denied for table enrollments`\n * — a message naming the table and the missing grant — reached the screen as\n * \"Something went wrong.\" The information was there the whole time.\n *\n * So: the class where it holds, and the shape where it does not. `code` and\n * `message` are what PostgREST always sends; `details` and `hint` are always\n * present as keys, null when empty, which is what separates this from any\n * other object carrying a `code`.\n */\nfunction isPostgrestError(error: unknown): error is PostgrestError {\n  if (error instanceof PostgrestError) return true\n  if (typeof error !== 'object' || error === null) return false\n\n  const candidate = error as Record<string, unknown>\n\n  return (\n    typeof candidate['message'] === 'string' &&\n    typeof candidate['code'] === 'string' &&\n    'details' in candidate &&\n    'hint' in candidate\n  )\n}\n\nregisterErrorMapper((error) => {\n  if (!isPostgrestError(error)) return null\n\n  // 23505 is unique_violation — a second row where the schema allows one. It is\n  // a normal outcome of a double tap, not a failure worth an error screen.\n  if (error.code === '23505') {\n    return new AppError('conflict', 'That already exists.', { cause: error })\n  }\n\n  if (error.code === 'PGRST116') {\n    return new AppError('not-found', 'That could not be found.', { cause: error })\n  }\n\n  // 42501 is insufficient_privilege and PGRST301/302 are an absent or expired\n  // token. All three mean the same thing to a reader — you are not allowed to\n  // do this — and none of them mean the app is broken, which is what a generic\n  // failure message implies and what sends somebody to the error log.\n  if (error.code === '42501' || error.code === 'PGRST301' || error.code === 'PGRST302') {\n    return new AppError('denied', 'You are not allowed to do that.', { cause: error })\n  }\n\n  return new AppError('unknown', error.message, { cause: error })\n})\n"],"mappings":";;;;;;;;;;AAcA,IAAM,eAAe;;;;;;;AAQrB,SAAgB,cAAc,UAAyB;CACrD,IAAI;EACF,aAAa,QAAQ,cAAc,OAAO,QAAQ,CAAC;CACrD,QAAQ,CAER;AACF;AAEA,SAAS,cAAuB;CAC9B,IAAI;EACF,OAAO,aAAa,QAAQ,YAAY,MAAM,UAAU,iBAAiB;CAC3E,QAAQ;EACN,OAAO;CACT;AACF;;;;;;;;;;;;AAaA,IAAM,uBAAyC;CAC7C,UAAU,QAAQ;EAChB,IAAI;GACF,OAAO,YAAY,CAAC,CAAC,QAAQ,GAAG;EAClC,QAAQ;GACN,OAAO;EACT;CACF;CACA,UAAU,KAAK,UAAU;EACvB,IAAI;GACF,YAAY,CAAC,CAAC,QAAQ,KAAK,KAAK;EAClC,QAAQ,CAER;CACF;CACA,aAAa,QAAQ;EACnB,IAAI;GACF,aAAa,WAAW,GAAG;GAC3B,eAAe,WAAW,GAAG;EAC/B,QAAQ,CAER;CACF;AACF;;;;;;;;;;;;;;;;;;;;AAqBA,SAAgB,qBACd,KACA,SAC0B;CAC1B,IAAI,CAAC,KAAK,MAAM,IAAI,MAAM,mDAAmD;CAC7E,IAAI,CAAC,SAAS,MAAM,IAAI,MAAM,gDAAgD;CAE9E,OAAO,aAAuB,KAAK,SAAS,EAAE,MAAM,EAAE,SAAS,qBAAqB,EAAE,CAAC;AACzF;;;;;;;;;;;;;;;;;;;;;;;;;;AA2BA,SAAS,iBAAiB,OAAyC;CACjE,IAAI,iBAAiB,gBAAgB,OAAO;CAC5C,IAAI,OAAO,UAAU,YAAY,UAAU,MAAM,OAAO;CAExD,MAAM,YAAY;CAElB,OACE,OAAO,UAAU,eAAe,YAChC,OAAO,UAAU,YAAY,YAC7B,aAAa,aACb,UAAU;AAEd;AAEA,qBAAqB,UAAU;CAC7B,IAAI,CAAC,iBAAiB,KAAK,GAAG,OAAO;CAIrC,IAAI,MAAM,SAAS,SACjB,OAAO,IAAI,SAAS,YAAY,wBAAwB,EAAE,OAAO,MAAM,CAAC;CAG1E,IAAI,MAAM,SAAS,YACjB,OAAO,IAAI,SAAS,aAAa,4BAA4B,EAAE,OAAO,MAAM,CAAC;CAO/E,IAAI,MAAM,SAAS,WAAW,MAAM,SAAS,cAAc,MAAM,SAAS,YACxE,OAAO,IAAI,SAAS,UAAU,mCAAmC,EAAE,OAAO,MAAM,CAAC;CAGnF,OAAO,IAAI,SAAS,WAAW,MAAM,SAAS,EAAE,OAAO,MAAM,CAAC;AAChE,CAAC"}
+{"version":3,"file":"supabase.js","names":[],"sources":["../src/supabase/auth-errors.ts","../src/supabase/index.ts"],"sourcesContent":["import { isAuthError } from '@supabase/supabase-js'\n\n/**\n * The Supabase auth codes a sign-in screen has to have wording for.\n *\n * Exported so an app can assert its locale files cover them. The list is not\n * every code Supabase can send — it is the ones that are the user's to act on,\n * which is the only kind worth a sentence of its own. Everything else is a\n * fault, and a fault reads the same whatever caused it.\n */\nexport const AUTH_ERROR_CODES = [\n  'invalid_credentials',\n  'email_not_confirmed',\n  'user_already_exists',\n  'email_exists',\n  'weak_password',\n  'over_request_rate_limit',\n  'over_email_send_rate_limit',\n  'signup_disabled',\n  'user_banned',\n] as const\n\nexport type AuthErrorCode = (typeof AUTH_ERROR_CODES)[number]\n\nexport type AuthMessageKeyOptions = {\n  /**\n   * Codes this app has wording for beyond the shared list.\n   *\n   * A key is only an improvement on the generic message if something\n   * translates it, so widening the list is the app's decision and not the\n   * kit's: an app that has not written `authError.validation_failed` is better\n   * served by the sentence it has than by a key rendered raw on screen.\n   */\n  extraCodes?: readonly string[] | undefined\n  /** The key returned when nothing matches. */\n  fallback?: string | undefined\n}\n\n/**\n * Maps an auth failure to a message key.\n *\n * Returns a key rather than a sentence so the caller translates it at render\n * time — an error stored before a language switch still reads correctly after,\n * which is the whole reason this returns a string that looks unfinished.\n *\n * Recognising a Supabase error is Supabase's business, so the type guard stays\n * on this side of the boundary and the caller only ever sees a key.\n *\n * @example\n * ```ts\n * serverError.value = toAuthMessageKey(error) // 'authError.invalid_credentials'\n * // <p>{{ $t(serverError) }}</p>\n * ```\n */\nexport function toAuthMessageKey(error: unknown, options: AuthMessageKeyOptions = {}): string {\n  const { extraCodes = [], fallback = 'authError.generic' } = options\n\n  if (!isAuthError(error)) return fallback\n\n  const code = error.code\n  if (!code) return fallback\n\n  const known = (AUTH_ERROR_CODES as readonly string[]).includes(code) || extraCodes.includes(code)\n\n  return known ? `authError.${code}` : fallback\n}\n","import { createClient } from '@supabase/supabase-js'\nimport { PostgrestError } from '@supabase/supabase-js'\nimport type { SupabaseClient, SupportedStorage } from '@supabase/supabase-js'\n\nimport { AppError, registerErrorMapper } from '../utils/app-error'\n\nexport { AUTH_ERROR_CODES, toAuthMessageKey } from './auth-errors'\nexport type { AuthErrorCode, AuthMessageKeyOptions } from './auth-errors'\n\n/**\n * The optional Supabase entry.\n *\n * Behind its own export so an app that never touches Supabase downloads none of\n * it — importing this module is what opts in, including to the error mapping\n * registered at the bottom.\n */\n\nconst REMEMBER_KEY = 'rei-remember'\n\n/**\n * Records whether the next session should outlive the tab.\n *\n * Call before signing in: the SDK writes the session as soon as the request\n * succeeds, and this decides where it lands.\n */\nexport function setRememberMe(remember: boolean): void {\n  try {\n    localStorage.setItem(REMEMBER_KEY, String(remember))\n  } catch {\n    // Storage blocked; the session will simply not persist.\n  }\n}\n\nfunction activeStore(): Storage {\n  try {\n    return localStorage.getItem(REMEMBER_KEY) === 'false' ? sessionStorage : localStorage\n  } catch {\n    return sessionStorage\n  }\n}\n\n/**\n * Session storage that follows the \"remember me\" choice.\n *\n * Supabase issues a short-lived access token plus a long-lived refresh token.\n * Where the refresh token is kept decides how long a login survives:\n * `localStorage` outlives the browser, `sessionStorage` dies with the tab. On a\n * shared machine that difference is the whole point, so the choice switches the\n * store rather than the token lifetime.\n *\n * Removal clears both, so signing out cannot leave a copy behind.\n */\nconst rememberAwareStorage: SupportedStorage = {\n  getItem: (key) => {\n    try {\n      return activeStore().getItem(key)\n    } catch {\n      return null\n    }\n  },\n  setItem: (key, value) => {\n    try {\n      activeStore().setItem(key, value)\n    } catch {\n      // Storage blocked.\n    }\n  },\n  removeItem: (key) => {\n    try {\n      localStorage.removeItem(key)\n      sessionStorage.removeItem(key)\n    } catch {\n      // Storage blocked.\n    }\n  },\n}\n\n/**\n * Builds a typed Supabase client with the remember-me storage wired in.\n *\n * A factory, not a module singleton reading `import.meta.env`: a package cannot\n * know what an app calls its environment variables, and a second app would have\n * different ones.\n *\n * @param url - Project URL. Public; it is the API endpoint.\n * @param anonKey - Anon key. Also public — row-level security is the boundary,\n *   not the key.\n *\n * @example\n * ```ts\n * export const supabase = createSupabaseClient<Database>(\n *   import.meta.env.VITE_SUPABASE_URL,\n *   import.meta.env.VITE_SUPABASE_ANON_KEY,\n * )\n * ```\n */\nexport function createSupabaseClient<Database>(\n  url: string,\n  anonKey: string,\n): SupabaseClient<Database> {\n  if (!url) throw new Error('createSupabaseClient: the project URL is missing.')\n  if (!anonKey) throw new Error('createSupabaseClient: the anon key is missing.')\n\n  return createClient<Database>(url, anonKey, { auth: { storage: rememberAwareStorage } })\n}\n\n/**\n * Teaches `toAppError` to read Postgres.\n *\n * Registered on import rather than exported as a step to remember: importing\n * this module is already the decision to use Supabase.\n */\n/**\n * A PostgREST failure, however it reached us.\n *\n * `instanceof PostgrestError` is the obvious test and it is not enough. The\n * error returned in `{ data, error }` is a plain object — supabase-js builds\n * the class only on the paths that throw — and even where it does construct\n * one, a project holding two copies of `@supabase/postgrest-js` gets two\n * different classes and an `instanceof` that is false against a genuine error.\n *\n * The consequence was silent and total: every database failure fell past this\n * mapper into the generic branch, so `permission denied for table enrollments`\n * — a message naming the table and the missing grant — reached the screen as\n * \"Something went wrong.\" The information was there the whole time.\n *\n * So: the class where it holds, and the shape where it does not. `code` and\n * `message` are what PostgREST always sends; `details` and `hint` are always\n * present as keys, null when empty, which is what separates this from any\n * other object carrying a `code`.\n */\nfunction isPostgrestError(error: unknown): error is PostgrestError {\n  if (error instanceof PostgrestError) return true\n  if (typeof error !== 'object' || error === null) return false\n\n  const candidate = error as Record<string, unknown>\n\n  return (\n    typeof candidate['message'] === 'string' &&\n    typeof candidate['code'] === 'string' &&\n    'details' in candidate &&\n    'hint' in candidate\n  )\n}\n\nregisterErrorMapper((error) => {\n  if (!isPostgrestError(error)) return null\n\n  // 23505 is unique_violation — a second row where the schema allows one. It is\n  // a normal outcome of a double tap, not a failure worth an error screen.\n  if (error.code === '23505') {\n    return new AppError('conflict', 'That already exists.', { cause: error })\n  }\n\n  if (error.code === 'PGRST116') {\n    return new AppError('not-found', 'That could not be found.', { cause: error })\n  }\n\n  // 42501 is insufficient_privilege and PGRST301/302 are an absent or expired\n  // token. All three mean the same thing to a reader — you are not allowed to\n  // do this — and none of them mean the app is broken, which is what a generic\n  // failure message implies and what sends somebody to the error log.\n  if (error.code === '42501' || error.code === 'PGRST301' || error.code === 'PGRST302') {\n    return new AppError('denied', 'You are not allowed to do that.', { cause: error })\n  }\n\n  return new AppError('unknown', error.message, { cause: error })\n})\n"],"mappings":";;;;;;;;;;;AAUA,IAAa,mBAAmB;CAC9B;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF;;;;;;;;;;;;;;;;;AAkCA,SAAgB,iBAAiB,OAAgB,UAAiC,CAAC,GAAW;CAC5F,MAAM,EAAE,aAAa,CAAC,GAAG,WAAW,wBAAwB;CAE5D,IAAI,CAAC,YAAY,KAAK,GAAG,OAAO;CAEhC,MAAM,OAAO,MAAM;CACnB,IAAI,CAAC,MAAM,OAAO;CAIlB,OAFe,iBAAuC,SAAS,IAAI,KAAK,WAAW,SAAS,IAAI,IAEjF,aAAa,SAAS;AACvC;;;;;;;;;;AChDA,IAAM,eAAe;;;;;;;AAQrB,SAAgB,cAAc,UAAyB;CACrD,IAAI;EACF,aAAa,QAAQ,cAAc,OAAO,QAAQ,CAAC;CACrD,QAAQ,CAER;AACF;AAEA,SAAS,cAAuB;CAC9B,IAAI;EACF,OAAO,aAAa,QAAQ,YAAY,MAAM,UAAU,iBAAiB;CAC3E,QAAQ;EACN,OAAO;CACT;AACF;;;;;;;;;;;;AAaA,IAAM,uBAAyC;CAC7C,UAAU,QAAQ;EAChB,IAAI;GACF,OAAO,YAAY,CAAC,CAAC,QAAQ,GAAG;EAClC,QAAQ;GACN,OAAO;EACT;CACF;CACA,UAAU,KAAK,UAAU;EACvB,IAAI;GACF,YAAY,CAAC,CAAC,QAAQ,KAAK,KAAK;EAClC,QAAQ,CAER;CACF;CACA,aAAa,QAAQ;EACnB,IAAI;GACF,aAAa,WAAW,GAAG;GAC3B,eAAe,WAAW,GAAG;EAC/B,QAAQ,CAER;CACF;AACF;;;;;;;;;;;;;;;;;;;;AAqBA,SAAgB,qBACd,KACA,SAC0B;CAC1B,IAAI,CAAC,KAAK,MAAM,IAAI,MAAM,mDAAmD;CAC7E,IAAI,CAAC,SAAS,MAAM,IAAI,MAAM,gDAAgD;CAE9E,OAAO,aAAuB,KAAK,SAAS,EAAE,MAAM,EAAE,SAAS,qBAAqB,EAAE,CAAC;AACzF;;;;;;;;;;;;;;;;;;;;;;;;;;AA2BA,SAAS,iBAAiB,OAAyC;CACjE,IAAI,iBAAiB,gBAAgB,OAAO;CAC5C,IAAI,OAAO,UAAU,YAAY,UAAU,MAAM,OAAO;CAExD,MAAM,YAAY;CAElB,OACE,OAAO,UAAU,eAAe,YAChC,OAAO,UAAU,YAAY,YAC7B,aAAa,aACb,UAAU;AAEd;AAEA,qBAAqB,UAAU;CAC7B,IAAI,CAAC,iBAAiB,KAAK,GAAG,OAAO;CAIrC,IAAI,MAAM,SAAS,SACjB,OAAO,IAAI,SAAS,YAAY,wBAAwB,EAAE,OAAO,MAAM,CAAC;CAG1E,IAAI,MAAM,SAAS,YACjB,OAAO,IAAI,SAAS,aAAa,4BAA4B,EAAE,OAAO,MAAM,CAAC;CAO/E,IAAI,MAAM,SAAS,WAAW,MAAM,SAAS,cAAc,MAAM,SAAS,YACxE,OAAO,IAAI,SAAS,UAAU,mCAAmC,EAAE,OAAO,MAAM,CAAC;CAGnF,OAAO,IAAI,SAAS,WAAW,MAAM,SAAS,EAAE,OAAO,MAAM,CAAC;AAChE,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rei-kit",
-  "version": "0.14.0",
+  "version": "0.15.0",
   "description": "Vue 3 and Tailwind 4 design system and shared runtime. Extracted from Hibi.",
   "license": "MIT",
   "author": "Ramazan Doğan",

package/dist/BaseSheet-CLIhXDwe.js

@@ -1,253 +0,0 @@
-import { n as _plugin_vue_export_helper_default, r as BaseButton_default } from "./SettingsRow-MnVleeTR.js";
-import { Teleport, Transition, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, mergeModels, nextTick, normalizeStyle, onScopeDispose, onUnmounted, openBlock, readonly, ref, renderSlot, toDisplayString, unref, useModel, watch, withCtx } from "vue";
-import { X } from "lucide-vue-next";
-//#region src/composables/use-theme.ts
-/**
-* Namespaced by the app, not by this package.
-*
-* Two rei-kit apps served from the same origin would otherwise share one theme
-* setting — and during development on localhost, they will be.
-*/
-var storageKey = "rei-theme";
-function isThemePreference(value) {
-	return value === "system" || value === "light" || value === "dark";
-}
-/** Reads the stored preference, falling back to `system`. */
-function readStoredTheme() {
-	try {
-		const stored = localStorage.getItem(storageKey);
-		return isThemePreference(stored) ? stored : "system";
-	} catch {
-		return "system";
-	}
-}
-function storeTheme(preference) {
-	try {
-		localStorage.setItem(storageKey, preference);
-	} catch {}
-}
-/**
-* Does the environment prefer a dark scheme?
-*
-* `matchMedia` is checked for on its own rather than inferred from `document`.
-* Having one does not imply having the other: jsdom supplies a document and no
-* `matchMedia`, so a consumer's component test that so much as mounts something
-* calling `useTheme` threw — and some embedded webviews are the same. Where
-* there is nothing to ask, the answer is no rather than an exception.
-*/
-function prefersDarkScheme() {
-	return typeof window !== "undefined" && typeof window.matchMedia === "function" ? window.matchMedia("(prefers-color-scheme: dark)").matches : false;
-}
-/**
-* Adds or removes `.dark` on `<html>`, resolving `system` against the OS.
-*
-* A no-op without a document. There is no OS preference to read on a server and
-* no `<html>` to write to, so a prerender leaves the class off and the app
-* decides the theme before hydration — see the note in the README.
-*/
-function applyTheme(preference) {
-	if (typeof document === "undefined") return;
-	const isDark = preference === "dark" || preference === "system" && prefersDarkScheme();
-	document.documentElement.classList.toggle("dark", isDark);
-}
-/**
-* The shared preference, created on first use rather than at import.
-*
-* Lazy on purpose: reading storage at import time would lock in the default key
-* before an app had a chance to set its own, leaving the controller reading one
-* key and writing another.
-*/
-var preference = null;
-function controller() {
-	if (preference) return preference;
-	preference = ref(readStoredTheme());
-	watch(preference, (next) => {
-		storeTheme(next);
-		applyTheme(next);
-	}, { immediate: true });
-	if (typeof window !== "undefined" && typeof window.matchMedia === "function") window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", () => {
-		if (preference?.value === "system") applyTheme("system");
-	});
-	return preference;
-}
-/**
-* Sets where the preference is stored.
-*
-* Safe in either order: called before the first `useTheme()` it simply changes
-* the key, and called after it re-reads under the new one, so the controller
-* never reads from one key while writing to another.
-*
-* @example
-* ```ts
-* setThemeStorageKey('hibi-theme')   // once, at startup
-* ```
-*/
-function setThemeStorageKey(key) {
-	storageKey = key;
-	if (preference) preference.value = readStoredTheme();
-}
-/** @returns The shared preference ref; assigning to it stores and applies it. */
-function useTheme() {
-	return controller();
-}
-//#endregion
-//#region src/composables/use-visual-viewport.ts
-/**
-* Tracks the visual viewport.
-*
-* Chrome and Android browsers honour `interactive-widget=resizes-content`, so
-* the layout viewport already shrinks for the keyboard there. Safari on iOS
-* does not implement it: it shrinks only the *visual* viewport, leaving a sheet
-* sized in `dvh` sitting partly underneath the keyboard.
-*
-* `null` means the API is unavailable, which callers should read as "trust the
-* layout viewport" rather than as zero. A server has no viewport at all, so it
-* gets that same `null` — this runs during `setup`, and a component using it
-* has to survive being rendered there.
-*
-* @example
-* ```ts
-* const viewport = useVisualViewport()
-* // :style="viewport ? { height: `${viewport.height}px` } : undefined"
-* ```
-*/
-function useVisualViewport() {
-	const rect = ref(null);
-	const viewport = typeof window === "undefined" ? void 0 : window.visualViewport;
-	if (!viewport) return readonly(rect);
-	function read() {
-		if (!viewport) return;
-		rect.value = {
-			height: viewport.height,
-			offsetTop: viewport.offsetTop
-		};
-	}
-	read();
-	viewport.addEventListener("resize", read);
-	viewport.addEventListener("scroll", read);
-	onScopeDispose(() => {
-		viewport.removeEventListener("resize", read);
-		viewport.removeEventListener("scroll", read);
-	});
-	return readonly(rect);
-}
-//#endregion
-//#region src/components/BaseSheet.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1 = { class: "shell-frame md:rounded-shell relative flex max-h-full flex-col justify-end overflow-hidden" };
-var _hoisted_2 = ["aria-label"];
-var _hoisted_3 = { class: "flex shrink-0 items-start gap-3 px-6 pt-4 pb-5" };
-var _hoisted_4 = { class: "min-w-0 flex-1" };
-var _hoisted_5 = { class: "text-ink text-xl leading-tight font-semibold" };
-var _hoisted_6 = {
-	key: 0,
-	class: "text-ink-soft mt-1 text-sm leading-snug"
-};
-var _hoisted_7 = { class: "min-h-0 flex-1 overflow-y-auto px-6 pb-[calc(2rem+env(safe-area-inset-bottom,0px))]" };
-//#endregion
-//#region src/components/BaseSheet.vue
-var BaseSheet_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
-	__name: "BaseSheet",
-	props: /*@__PURE__*/ mergeModels({
-		title: {},
-		subtitle: { default: "" },
-		closeLabel: { default: "Close" }
-	}, {
-		"modelValue": {
-			type: Boolean,
-			required: true
-		},
-		"modelModifiers": {}
-	}),
-	emits: ["update:modelValue"],
-	setup(__props) {
-		const open = useModel(__props, "modelValue");
-		const viewport = useVisualViewport();
-		/**
-		* Pins the sheet to the area the keyboard has left visible.
-		*
-		* Only needed where the layout viewport does not shrink on its own — iOS. On
-		* Android the numbers already agree, so this is a no-op there rather than a
-		* second, competing adjustment.
-		*/
-		const viewportStyle = computed(() => viewport.value ? {
-			height: `${viewport.value.height}px`,
-			top: `${viewport.value.offsetTop}px`
-		} : void 0);
-		const panel = ref(null);
-		let lastFocused = null;
-		function close() {
-			open.value = false;
-		}
-		function onKeydown(event) {
-			if (event.key === "Escape") close();
-		}
-		watch(open, async (isOpen) => {
-			if (isOpen) {
-				setBackgroundInert(true);
-				lastFocused = document.activeElement instanceof HTMLElement ? document.activeElement : null;
-				window.addEventListener("keydown", onKeydown);
-				await nextTick();
-				panel.value?.focus();
-			} else {
-				window.removeEventListener("keydown", onKeydown);
-				lastFocused?.focus();
-				lastFocused = null;
-				setBackgroundInert(false);
-			}
-		});
-		/**
-		* `inert` takes the whole app out of tab order and pointer events while the
-		* sheet is open — a real focus trap without keydown bookkeeping.
-		*
-		* The sheet itself is teleported to `#sheet-root`, a sibling of `#app`, so it
-		* stays interactive.
-		*/
-		function setBackgroundInert(isInert) {
-			document.getElementById("app")?.toggleAttribute("inert", isInert);
-		}
-		onUnmounted(() => {
-			window.removeEventListener("keydown", onKeydown);
-			setBackgroundInert(false);
-		});
-		return (_ctx, _cache) => {
-			return openBlock(), createBlock(Teleport, { to: "#sheet-root" }, [createVNode(Transition, { name: "sheet" }, {
-				default: withCtx(() => [open.value ? (openBlock(), createElementBlock("div", {
-					key: 0,
-					class: "fixed inset-x-0 top-0 bottom-0 z-50 flex items-center justify-center",
-					style: normalizeStyle(viewportStyle.value)
-				}, [createElementVNode("div", _hoisted_1, [createElementVNode("div", {
-					class: "bg-ink/45 absolute inset-0 backdrop-blur-[2px]",
-					onClick: close
-				}), createElementVNode("section", {
-					ref_key: "panel",
-					ref: panel,
-					role: "dialog",
-					"aria-modal": "true",
-					"aria-label": __props.title,
-					tabindex: "-1",
-					class: "sheet-panel bg-surface relative flex max-h-[94%] min-h-[56dvh] flex-col rounded-t-[28px] shadow-2xl outline-none"
-				}, [
-					_cache[0] || (_cache[0] = createElementVNode("div", {
-						class: "flex shrink-0 justify-center pt-3",
-						"aria-hidden": "true"
-					}, [createElementVNode("span", { class: "bg-hair h-1.5 w-10 rounded-full" })], -1)),
-					createElementVNode("header", _hoisted_3, [createElementVNode("div", _hoisted_4, [createElementVNode("h2", _hoisted_5, toDisplayString(__props.title), 1), __props.subtitle ? (openBlock(), createElementBlock("p", _hoisted_6, toDisplayString(__props.subtitle), 1)) : createCommentVNode("", true)]), createVNode(BaseButton_default, {
-						variant: "unstyled",
-						class: "text-ink-soft hover:bg-muted hover:text-ink -mt-1 flex size-10 shrink-0 items-center justify-center rounded-full transition-colors active:scale-90",
-						"aria-label": __props.closeLabel,
-						onClick: close
-					}, {
-						default: withCtx(() => [createVNode(unref(X), { class: "size-5" })]),
-						_: 1
-					}, 8, ["aria-label"])]),
-					createElementVNode("div", _hoisted_7, [renderSlot(_ctx.$slots, "default", {}, void 0, true)])
-				], 8, _hoisted_2)])], 4)) : createCommentVNode("", true)]),
-				_: 3
-			})]);
-		};
-	}
-}), [["__scopeId", "data-v-51709579"]]);
-//#endregion
-export { readStoredTheme as a, isThemePreference as i, useVisualViewport as n, setThemeStorageKey as o, applyTheme as r, useTheme as s, BaseSheet_default as t };
-
-//# sourceMappingURL=BaseSheet-CLIhXDwe.js.map

package/dist/BaseSheet-CLIhXDwe.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"BaseSheet-CLIhXDwe.js","names":[],"sources":["../src/composables/use-theme.ts","../src/composables/use-visual-viewport.ts","../src/components/BaseSheet.vue","../src/components/BaseSheet.vue"],"sourcesContent":["import { ref, watch } from 'vue'\nimport type { Ref } from 'vue'\n\n/** What the user asked for; `system` follows the OS. */\nexport type ThemePreference = 'system' | 'light' | 'dark'\n\n/**\n * Namespaced by the app, not by this package.\n *\n * Two rei-kit apps served from the same origin would otherwise share one theme\n * setting — and during development on localhost, they will be.\n */\nlet storageKey = 'rei-theme'\n\nexport function isThemePreference(value: unknown): value is ThemePreference {\n  return value === 'system' || value === 'light' || value === 'dark'\n}\n\n/** Reads the stored preference, falling back to `system`. */\nexport function readStoredTheme(): ThemePreference {\n  try {\n    const stored = localStorage.getItem(storageKey)\n\n    return isThemePreference(stored) ? stored : 'system'\n  } catch {\n    return 'system'\n  }\n}\n\nfunction storeTheme(preference: ThemePreference): void {\n  try {\n    localStorage.setItem(storageKey, preference)\n  } catch {\n    // Private mode or blocked storage: the choice just will not persist.\n  }\n}\n\n/**\n * Does the environment prefer a dark scheme?\n *\n * `matchMedia` is checked for on its own rather than inferred from `document`.\n * Having one does not imply having the other: jsdom supplies a document and no\n * `matchMedia`, so a consumer's component test that so much as mounts something\n * calling `useTheme` threw — and some embedded webviews are the same. Where\n * there is nothing to ask, the answer is no rather than an exception.\n */\nfunction prefersDarkScheme(): boolean {\n  return typeof window !== 'undefined' && typeof window.matchMedia === 'function'\n    ? window.matchMedia('(prefers-color-scheme: dark)').matches\n    : false\n}\n\n/**\n * Adds or removes `.dark` on `<html>`, resolving `system` against the OS.\n *\n * A no-op without a document. There is no OS preference to read on a server and\n * no `<html>` to write to, so a prerender leaves the class off and the app\n * decides the theme before hydration — see the note in the README.\n */\nexport function applyTheme(preference: ThemePreference): void {\n  if (typeof document === 'undefined') return\n\n  const isDark = preference === 'dark' || (preference === 'system' && prefersDarkScheme())\n\n  document.documentElement.classList.toggle('dark', isDark)\n}\n\n/**\n * The shared preference, created on first use rather than at import.\n *\n * Lazy on purpose: reading storage at import time would lock in the default key\n * before an app had a chance to set its own, leaving the controller reading one\n * key and writing another.\n */\nlet preference: Ref<ThemePreference> | null = null\n\nfunction controller(): Ref<ThemePreference> {\n  if (preference) return preference\n\n  preference = ref<ThemePreference>(readStoredTheme())\n\n  watch(\n    preference,\n    (next) => {\n      storeTheme(next)\n      applyTheme(next)\n    },\n    { immediate: true },\n  )\n\n  // While on `system`, follow the OS if the user flips it at night. Only where\n  // there is something to listen to; see `prefersDarkScheme`.\n  if (typeof window !== 'undefined' && typeof window.matchMedia === 'function') {\n    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {\n      if (preference?.value === 'system') applyTheme('system')\n    })\n  }\n\n  return preference\n}\n\n/**\n * Sets where the preference is stored.\n *\n * Safe in either order: called before the first `useTheme()` it simply changes\n * the key, and called after it re-reads under the new one, so the controller\n * never reads from one key while writing to another.\n *\n * @example\n * ```ts\n * setThemeStorageKey('hibi-theme')   // once, at startup\n * ```\n */\nexport function setThemeStorageKey(key: string): void {\n  storageKey = key\n  if (preference) preference.value = readStoredTheme()\n}\n\n/** @returns The shared preference ref; assigning to it stores and applies it. */\nexport function useTheme(): Ref<ThemePreference> {\n  return controller()\n}\n","import { onScopeDispose, readonly, ref } from 'vue'\n\n/** The visible area, once the on-screen keyboard has taken its share. */\nexport interface VisualViewportRect {\n  height: number\n  offsetTop: number\n}\n\n/**\n * Tracks the visual viewport.\n *\n * Chrome and Android browsers honour `interactive-widget=resizes-content`, so\n * the layout viewport already shrinks for the keyboard there. Safari on iOS\n * does not implement it: it shrinks only the *visual* viewport, leaving a sheet\n * sized in `dvh` sitting partly underneath the keyboard.\n *\n * `null` means the API is unavailable, which callers should read as \"trust the\n * layout viewport\" rather than as zero. A server has no viewport at all, so it\n * gets that same `null` — this runs during `setup`, and a component using it\n * has to survive being rendered there.\n *\n * @example\n * ```ts\n * const viewport = useVisualViewport()\n * // :style=\"viewport ? { height: `${viewport.height}px` } : undefined\"\n * ```\n */\nexport function useVisualViewport() {\n  const rect = ref<VisualViewportRect | null>(null)\n\n  const viewport = typeof window === 'undefined' ? undefined : window.visualViewport\n  if (!viewport) return readonly(rect)\n\n  function read() {\n    if (!viewport) return\n\n    rect.value = { height: viewport.height, offsetTop: viewport.offsetTop }\n  }\n\n  read()\n\n  // `scroll` matters as much as `resize`: iOS shifts the visual viewport up to\n  // keep the focused field visible, without changing its height.\n  viewport.addEventListener('resize', read)\n  viewport.addEventListener('scroll', read)\n\n  onScopeDispose(() => {\n    viewport.removeEventListener('resize', read)\n    viewport.removeEventListener('scroll', read)\n  })\n\n  return readonly(rect)\n}\n","<script setup lang=\"ts\">\nimport BaseButton from './BaseButton.vue'\nimport { computed, nextTick, onUnmounted, ref, watch } from 'vue'\nimport { X } from 'lucide-vue-next'\n\nimport { useVisualViewport } from '../composables/use-visual-viewport'\n\nconst open = defineModel<boolean>({ required: true })\nconst {\n  title,\n  subtitle = '',\n  closeLabel = 'Close',\n} = defineProps<{\n  title: string\n  subtitle?: string | undefined\n  /**\n   * Accessible name for the close button.\n   *\n   * A prop rather than a translation: a component that calls t() forces every\n   * consumer onto one i18n setup, and this is the package's only visible string.\n   */\n  closeLabel?: string | undefined\n}>()\n\nconst viewport = useVisualViewport()\n\n/**\n * Pins the sheet to the area the keyboard has left visible.\n *\n * Only needed where the layout viewport does not shrink on its own — iOS. On\n * Android the numbers already agree, so this is a no-op there rather than a\n * second, competing adjustment.\n */\nconst viewportStyle = computed(() =>\n  viewport.value\n    ? { height: `${viewport.value.height}px`, top: `${viewport.value.offsetTop}px` }\n    : undefined,\n)\n\nconst panel = ref<HTMLElement | null>(null)\nlet lastFocused: HTMLElement | null = null\n\nfunction close() {\n  open.value = false\n}\n\nfunction onKeydown(event: KeyboardEvent) {\n  if (event.key === 'Escape') close()\n}\n\nwatch(open, async (isOpen) => {\n  if (isOpen) {\n    setBackgroundInert(true)\n    lastFocused = document.activeElement instanceof HTMLElement ? document.activeElement : null\n    window.addEventListener('keydown', onKeydown)\n    await nextTick()\n    panel.value?.focus()\n  } else {\n    window.removeEventListener('keydown', onKeydown)\n    lastFocused?.focus()\n    lastFocused = null\n    setBackgroundInert(false)\n  }\n})\n\n/**\n * `inert` takes the whole app out of tab order and pointer events while the\n * sheet is open — a real focus trap without keydown bookkeeping.\n *\n * The sheet itself is teleported to `#sheet-root`, a sibling of `#app`, so it\n * stays interactive.\n */\nfunction setBackgroundInert(isInert: boolean) {\n  document.getElementById('app')?.toggleAttribute('inert', isInert)\n}\n\nonUnmounted(() => {\n  window.removeEventListener('keydown', onKeydown)\n  // Unmounting while open would otherwise leave the whole app inert forever.\n  setBackgroundInert(false)\n})\n</script>\n\n<template>\n  <Teleport to=\"#sheet-root\">\n    <Transition name=\"sheet\">\n      <div\n        v-if=\"open\"\n        class=\"fixed inset-x-0 top-0 bottom-0 z-50 flex items-center justify-center\"\n        :style=\"viewportStyle\"\n      >\n        <div\n          class=\"shell-frame md:rounded-shell relative flex max-h-full flex-col justify-end overflow-hidden\"\n        >\n          <div class=\"bg-ink/45 absolute inset-0 backdrop-blur-[2px]\" @click=\"close\" />\n\n          <!-- Header and footer stay put; only the slot scrolls. Sized in dvh so\n               the on-screen keyboard shrinks the sheet instead of pushing its\n               content out of reach. -->\n          <section\n            ref=\"panel\"\n            role=\"dialog\"\n            aria-modal=\"true\"\n            :aria-label=\"title\"\n            tabindex=\"-1\"\n            class=\"sheet-panel bg-surface relative flex max-h-[94%] min-h-[56dvh] flex-col rounded-t-[28px] shadow-2xl outline-none\"\n          >\n            <div class=\"flex shrink-0 justify-center pt-3\" aria-hidden=\"true\">\n              <span class=\"bg-hair h-1.5 w-10 rounded-full\" />\n            </div>\n\n            <header class=\"flex shrink-0 items-start gap-3 px-6 pt-4 pb-5\">\n              <div class=\"min-w-0 flex-1\">\n                <h2 class=\"text-ink text-xl leading-tight font-semibold\">{{ title }}</h2>\n                <p v-if=\"subtitle\" class=\"text-ink-soft mt-1 text-sm leading-snug\">\n                  {{ subtitle }}\n                </p>\n              </div>\n\n              <!-- `unstyled`, so the sheet keeps the exact button it had. What it\n                   gains is the focus ring it never had: this was a raw\n                   `<button>` with no `focus-visible` rule, so closing a sheet\n                   from the keyboard was invisible. -->\n              <BaseButton\n                variant=\"unstyled\"\n                class=\"text-ink-soft hover:bg-muted hover:text-ink -mt-1 flex size-10 shrink-0 items-center justify-center rounded-full transition-colors active:scale-90\"\n                :aria-label=\"closeLabel\"\n                @click=\"close\"\n              >\n                <X class=\"size-5\" />\n              </BaseButton>\n            </header>\n\n            <div\n              class=\"min-h-0 flex-1 overflow-y-auto px-6 pb-[calc(2rem+env(safe-area-inset-bottom,0px))]\"\n            >\n              <slot />\n            </div>\n          </section>\n        </div>\n      </div>\n    </Transition>\n  </Teleport>\n</template>\n\n<style scoped>\n.sheet-enter-active,\n.sheet-leave-active {\n  transition: opacity 200ms ease;\n}\n.sheet-enter-from,\n.sheet-leave-to {\n  opacity: 0;\n}\n\n/* The panel travels further than the scrim fades, which is what makes the\n   sheet read as rising rather than appearing. */\n.sheet-enter-active .sheet-panel,\n.sheet-leave-active .sheet-panel {\n  transition: transform 280ms cubic-bezier(0.32, 0.72, 0, 1);\n}\n.sheet-enter-from .sheet-panel,\n.sheet-leave-to .sheet-panel {\n  transform: translateY(6%);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .sheet-enter-from .sheet-panel,\n  .sheet-leave-to .sheet-panel {\n    transform: none;\n  }\n}\n</style>\n","<script setup lang=\"ts\">\nimport BaseButton from './BaseButton.vue'\nimport { computed, nextTick, onUnmounted, ref, watch } from 'vue'\nimport { X } from 'lucide-vue-next'\n\nimport { useVisualViewport } from '../composables/use-visual-viewport'\n\nconst open = defineModel<boolean>({ required: true })\nconst {\n  title,\n  subtitle = '',\n  closeLabel = 'Close',\n} = defineProps<{\n  title: string\n  subtitle?: string | undefined\n  /**\n   * Accessible name for the close button.\n   *\n   * A prop rather than a translation: a component that calls t() forces every\n   * consumer onto one i18n setup, and this is the package's only visible string.\n   */\n  closeLabel?: string | undefined\n}>()\n\nconst viewport = useVisualViewport()\n\n/**\n * Pins the sheet to the area the keyboard has left visible.\n *\n * Only needed where the layout viewport does not shrink on its own — iOS. On\n * Android the numbers already agree, so this is a no-op there rather than a\n * second, competing adjustment.\n */\nconst viewportStyle = computed(() =>\n  viewport.value\n    ? { height: `${viewport.value.height}px`, top: `${viewport.value.offsetTop}px` }\n    : undefined,\n)\n\nconst panel = ref<HTMLElement | null>(null)\nlet lastFocused: HTMLElement | null = null\n\nfunction close() {\n  open.value = false\n}\n\nfunction onKeydown(event: KeyboardEvent) {\n  if (event.key === 'Escape') close()\n}\n\nwatch(open, async (isOpen) => {\n  if (isOpen) {\n    setBackgroundInert(true)\n    lastFocused = document.activeElement instanceof HTMLElement ? document.activeElement : null\n    window.addEventListener('keydown', onKeydown)\n    await nextTick()\n    panel.value?.focus()\n  } else {\n    window.removeEventListener('keydown', onKeydown)\n    lastFocused?.focus()\n    lastFocused = null\n    setBackgroundInert(false)\n  }\n})\n\n/**\n * `inert` takes the whole app out of tab order and pointer events while the\n * sheet is open — a real focus trap without keydown bookkeeping.\n *\n * The sheet itself is teleported to `#sheet-root`, a sibling of `#app`, so it\n * stays interactive.\n */\nfunction setBackgroundInert(isInert: boolean) {\n  document.getElementById('app')?.toggleAttribute('inert', isInert)\n}\n\nonUnmounted(() => {\n  window.removeEventListener('keydown', onKeydown)\n  // Unmounting while open would otherwise leave the whole app inert forever.\n  setBackgroundInert(false)\n})\n</script>\n\n<template>\n  <Teleport to=\"#sheet-root\">\n    <Transition name=\"sheet\">\n      <div\n        v-if=\"open\"\n        class=\"fixed inset-x-0 top-0 bottom-0 z-50 flex items-center justify-center\"\n        :style=\"viewportStyle\"\n      >\n        <div\n          class=\"shell-frame md:rounded-shell relative flex max-h-full flex-col justify-end overflow-hidden\"\n        >\n          <div class=\"bg-ink/45 absolute inset-0 backdrop-blur-[2px]\" @click=\"close\" />\n\n          <!-- Header and footer stay put; only the slot scrolls. Sized in dvh so\n               the on-screen keyboard shrinks the sheet instead of pushing its\n               content out of reach. -->\n          <section\n            ref=\"panel\"\n            role=\"dialog\"\n            aria-modal=\"true\"\n            :aria-label=\"title\"\n            tabindex=\"-1\"\n            class=\"sheet-panel bg-surface relative flex max-h-[94%] min-h-[56dvh] flex-col rounded-t-[28px] shadow-2xl outline-none\"\n          >\n            <div class=\"flex shrink-0 justify-center pt-3\" aria-hidden=\"true\">\n              <span class=\"bg-hair h-1.5 w-10 rounded-full\" />\n            </div>\n\n            <header class=\"flex shrink-0 items-start gap-3 px-6 pt-4 pb-5\">\n              <div class=\"min-w-0 flex-1\">\n                <h2 class=\"text-ink text-xl leading-tight font-semibold\">{{ title }}</h2>\n                <p v-if=\"subtitle\" class=\"text-ink-soft mt-1 text-sm leading-snug\">\n                  {{ subtitle }}\n                </p>\n              </div>\n\n              <!-- `unstyled`, so the sheet keeps the exact button it had. What it\n                   gains is the focus ring it never had: this was a raw\n                   `<button>` with no `focus-visible` rule, so closing a sheet\n                   from the keyboard was invisible. -->\n              <BaseButton\n                variant=\"unstyled\"\n                class=\"text-ink-soft hover:bg-muted hover:text-ink -mt-1 flex size-10 shrink-0 items-center justify-center rounded-full transition-colors active:scale-90\"\n                :aria-label=\"closeLabel\"\n                @click=\"close\"\n              >\n                <X class=\"size-5\" />\n              </BaseButton>\n            </header>\n\n            <div\n              class=\"min-h-0 flex-1 overflow-y-auto px-6 pb-[calc(2rem+env(safe-area-inset-bottom,0px))]\"\n            >\n              <slot />\n            </div>\n          </section>\n        </div>\n      </div>\n    </Transition>\n  </Teleport>\n</template>\n\n<style scoped>\n.sheet-enter-active,\n.sheet-leave-active {\n  transition: opacity 200ms ease;\n}\n.sheet-enter-from,\n.sheet-leave-to {\n  opacity: 0;\n}\n\n/* The panel travels further than the scrim fades, which is what makes the\n   sheet read as rising rather than appearing. */\n.sheet-enter-active .sheet-panel,\n.sheet-leave-active .sheet-panel {\n  transition: transform 280ms cubic-bezier(0.32, 0.72, 0, 1);\n}\n.sheet-enter-from .sheet-panel,\n.sheet-leave-to .sheet-panel {\n  transform: translateY(6%);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .sheet-enter-from .sheet-panel,\n  .sheet-leave-to .sheet-panel {\n    transform: none;\n  }\n}\n</style>\n"],"mappings":"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"}