@lilaquadrat/frontend 0.1.1

package/dist/interfaces/AuthCallbacks.d.ts

@@ -0,0 +1,29 @@
+/**
+ * Application-specific state hooks used by {@link Auth}.
+ *
+ * Implement these callbacks with any state mechanism, including plain objects,
+ * Redux, Pinia, Vuex, React state, or framework-independent stores.
+ *
+ * @example
+ * ```ts
+ * const callbacks: AuthCallbacks = {
+ *   setToken: (token) => session.token = token,
+ *   isSessionLoaded: () => session.user !== undefined,
+ *   onAuthenticated: () => session.loadUser(),
+ *   onUnauthenticated: () => session.reset(),
+ * };
+ * ```
+ */
+export interface AuthCallbacks {
+    /** Stores the active token, or clears it when the user is no longer authenticated. */
+    setToken(token: string | null): void;
+    /** Returns whether the host app has already loaded the current authenticated session. */
+    isSessionLoaded?(): boolean;
+    /** Loads user data and permissions after an authenticated session is established. */
+    onAuthenticated?(): Promise<void> | void;
+    /** Clears user-specific application state after logout or token-refresh failure. */
+    onUnauthenticated?(): Promise<void> | void;
+    /** Receives token-refresh failures raised from Keycloak's expiration callback. */
+    onError?(error: unknown): void;
+}
+//# sourceMappingURL=AuthCallbacks.d.ts.map

package/dist/interfaces/AuthCallbacks.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AuthCallbacks.d.ts","sourceRoot":"","sources":["../../src/interfaces/AuthCallbacks.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AACH,MAAM,WAAW,aAAa;IAC5B,sFAAsF;IACtF,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,CAAC;IACrC,yFAAyF;IACzF,eAAe,CAAC,IAAI,OAAO,CAAC;IAC5B,qFAAqF;IACrF,eAAe,CAAC,IAAI,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC;IACzC,oFAAoF;IACpF,iBAAiB,CAAC,IAAI,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC;IAC3C,kFAAkF;IAClF,OAAO,CAAC,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI,CAAC;CAChC"}

package/dist/interfaces/AuthCallbacks.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=AuthCallbacks.js.map

package/dist/interfaces/AuthCallbacks.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AuthCallbacks.js","sourceRoot":"","sources":["../../src/interfaces/AuthCallbacks.ts"],"names":[],"mappings":""}

package/dist/interfaces/AuthInitOptions.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Values supplied to {@link Auth.init} for a single authentication initialization.
+ *
+ * @example
+ * ```ts
+ * await auth.init({ development: false, keycloakConfig: { url, realm, clientId } });
+ * ```
+ */
+export interface AuthInitOptions<KeycloakConfiguration> {
+    /** Enables local development authentication without constructing a Keycloak client. */
+    development: boolean;
+    /** Configuration forwarded unchanged to `AuthOptions.createKeycloak` in production. */
+    keycloakConfig?: KeycloakConfiguration;
+}
+//# sourceMappingURL=AuthInitOptions.d.ts.map

package/dist/interfaces/AuthInitOptions.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AuthInitOptions.d.ts","sourceRoot":"","sources":["../../src/interfaces/AuthInitOptions.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,MAAM,WAAW,eAAe,CAAC,qBAAqB;IACpD,uFAAuF;IACvF,WAAW,EAAE,OAAO,CAAC;IACrB,uFAAuF;IACvF,cAAc,CAAC,EAAE,qBAAqB,CAAC;CACxC"}

package/dist/interfaces/AuthInitOptions.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=AuthInitOptions.js.map

package/dist/interfaces/AuthInitOptions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AuthInitOptions.js","sourceRoot":"","sources":["../../src/interfaces/AuthInitOptions.ts"],"names":[],"mappings":""}

package/dist/interfaces/AuthOptions.d.ts

@@ -0,0 +1,21 @@
+import type { AuthCallbacks } from './AuthCallbacks.js';
+import type { KeycloakClient } from './KeycloakClient.js';
+/**
+ * Values supplied once when constructing an {@link Auth} instance.
+ *
+ * @example
+ * ```ts
+ * const options: AuthOptions<KeycloakConfig> = { callbacks, createKeycloak: (config) => new Keycloak(config) };
+ * ```
+ */
+export interface AuthOptions<KeycloakConfiguration> {
+    /** Application callbacks that connect authentication changes to host state. */
+    callbacks: AuthCallbacks;
+    /** Builds the Keycloak client from the configuration supplied to `Auth.init`. */
+    createKeycloak?(configuration: KeycloakConfiguration): KeycloakClient;
+    /** Token used by development mode. Defaults to `DEVTOKEN`. */
+    developmentToken?: string;
+    /** Application origin used for Keycloak callback URLs. Defaults to `window.location.origin`. */
+    origin?: string;
+}
+//# sourceMappingURL=AuthOptions.d.ts.map

package/dist/interfaces/AuthOptions.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AuthOptions.d.ts","sourceRoot":"","sources":["../../src/interfaces/AuthOptions.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACxD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAE1D;;;;;;;GAOG;AACH,MAAM,WAAW,WAAW,CAAC,qBAAqB;IAChD,+EAA+E;IAC/E,SAAS,EAAE,aAAa,CAAC;IACzB,iFAAiF;IACjF,cAAc,CAAC,CAAC,aAAa,EAAE,qBAAqB,GAAG,cAAc,CAAC;IACtE,8DAA8D;IAC9D,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,gGAAgG;IAChG,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB"}

package/dist/interfaces/AuthOptions.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=AuthOptions.js.map

package/dist/interfaces/AuthOptions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AuthOptions.js","sourceRoot":"","sources":["../../src/interfaces/AuthOptions.ts"],"names":[],"mappings":""}

package/dist/interfaces/KeycloakClient.d.ts

@@ -0,0 +1,36 @@
+import type { KeycloakRedirectOptions } from './KeycloakRedirectOptions.js';
+import type { KeycloakSilentCheckOptions } from './KeycloakSilentCheckOptions.js';
+/**
+ * Minimal Keycloak client contract consumed by {@link Auth}.
+ *
+ * Use a `keycloak-js` instance directly, or adapt another authentication client
+ * to this shape in `AuthOptions.createKeycloak`.
+ *
+ * @example
+ * ```ts
+ * createKeycloak: (configuration): KeycloakClient => new Keycloak(configuration)
+ * ```
+ */
+export interface KeycloakClient {
+    /** Whether the client currently has an authenticated session. */
+    authenticated?: boolean;
+    /** Current access token, populated after initialization or a token refresh. */
+    token?: string;
+    /** Called by Keycloak after the user logs out in another browser context. */
+    onAuthLogout?: () => void;
+    /** Called by Keycloak when its access token expires. */
+    onTokenExpired?: () => void;
+    /** Removes the token held by the client after a refresh failure. */
+    clearToken(): void;
+    /** Initializes Keycloak and silently checks for an existing session. */
+    init(options: KeycloakSilentCheckOptions): Promise<boolean>;
+    /** Refreshes the token when it expires within the requested number of seconds. */
+    updateToken(minValidity: number): Promise<boolean>;
+    /** Redirects the user to Keycloak's login page. */
+    login(options: KeycloakRedirectOptions): Promise<unknown> | unknown;
+    /** Redirects the user to Keycloak's logout page. */
+    logout(options: KeycloakRedirectOptions): Promise<unknown> | unknown;
+    /** Redirects the user to Keycloak's registration page. */
+    register(options: KeycloakRedirectOptions): Promise<unknown> | unknown;
+}
+//# sourceMappingURL=KeycloakClient.d.ts.map

package/dist/interfaces/KeycloakClient.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"KeycloakClient.d.ts","sourceRoot":"","sources":["../../src/interfaces/KeycloakClient.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,8BAA8B,CAAC;AAC5E,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,iCAAiC,CAAC;AAElF;;;;;;;;;;GAUG;AACH,MAAM,WAAW,cAAc;IAC7B,iEAAiE;IACjE,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,+EAA+E;IAC/E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,6EAA6E;IAC7E,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,wDAAwD;IACxD,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,oEAAoE;IACpE,UAAU,IAAI,IAAI,CAAC;IACnB,wEAAwE;IACxE,IAAI,CAAC,OAAO,EAAE,0BAA0B,GAAG,OAAO,CAAC,OAAO,CAAC,CAAC;IAC5D,kFAAkF;IAClF,WAAW,CAAC,WAAW,EAAE,MAAM,GAAG,OAAO,CAAC,OAAO,CAAC,CAAC;IACnD,mDAAmD;IACnD,KAAK,CAAC,OAAO,EAAE,uBAAuB,GAAG,OAAO,CAAC,OAAO,CAAC,GAAG,OAAO,CAAC;IACpE,oDAAoD;IACpD,MAAM,CAAC,OAAO,EAAE,uBAAuB,GAAG,OAAO,CAAC,OAAO,CAAC,GAAG,OAAO,CAAC;IACrE,0DAA0D;IAC1D,QAAQ,CAAC,OAAO,EAAE,uBAAuB,GAAG,OAAO,CAAC,OAAO,CAAC,GAAG,OAAO,CAAC;CACxE"}

package/dist/interfaces/KeycloakClient.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=KeycloakClient.js.map

package/dist/interfaces/KeycloakClient.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"KeycloakClient.js","sourceRoot":"","sources":["../../src/interfaces/KeycloakClient.ts"],"names":[],"mappings":""}

package/dist/interfaces/KeycloakRedirectOptions.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Options passed to Keycloak when starting a login, registration, or logout redirect.
+ *
+ * @example
+ * ```ts
+ * const redirect: KeycloakRedirectOptions = { redirectUri: 'https://app.example.com/login/callback' };
+ * ```
+ */
+export interface KeycloakRedirectOptions {
+    /** Absolute URL to which Keycloak returns the browser after completing the action. */
+    redirectUri: string;
+}
+//# sourceMappingURL=KeycloakRedirectOptions.d.ts.map

package/dist/interfaces/KeycloakRedirectOptions.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"KeycloakRedirectOptions.d.ts","sourceRoot":"","sources":["../../src/interfaces/KeycloakRedirectOptions.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,MAAM,WAAW,uBAAuB;IACtC,sFAAsF;IACtF,WAAW,EAAE,MAAM,CAAC;CACrB"}

package/dist/interfaces/KeycloakRedirectOptions.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=KeycloakRedirectOptions.js.map

package/dist/interfaces/KeycloakRedirectOptions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"KeycloakRedirectOptions.js","sourceRoot":"","sources":["../../src/interfaces/KeycloakRedirectOptions.ts"],"names":[],"mappings":""}

package/dist/interfaces/KeycloakSilentCheckOptions.d.ts

@@ -0,0 +1,28 @@
+/**
+ * Options used to initialize a Keycloak client with silent single-sign-on checking.
+ *
+ * `Auth.init` creates these values automatically; define this type only when
+ * implementing a custom `KeycloakClient`.
+ *
+ * @example
+ * ```ts
+ * async init(options: KeycloakSilentCheckOptions) {
+ *   return keycloak.init(options);
+ * }
+ * ```
+ */
+export interface KeycloakSilentCheckOptions {
+    /** Checks the current session without forcing an authentication redirect. */
+    onLoad: 'check-sso';
+    /** Uses the authorization-code flow. */
+    flow: 'standard';
+    /** Requires PKCE using SHA-256 for the authorization-code flow. */
+    pkceMethod: 'S256';
+    /** Requests the user's basic profile information. */
+    scope: 'profile';
+    /** URL of the hosted Keycloak silent-check HTML document. */
+    silentCheckSsoRedirectUri: string;
+    /** Allows Keycloak's fallback when silent checking is unavailable. */
+    silentCheckSsoFallback: boolean;
+}
+//# sourceMappingURL=KeycloakSilentCheckOptions.d.ts.map

package/dist/interfaces/KeycloakSilentCheckOptions.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"KeycloakSilentCheckOptions.d.ts","sourceRoot":"","sources":["../../src/interfaces/KeycloakSilentCheckOptions.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AACH,MAAM,WAAW,0BAA0B;IACzC,6EAA6E;IAC7E,MAAM,EAAE,WAAW,CAAC;IACpB,wCAAwC;IACxC,IAAI,EAAE,UAAU,CAAC;IACjB,mEAAmE;IACnE,UAAU,EAAE,MAAM,CAAC;IACnB,qDAAqD;IACrD,KAAK,EAAE,SAAS,CAAC;IACjB,6DAA6D;IAC7D,yBAAyB,EAAE,MAAM,CAAC;IAClC,sEAAsE;IACtE,sBAAsB,EAAE,OAAO,CAAC;CACjC"}

package/dist/interfaces/KeycloakSilentCheckOptions.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=KeycloakSilentCheckOptions.js.map

package/dist/interfaces/KeycloakSilentCheckOptions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"KeycloakSilentCheckOptions.js","sourceRoot":"","sources":["../../src/interfaces/KeycloakSilentCheckOptions.ts"],"names":[],"mappings":""}

package/dist/resize.d.ts

@@ -0,0 +1,165 @@
+/**
+ * Browser viewport and CSS-media observer used by the shared resize singleton.
+ *
+ * Import the module-level `resize` instance instead of creating another instance
+ * in application code so all components consume the same reactive state.
+ *
+ * @example
+ * ```ts
+ * import resize from '@lilaquadrat/frontend/resize';
+ *
+ * resize.debounceTime = 100;
+ * window.addEventListener('resized', () => console.log(resize.realHeight));
+ * ```
+ */
+export declare class Resize {
+    /**
+     * Pending debounce timer, exposed for applications that need to cancel it explicitly.
+     *
+     * @example
+     * ```ts
+     * clearTimeout(resize.timeout);
+     * ```
+     */
+    timeout?: ReturnType<typeof setTimeout>;
+    /**
+     * Delay in milliseconds between the last native resize event and the final update.
+     *
+     * @example
+     * ```ts
+     * resize.debounceTime = 150;
+     * ```
+     */
+    debounceTime: number;
+    /**
+     * Event dispatched on `window` after viewport dimensions are updated.
+     *
+     * @example
+     * ```ts
+     * window.addEventListener('resized', () => updateLayout());
+     * ```
+     */
+    resizedEvent?: Event;
+    /**
+     * Event dispatched on `window` after the active CSS media name changes.
+     *
+     * @example
+     * ```ts
+     * window.addEventListener('media', () => updateNavigation(resize.media));
+     * ```
+     */
+    mediaEvent?: Event;
+    /**
+     * Controls whether the next native resize dispatches an immediate initial update.
+     *
+     * It is reset after the debounced update so resize consumers can respond at the
+     * start and end of each resize interaction.
+     */
+    triggerStart: import("vue").Ref<boolean, boolean>;
+    /**
+     * Browser window when available, or `null` during server-side rendering.
+     *
+     * @example
+     * ```ts
+     * if (resize.safeWindow.value) resize.trigger();
+     * ```
+     */
+    safeWindow: import("vue").ComputedRef<Window | null>;
+    /**
+     * Active media name read from the visible child of `#mediadetection`.
+     *
+     * @example
+     * ```ts
+     * if (resize.media === 'desktop') showSidebar();
+     * ```
+     */
+    get media(): string;
+    set media(value: string);
+    /**
+     * Current visual viewport height in pixels.
+     *
+     * @example
+     * ```ts
+     * element.style.height = `${resize.realHeight}px`;
+     * ```
+     */
+    get realHeight(): number;
+    /**
+     * Initializes viewport state and listens for browser resize events when running in a browser.
+     *
+     * Normally the module singleton handles this. Create an instance only for an
+     * isolated application or test environment.
+     *
+     * @example
+     * ```ts
+     * const isolatedResize = new Resize();
+     * ```
+     */
+    constructor();
+    /**
+     * Updates media and viewport state, then dispatches the `resized` window event.
+     *
+     * Pass `true` only for the immediate event at the beginning of a resize sequence.
+     *
+     * @example
+     * ```ts
+     * resize.trigger();
+     * ```
+     */
+    trigger(isStart?: boolean): void;
+    /**
+     * Reads the class of the visible child within `#mediadetection` and emits `media` when it changes.
+     *
+     * @example
+     * ```ts
+     * resize.getMediaQuery();
+     * ```
+     */
+    getMediaQuery(): void;
+    /**
+     * Debounces browser resize events while emitting one immediate initial update.
+     *
+     * Call this only when forwarding a custom resize source; the browser listener
+     * registered by the singleton already calls it for native resize events.
+     *
+     * @example
+     * ```ts
+     * visualViewport?.addEventListener('resize', () => resize.debounce());
+     * ```
+     */
+    debounce(): void;
+    private setViewportHeight;
+}
+/**
+ * Shared `Resize` instance initialized once when this module is imported in a browser.
+ *
+ * @example
+ * ```ts
+ * import resize from '@lilaquadrat/frontend/resize';
+ * console.log(resize.realHeight);
+ * ```
+ */
+declare const resize: Resize;
+/**
+ * Returns the shared reactive viewport state and its controlling singleton.
+ *
+ * Use `media`, `realHeight`, and `resized` in Vue components; use `plugin` only
+ * when manually triggering or configuring the shared resize observer.
+ *
+ * @example
+ * ```ts
+ * import { useResize } from '@lilaquadrat/frontend/resize';
+ *
+ * const { media, realHeight } = useResize();
+ * // In a Vue template: {{ media }} / {{ realHeight }}
+ * ```
+ */
+export declare function useResize(): {
+    realHeight: import("vue").Ref<number, number>;
+    media: import("vue").Ref<string, string>;
+    resized: import("vue").Ref<number, number>;
+    plugin: Resize;
+};
+export { resize };
+export default resize;
+//# sourceMappingURL=resize.d.ts.map

package/dist/resize.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"resize.d.ts","sourceRoot":"","sources":["../src/resize.ts"],"names":[],"mappings":"AA+BA;;;;;;;;;;;;;GAaG;AACH,qBAAa,MAAM;IACjB;;;;;;;OAOG;IACH,OAAO,CAAC,EAAE,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;IAExC;;;;;;;OAOG;IACH,YAAY,SAAM;IAElB;;;;;;;OAOG;IACH,YAAY,CAAC,EAAE,KAAK,CAAC;IAErB;;;;;;;OAOG;IACH,UAAU,CAAC,EAAE,KAAK,CAAC;IAEnB;;;;;OAKG;IACH,YAAY,sCAAa;IAEzB;;;;;;;OAOG;IACH,UAAU,2CAAkF;IAE5F;;;;;;;OAOG;IACH,IAAI,KAAK,IAAI,MAAM,CAElB;IAED,IAAI,KAAK,CAAC,KAAK,EAAE,MAAM,EAEtB;IAED;;;;;;;OAOG;IACH,IAAI,UAAU,IAAI,MAAM,CAEvB;IAED;;;;;;;;;;OAUG;;IAcH;;;;;;;;;OASG;IACH,OAAO,CAAC,OAAO,CAAC,EAAE,OAAO,GAAG,IAAI;IAShC;;;;;;;OAOG;IACH,aAAa,IAAI,IAAI;IAuBrB;;;;;;;;;;OAUG;IACH,QAAQ,IAAI,IAAI;IAUhB,OAAO,CAAC,iBAAiB;CAU1B;AAED;;;;;;;;GAQG;AACH,QAAA,MAAM,MAAM,QAAe,CAAC;AAE5B;;;;;;;;;;;;;GAaG;AACH,wBAAgB,SAAS;;;;;EAOxB;AAED,OAAO,EAAE,MAAM,EAAE,CAAC;AAClB,eAAe,MAAM,CAAC"}

package/dist/resize.js

@@ -0,0 +1,249 @@
+import { computed, ref } from 'vue';
+/**
+ * Vue-compatible browser resize state.
+ *
+ * Include `#mediadetection` in the page with one child displayed at each CSS
+ * breakpoint. The displayed child's class becomes the current media value.
+ *
+ * @example
+ * ```html
+ * <div id="mediadetection">
+ *   <span class="mobile"></span>
+ *   <span class="desktop"></span>
+ * </div>
+ * ```
+ *
+ * @example
+ * ```css
+ * #mediadetection > span { display: none; }
+ * #mediadetection > .mobile { display: block; }
+ * @media (min-width: 768px) {
+ *   #mediadetection > .mobile { display: none; }
+ *   #mediadetection > .desktop { display: block; }
+ * }
+ * ```
+ */
+const mediaReference = ref('mobile');
+const resizedReference = ref(Date.now());
+const realHeightReference = ref(0);
+/**
+ * Browser viewport and CSS-media observer used by the shared resize singleton.
+ *
+ * Import the module-level `resize` instance instead of creating another instance
+ * in application code so all components consume the same reactive state.
+ *
+ * @example
+ * ```ts
+ * import resize from '@lilaquadrat/frontend/resize';
+ *
+ * resize.debounceTime = 100;
+ * window.addEventListener('resized', () => console.log(resize.realHeight));
+ * ```
+ */
+export class Resize {
+    /**
+     * Pending debounce timer, exposed for applications that need to cancel it explicitly.
+     *
+     * @example
+     * ```ts
+     * clearTimeout(resize.timeout);
+     * ```
+     */
+    timeout;
+    /**
+     * Delay in milliseconds between the last native resize event and the final update.
+     *
+     * @example
+     * ```ts
+     * resize.debounceTime = 150;
+     * ```
+     */
+    debounceTime = 50;
+    /**
+     * Event dispatched on `window` after viewport dimensions are updated.
+     *
+     * @example
+     * ```ts
+     * window.addEventListener('resized', () => updateLayout());
+     * ```
+     */
+    resizedEvent;
+    /**
+     * Event dispatched on `window` after the active CSS media name changes.
+     *
+     * @example
+     * ```ts
+     * window.addEventListener('media', () => updateNavigation(resize.media));
+     * ```
+     */
+    mediaEvent;
+    /**
+     * Controls whether the next native resize dispatches an immediate initial update.
+     *
+     * It is reset after the debounced update so resize consumers can respond at the
+     * start and end of each resize interaction.
+     */
+    triggerStart = ref(true);
+    /**
+     * Browser window when available, or `null` during server-side rendering.
+     *
+     * @example
+     * ```ts
+     * if (resize.safeWindow.value) resize.trigger();
+     * ```
+     */
+    safeWindow = computed(() => (typeof window === 'undefined' ? null : window));
+    /**
+     * Active media name read from the visible child of `#mediadetection`.
+     *
+     * @example
+     * ```ts
+     * if (resize.media === 'desktop') showSidebar();
+     * ```
+     */
+    get media() {
+        return mediaReference.value;
+    }
+    set media(value) {
+        mediaReference.value = value;
+    }
+    /**
+     * Current visual viewport height in pixels.
+     *
+     * @example
+     * ```ts
+     * element.style.height = `${resize.realHeight}px`;
+     * ```
+     */
+    get realHeight() {
+        return realHeightReference.value;
+    }
+    /**
+     * Initializes viewport state and listens for browser resize events when running in a browser.
+     *
+     * Normally the module singleton handles this. Create an instance only for an
+     * isolated application or test environment.
+     *
+     * @example
+     * ```ts
+     * const isolatedResize = new Resize();
+     * ```
+     */
+    constructor() {
+        const browserWindow = this.safeWindow.value;
+        if (!browserWindow)
+            return;
+        this.resizedEvent = new Event('resized');
+        this.mediaEvent = new Event('media');
+        realHeightReference.value = this.setViewportHeight();
+        this.getMediaQuery();
+        browserWindow.addEventListener('resize', () => this.debounce());
+    }
+    /**
+     * Updates media and viewport state, then dispatches the `resized` window event.
+     *
+     * Pass `true` only for the immediate event at the beginning of a resize sequence.
+     *
+     * @example
+     * ```ts
+     * resize.trigger();
+     * ```
+     */
+    trigger(isStart) {
+        this.getMediaQuery();
+        realHeightReference.value = this.setViewportHeight();
+        resizedReference.value = Date.now();
+        if (this.resizedEvent)
+            this.safeWindow.value?.dispatchEvent(this.resizedEvent);
+        if (!isStart)
+            this.triggerStart.value = true;
+    }
+    /**
+     * Reads the class of the visible child within `#mediadetection` and emits `media` when it changes.
+     *
+     * @example
+     * ```ts
+     * resize.getMediaQuery();
+     * ```
+     */
+    getMediaQuery() {
+        if (typeof document === 'undefined')
+            return;
+        const element = document.getElementById('mediadetection');
+        if (!element)
+            return;
+        const child = Array.from(element.children).find((childElement) => this.safeWindow.value?.getComputedStyle(childElement).display === 'block');
+        if (!child)
+            return;
+        const childClass = child.getAttribute('class');
+        if (!childClass)
+            return;
+        const mediaChanged = this.media !== childClass;
+        this.media = childClass;
+        if (mediaChanged && this.mediaEvent) {
+            this.safeWindow.value?.dispatchEvent(this.mediaEvent);
+        }
+    }
+    /**
+     * Debounces browser resize events while emitting one immediate initial update.
+     *
+     * Call this only when forwarding a custom resize source; the browser listener
+     * registered by the singleton already calls it for native resize events.
+     *
+     * @example
+     * ```ts
+     * visualViewport?.addEventListener('resize', () => resize.debounce());
+     * ```
+     */
+    debounce() {
+        if (this.triggerStart.value) {
+            this.triggerStart.value = false;
+            this.trigger(true);
+        }
+        clearTimeout(this.timeout);
+        this.timeout = setTimeout(() => this.trigger(), this.debounceTime);
+    }
+    setViewportHeight() {
+        const browserWindow = this.safeWindow.value;
+        const height = browserWindow?.visualViewport?.height ?? browserWindow?.innerHeight ?? 0;
+        if (typeof document !== 'undefined') {
+            document.documentElement.style.setProperty('--vh', `${height}px`);
+        }
+        return height;
+    }
+}
+/**
+ * Shared `Resize` instance initialized once when this module is imported in a browser.
+ *
+ * @example
+ * ```ts
+ * import resize from '@lilaquadrat/frontend/resize';
+ * console.log(resize.realHeight);
+ * ```
+ */
+const resize = new Resize();
+/**
+ * Returns the shared reactive viewport state and its controlling singleton.
+ *
+ * Use `media`, `realHeight`, and `resized` in Vue components; use `plugin` only
+ * when manually triggering or configuring the shared resize observer.
+ *
+ * @example
+ * ```ts
+ * import { useResize } from '@lilaquadrat/frontend/resize';
+ *
+ * const { media, realHeight } = useResize();
+ * // In a Vue template: {{ media }} / {{ realHeight }}
+ * ```
+ */
+export function useResize() {
+    return {
+        realHeight: realHeightReference,
+        media: mediaReference,
+        resized: resizedReference,
+        plugin: resize,
+    };
+}
+export { resize };
+export default resize;
+//# sourceMappingURL=resize.js.map

package/dist/resize.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"resize.js","sourceRoot":"","sources":["../src/resize.ts"],"names":[],"mappings":"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"}