@progressive-development/pd-spa-helper 1.0.0 → 1.0.1

package/dist/router/PdRouterService.js

@@ -4,16 +4,22 @@ import { selectAuthUser } from '../store/spa-app-selector.js';
 import { pdStore } from '../store/mini-rx.store.js';
 import { createLogger } from '../helper/logger.js';
 
+const POST_LOGIN_REDIRECT_KEY = "postLoginRedirect";
 const routingLogger = createLogger("PdRouterService");
 class PdRouterService {
   constructor() {
+    // UniversalRouter generic typing is complex; using explicit result type
     this.router = null;
     this.onChangeHandlers = [];
-    this.currentRoute = "";
+    this._currentRoute = "";
+    this._previousRoute = "";
     window.addEventListener("popstate", () => {
       this.resolve(location.pathname + location.search);
     });
   }
+  get previousRoute() {
+    return this._previousRoute;
+  }
   /**
    * Setzt die Routen-Konfiguration. Muss vor Verwendung von navigate() aufgerufen werden.
    */
@@ -25,24 +31,36 @@ class PdRouterService {
     const universalRoutes = definitions.flatMap((def) => {
       return {
         path: def.pattern,
+        // Context type from UniversalRouter extended with userCheck
         action: async (context) => {
-          if (def.auth) {
-            let authResult;
+          const requiresAuth = def.auth || def.roles && def.roles.length > 0;
+          if (requiresAuth) {
             if (!context.userCheck?.loginCheckFinish) {
               routingLogger.debug("Check login is running, wait for result...");
-              authResult = await waitForFinalAuthState();
+              const authResult = await waitForFinalAuthState();
               routingLogger.debug("Check login is done, go on");
               context.userCheck = authResult;
             }
             if (!context.userCheck?.user) {
               const fallbackRoute = def.authFallback ?? "login";
+              const currentPath = context.pathname || window.location.pathname;
+              if (currentPath && currentPath !== "/" + fallbackRoute) {
+                sessionStorage.setItem(POST_LOGIN_REDIRECT_KEY, currentPath);
+                routingLogger.debug(
+                  "Stored redirect route for after login:",
+                  currentPath
+                );
+              }
               return { redirect: fallbackRoute };
             }
-          }
-          if (def.roles && !def.roles.some(
-            (role) => context.userCheck.user.claims?.[role] === true
-          )) {
-            return { redirect: "unauthorized" };
+            if (def.roles && def.roles.length > 0 && !def.roles.some(
+              (role) => context.userCheck?.user?.claims?.[role] === true
+            )) {
+              routingLogger.debug(
+                "User lacks required role, redirecting to unauthorized"
+              );
+              return { redirect: "unauthorized" };
+            }
           }
           if (def.action) {
             const result = await def.action();
@@ -92,10 +110,6 @@ class PdRouterService {
     const pathname = url.pathname;
     const query = Object.fromEntries(url.searchParams.entries());
     try {
-      routingLogger.debug(
-        "Bevore resolve current location:",
-        location.pathname
-      );
       const userCheck = await firstValueFrom(
         pdStore().select(selectAuthUser).pipe(first())
       );
@@ -103,12 +117,16 @@ class PdRouterService {
         pathname,
         userCheck
       });
+      if (!result) {
+        routingLogger.warn("No route result for path:", path);
+        return;
+      }
       if (result.redirect) {
         history.replaceState({}, "", result.redirect);
         await this.resolve(result.redirect);
         return;
       }
-      if (!result || typeof result !== "object" || !result.route) {
+      if (typeof result !== "object" || !result.route) {
         routingLogger.warn("Invalid route result:", result);
         return;
       }
@@ -118,7 +136,13 @@ class PdRouterService {
         params: result.params ?? {},
         query
       };
-      this.currentRoute = routeInfo.route;
+      if (routeInfo.route !== "login" && !userCheck?.user && sessionStorage.getItem(POST_LOGIN_REDIRECT_KEY)) {
+        sessionStorage.removeItem(POST_LOGIN_REDIRECT_KEY);
+      }
+      if (this._currentRoute && this._currentRoute !== "login") {
+        this._previousRoute = this._currentRoute;
+      }
+      this._currentRoute = routeInfo.route;
       this.onChangeHandlers.forEach((fn) => fn(routeInfo));
     } catch (err) {
       routingLogger.error("Routing error:", err);
@@ -135,4 +159,4 @@ async function waitForFinalAuthState() {
 }
 const pdRouterService = new PdRouterService();
 
-export { pdRouterService };
+export { POST_LOGIN_REDIRECT_KEY, pdRouterService };

package/dist/router/index.d.ts

@@ -0,0 +1,3 @@
+export { pdRouterService } from './PdRouterService.js';
+export type { RouteDefinition, RouteChangeInfo } from './rout-types.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/router/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/router/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAEvD,YAAY,EAAE,eAAe,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC"}

package/dist/screen-size/ScreenSizeController.d.ts

@@ -0,0 +1,34 @@
+import { ReactiveController, ReactiveControllerHost } from 'lit';
+import { Breakpoint } from './types.js';
+export declare class ScreenSizeController implements ReactiveController {
+    private _host;
+    private _unsubscribe?;
+    constructor(host: ReactiveControllerHost);
+    /** Current breakpoint name */
+    get breakpoint(): Breakpoint;
+    /** Current viewport width in pixels */
+    get width(): number;
+    /** True if viewport is extra small or small (< 768px) */
+    get isMobile(): boolean;
+    /** True if viewport is medium (768px - 1023px) */
+    get isTablet(): boolean;
+    /** True if viewport is large or extra large (>= 1024px) */
+    get isDesktop(): boolean;
+    /**
+     * Check if the current breakpoint matches the given breakpoint.
+     */
+    is(breakpoint: Breakpoint): boolean;
+    /**
+     * Check if the current breakpoint is at least the given breakpoint.
+     * E.g., isAtLeast('md') returns true for md, lg, xl.
+     */
+    isAtLeast(breakpoint: Breakpoint): boolean;
+    /**
+     * Check if the current breakpoint is at most the given breakpoint.
+     * E.g., isAtMost('md') returns true for xs, sm, md.
+     */
+    isAtMost(breakpoint: Breakpoint): boolean;
+    hostConnected(): void;
+    hostDisconnected(): void;
+}
+//# sourceMappingURL=ScreenSizeController.d.ts.map

package/dist/screen-size/ScreenSizeController.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScreenSizeController.d.ts","sourceRoot":"","sources":["../../src/screen-size/ScreenSizeController.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AAEH,OAAO,KAAK,EAAE,kBAAkB,EAAE,sBAAsB,EAAE,MAAM,KAAK,CAAC;AAEtE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAE7C,qBAAa,oBAAqB,YAAW,kBAAkB;IAC7D,OAAO,CAAC,KAAK,CAAyB;IACtC,OAAO,CAAC,YAAY,CAAC,CAAa;gBAEtB,IAAI,EAAE,sBAAsB;IAKxC,8BAA8B;IAC9B,IAAI,UAAU,IAAI,UAAU,CAE3B;IAED,uCAAuC;IACvC,IAAI,KAAK,IAAI,MAAM,CAElB;IAED,yDAAyD;IACzD,IAAI,QAAQ,IAAI,OAAO,CAEtB;IAED,kDAAkD;IAClD,IAAI,QAAQ,IAAI,OAAO,CAEtB;IAED,2DAA2D;IAC3D,IAAI,SAAS,IAAI,OAAO,CAEvB;IAED;;OAEG;IACH,EAAE,CAAC,UAAU,EAAE,UAAU,GAAG,OAAO;IAInC;;;OAGG;IACH,SAAS,CAAC,UAAU,EAAE,UAAU,GAAG,OAAO;IAI1C;;;OAGG;IACH,QAAQ,CAAC,UAAU,EAAE,UAAU,GAAG,OAAO;IAIzC,aAAa,IAAI,IAAI;IAMrB,gBAAgB,IAAI,IAAI;CAGzB"}

package/dist/screen-size/ScreenSizeController.js

@@ -0,0 +1,58 @@
+import { screenSizeService } from './ScreenSizeService.js';
+
+class ScreenSizeController {
+  constructor(host) {
+    this._host = host;
+    host.addController(this);
+  }
+  /** Current breakpoint name */
+  get breakpoint() {
+    return screenSizeService.breakpoint;
+  }
+  /** Current viewport width in pixels */
+  get width() {
+    return screenSizeService.width;
+  }
+  /** True if viewport is extra small or small (< 768px) */
+  get isMobile() {
+    return screenSizeService.isMobile;
+  }
+  /** True if viewport is medium (768px - 1023px) */
+  get isTablet() {
+    return screenSizeService.isTablet;
+  }
+  /** True if viewport is large or extra large (>= 1024px) */
+  get isDesktop() {
+    return screenSizeService.isDesktop;
+  }
+  /**
+   * Check if the current breakpoint matches the given breakpoint.
+   */
+  is(breakpoint) {
+    return screenSizeService.is(breakpoint);
+  }
+  /**
+   * Check if the current breakpoint is at least the given breakpoint.
+   * E.g., isAtLeast('md') returns true for md, lg, xl.
+   */
+  isAtLeast(breakpoint) {
+    return screenSizeService.isAtLeast(breakpoint);
+  }
+  /**
+   * Check if the current breakpoint is at most the given breakpoint.
+   * E.g., isAtMost('md') returns true for xs, sm, md.
+   */
+  isAtMost(breakpoint) {
+    return screenSizeService.isAtMost(breakpoint);
+  }
+  hostConnected() {
+    this._unsubscribe = screenSizeService.subscribe(() => {
+      this._host.requestUpdate();
+    });
+  }
+  hostDisconnected() {
+    this._unsubscribe?.();
+  }
+}
+
+export { ScreenSizeController };

package/dist/screen-size/ScreenSizeService.d.ts

@@ -0,0 +1,49 @@
+import { Breakpoint, BreakpointConfig } from './types.js';
+declare class ScreenSizeServiceImpl {
+    private _listeners;
+    private _currentBreakpoint;
+    private _width;
+    private _breakpoints;
+    constructor(breakpoints?: BreakpointConfig);
+    /** Current breakpoint name */
+    get breakpoint(): Breakpoint;
+    /** Current viewport width in pixels */
+    get width(): number;
+    /** True if viewport is extra small or small (< 768px) */
+    get isMobile(): boolean;
+    /** True if viewport is medium (768px - 1023px) */
+    get isTablet(): boolean;
+    /** True if viewport is large or extra large (>= 1024px) */
+    get isDesktop(): boolean;
+    /** Breakpoint order for fallback resolution */
+    get breakpointOrder(): readonly Breakpoint[];
+    /**
+     * Subscribe to breakpoint changes.
+     * Callback is called when the breakpoint changes (not on every resize).
+     *
+     * @param callback - Function to call when breakpoint changes
+     * @returns Unsubscribe function
+     */
+    subscribe(callback: () => void): () => void;
+    /**
+     * Check if the current breakpoint matches the given breakpoint.
+     */
+    is(breakpoint: Breakpoint): boolean;
+    /**
+     * Check if the current breakpoint is at least the given breakpoint.
+     * E.g., isAtLeast('md') returns true for md, lg, xl.
+     */
+    isAtLeast(breakpoint: Breakpoint): boolean;
+    /**
+     * Check if the current breakpoint is at most the given breakpoint.
+     * E.g., isAtMost('md') returns true for xs, sm, md.
+     */
+    isAtMost(breakpoint: Breakpoint): boolean;
+    private _handleResize;
+    private _updateSize;
+    private _notifyListeners;
+}
+/** Singleton instance of the screen size service */
+export declare const screenSizeService: ScreenSizeServiceImpl;
+export {};
+//# sourceMappingURL=ScreenSizeService.d.ts.map

package/dist/screen-size/ScreenSizeService.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScreenSizeService.d.ts","sourceRoot":"","sources":["../../src/screen-size/ScreenSizeService.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAEH,OAAO,KAAK,EAAE,UAAU,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAC;AAc/D,cAAM,qBAAqB;IACzB,OAAO,CAAC,UAAU,CAAyB;IAC3C,OAAO,CAAC,kBAAkB,CAAoB;IAC9C,OAAO,CAAC,MAAM,CAAK;IACnB,OAAO,CAAC,YAAY,CAAmB;gBAE3B,WAAW,GAAE,gBAAsC;IAS/D,8BAA8B;IAC9B,IAAI,UAAU,IAAI,UAAU,CAE3B;IAED,uCAAuC;IACvC,IAAI,KAAK,IAAI,MAAM,CAElB;IAED,yDAAyD;IACzD,IAAI,QAAQ,IAAI,OAAO,CAEtB;IAED,kDAAkD;IAClD,IAAI,QAAQ,IAAI,OAAO,CAEtB;IAED,2DAA2D;IAC3D,IAAI,SAAS,IAAI,OAAO,CAEvB;IAED,+CAA+C;IAC/C,IAAI,eAAe,IAAI,SAAS,UAAU,EAAE,CAE3C;IAED;;;;;;OAMG;IACH,SAAS,CAAC,QAAQ,EAAE,MAAM,IAAI,GAAG,MAAM,IAAI;IAK3C;;OAEG;IACH,EAAE,CAAC,UAAU,EAAE,UAAU,GAAG,OAAO;IAInC;;;OAGG;IACH,SAAS,CAAC,UAAU,EAAE,UAAU,GAAG,OAAO;IAM1C;;;OAGG;IACH,QAAQ,CAAC,UAAU,EAAE,UAAU,GAAG,OAAO;IAMzC,OAAO,CAAC,aAAa,CAOnB;IAEF,OAAO,CAAC,WAAW;IAiBnB,OAAO,CAAC,gBAAgB;CAGzB;AAED,oDAAoD;AACpD,eAAO,MAAM,iBAAiB,uBAA8B,CAAC"}

package/dist/screen-size/ScreenSizeService.js

@@ -0,0 +1,107 @@
+const DEFAULT_BREAKPOINTS = {
+  xs: 0,
+  sm: 640,
+  md: 768,
+  lg: 1024,
+  xl: 1280
+};
+const BREAKPOINT_ORDER = ["xs", "sm", "md", "lg", "xl"];
+class ScreenSizeServiceImpl {
+  constructor(breakpoints = DEFAULT_BREAKPOINTS) {
+    this._listeners = /* @__PURE__ */ new Set();
+    this._currentBreakpoint = "lg";
+    this._width = 0;
+    this._handleResize = () => {
+      const oldBreakpoint = this._currentBreakpoint;
+      this._updateSize();
+      if (oldBreakpoint !== this._currentBreakpoint) {
+        this._notifyListeners();
+      }
+    };
+    this._breakpoints = breakpoints;
+    if (typeof window !== "undefined") {
+      this._updateSize();
+      window.addEventListener("resize", this._handleResize);
+    }
+  }
+  /** Current breakpoint name */
+  get breakpoint() {
+    return this._currentBreakpoint;
+  }
+  /** Current viewport width in pixels */
+  get width() {
+    return this._width;
+  }
+  /** True if viewport is extra small or small (< 768px) */
+  get isMobile() {
+    return this._currentBreakpoint === "xs" || this._currentBreakpoint === "sm";
+  }
+  /** True if viewport is medium (768px - 1023px) */
+  get isTablet() {
+    return this._currentBreakpoint === "md";
+  }
+  /** True if viewport is large or extra large (>= 1024px) */
+  get isDesktop() {
+    return this._currentBreakpoint === "lg" || this._currentBreakpoint === "xl";
+  }
+  /** Breakpoint order for fallback resolution */
+  get breakpointOrder() {
+    return BREAKPOINT_ORDER;
+  }
+  /**
+   * Subscribe to breakpoint changes.
+   * Callback is called when the breakpoint changes (not on every resize).
+   *
+   * @param callback - Function to call when breakpoint changes
+   * @returns Unsubscribe function
+   */
+  subscribe(callback) {
+    this._listeners.add(callback);
+    return () => this._listeners.delete(callback);
+  }
+  /**
+   * Check if the current breakpoint matches the given breakpoint.
+   */
+  is(breakpoint) {
+    return this._currentBreakpoint === breakpoint;
+  }
+  /**
+   * Check if the current breakpoint is at least the given breakpoint.
+   * E.g., isAtLeast('md') returns true for md, lg, xl.
+   */
+  isAtLeast(breakpoint) {
+    const currentIndex = BREAKPOINT_ORDER.indexOf(this._currentBreakpoint);
+    const targetIndex = BREAKPOINT_ORDER.indexOf(breakpoint);
+    return currentIndex >= targetIndex;
+  }
+  /**
+   * Check if the current breakpoint is at most the given breakpoint.
+   * E.g., isAtMost('md') returns true for xs, sm, md.
+   */
+  isAtMost(breakpoint) {
+    const currentIndex = BREAKPOINT_ORDER.indexOf(this._currentBreakpoint);
+    const targetIndex = BREAKPOINT_ORDER.indexOf(breakpoint);
+    return currentIndex <= targetIndex;
+  }
+  _updateSize() {
+    this._width = window.innerWidth;
+    const bp = this._breakpoints;
+    if (this._width >= bp.xl) {
+      this._currentBreakpoint = "xl";
+    } else if (this._width >= bp.lg) {
+      this._currentBreakpoint = "lg";
+    } else if (this._width >= bp.md) {
+      this._currentBreakpoint = "md";
+    } else if (this._width >= bp.sm) {
+      this._currentBreakpoint = "sm";
+    } else {
+      this._currentBreakpoint = "xs";
+    }
+  }
+  _notifyListeners() {
+    this._listeners.forEach((cb) => cb());
+  }
+}
+const screenSizeService = new ScreenSizeServiceImpl();
+
+export { screenSizeService };

package/dist/screen-size/index.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Screen Size module - Utilities for responsive behavior in Lit applications
+ *
+ * Provides:
+ * - ScreenSizeService: Singleton service for tracking viewport size
+ * - ScreenSizeController: Reactive controller for Lit components
+ * - responsiveText/responsiveValue: Directives for responsive values in templates
+ */
+export { screenSizeService } from './ScreenSizeService.js';
+export { ScreenSizeController } from './ScreenSizeController.js';
+export { responsiveText, responsiveValue } from './responsive-directives.js';
+export type { Breakpoint, BreakpointConfig, ResponsiveTextOptions, ResponsiveValueOptions, } from './types.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/screen-size/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/screen-size/index.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAGH,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAG3D,OAAO,EAAE,oBAAoB,EAAE,MAAM,2BAA2B,CAAC;AAGjE,OAAO,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAG7E,YAAY,EACV,UAAU,EACV,gBAAgB,EAChB,qBAAqB,EACrB,sBAAsB,GACvB,MAAM,YAAY,CAAC"}

package/dist/screen-size/responsive-directives.d.ts

@@ -0,0 +1,59 @@
+import { AsyncDirective } from 'lit/async-directive.js';
+import { ResponsiveTextOptions, ResponsiveValueOptions } from './types.js';
+/**
+ * ResponsiveTextDirective - Returns different text based on screen size
+ */
+declare class ResponsiveTextDirective extends AsyncDirective {
+    private _options?;
+    private _unsubscribe?;
+    render(options: ResponsiveTextOptions): string;
+    disconnected(): void;
+    reconnected(): void;
+    private _getText;
+}
+/**
+ * ResponsiveValueDirective - Returns different values based on screen size (generic)
+ */
+declare class ResponsiveValueDirective<T> extends AsyncDirective {
+    private _options?;
+    private _unsubscribe?;
+    render(options: ResponsiveValueOptions<T>): T;
+    disconnected(): void;
+    reconnected(): void;
+    private _getValue;
+}
+/**
+ * Directive for responsive text values.
+ * Returns different text based on the current screen size breakpoint.
+ *
+ * @param options - Object with default and optional breakpoint-specific texts
+ * @returns The text for the current breakpoint (with fallback to smaller breakpoints)
+ *
+ * @example
+ * ```typescript
+ * html`<pd-button text="${responsiveText({
+ *   default: 'Click here to continue',
+ *   sm: 'Continue',
+ *   xs: 'Go'
+ * })}"></pd-button>`
+ * ```
+ */
+export declare const responsiveText: (options: ResponsiveTextOptions) => import('lit/async-directive.js').DirectiveResult<typeof ResponsiveTextDirective>;
+/**
+ * Directive for responsive generic values.
+ * Returns different values based on the current screen size breakpoint.
+ *
+ * @param options - Object with default and optional breakpoint-specific values
+ * @returns The value for the current breakpoint (with fallback to smaller breakpoints)
+ *
+ * @example
+ * ```typescript
+ * html`<my-component
+ *   columns="${responsiveValue({ default: 4, md: 2, sm: 1 })}"
+ *   .showSidebar="${responsiveValue({ default: true, sm: false })}"
+ * ></my-component>`
+ * ```
+ */
+export declare const responsiveValue: (options: ResponsiveValueOptions<unknown>) => import('lit/async-directive.js').DirectiveResult<typeof ResponsiveValueDirective>;
+export {};
+//# sourceMappingURL=responsive-directives.d.ts.map

package/dist/screen-size/responsive-directives.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"responsive-directives.d.ts","sourceRoot":"","sources":["../../src/screen-size/responsive-directives.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AAEH,OAAO,EAAE,cAAc,EAAa,MAAM,wBAAwB,CAAC;AAEnE,OAAO,KAAK,EAEV,qBAAqB,EACrB,sBAAsB,EACvB,MAAM,YAAY,CAAC;AAgCpB;;GAEG;AACH,cAAM,uBAAwB,SAAQ,cAAc;IAClD,OAAO,CAAC,QAAQ,CAAC,CAAwB;IACzC,OAAO,CAAC,YAAY,CAAC,CAAa;IAElC,MAAM,CAAC,OAAO,EAAE,qBAAqB,GAAG,MAAM;IAa9C,YAAY,IAAI,IAAI;IAKpB,WAAW,IAAI,IAAI;IASnB,OAAO,CAAC,QAAQ;CAIjB;AAED;;GAEG;AACH,cAAM,wBAAwB,CAAC,CAAC,CAAE,SAAQ,cAAc;IACtD,OAAO,CAAC,QAAQ,CAAC,CAA4B;IAC7C,OAAO,CAAC,YAAY,CAAC,CAAa;IAElC,MAAM,CAAC,OAAO,EAAE,sBAAsB,CAAC,CAAC,CAAC,GAAG,CAAC;IAa7C,YAAY,IAAI,IAAI;IAKpB,WAAW,IAAI,IAAI;IASnB,OAAO,CAAC,SAAS;CAIlB;AAED;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,cAAc,sHAAqC,CAAC;AAEjE;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,eAAe,iIAAsC,CAAC"}

package/dist/screen-size/responsive-directives.js

@@ -0,0 +1,71 @@
+import { directive, AsyncDirective } from 'lit/async-directive.js';
+import { screenSizeService } from './ScreenSizeService.js';
+
+function resolveResponsiveValue(options, currentBreakpoint) {
+  const breakpointOrder = screenSizeService.breakpointOrder;
+  const currentIndex = breakpointOrder.indexOf(currentBreakpoint);
+  for (let i = currentIndex; i < breakpointOrder.length; i++) {
+    const bp = breakpointOrder[i];
+    const value = options[bp];
+    if (value !== void 0) {
+      return value;
+    }
+  }
+  return options.default;
+}
+class ResponsiveTextDirective extends AsyncDirective {
+  render(options) {
+    this._options = options;
+    if (!this._unsubscribe) {
+      this._unsubscribe = screenSizeService.subscribe(() => {
+        this.setValue(this._getText());
+      });
+    }
+    return this._getText();
+  }
+  disconnected() {
+    this._unsubscribe?.();
+    this._unsubscribe = void 0;
+  }
+  reconnected() {
+    if (!this._unsubscribe) {
+      this._unsubscribe = screenSizeService.subscribe(() => {
+        this.setValue(this._getText());
+      });
+    }
+  }
+  _getText() {
+    if (!this._options) return "";
+    return resolveResponsiveValue(this._options, screenSizeService.breakpoint);
+  }
+}
+class ResponsiveValueDirective extends AsyncDirective {
+  render(options) {
+    this._options = options;
+    if (!this._unsubscribe) {
+      this._unsubscribe = screenSizeService.subscribe(() => {
+        this.setValue(this._getValue());
+      });
+    }
+    return this._getValue();
+  }
+  disconnected() {
+    this._unsubscribe?.();
+    this._unsubscribe = void 0;
+  }
+  reconnected() {
+    if (!this._unsubscribe) {
+      this._unsubscribe = screenSizeService.subscribe(() => {
+        this.setValue(this._getValue());
+      });
+    }
+  }
+  _getValue() {
+    if (!this._options) return void 0;
+    return resolveResponsiveValue(this._options, screenSizeService.breakpoint);
+  }
+}
+const responsiveText = directive(ResponsiveTextDirective);
+const responsiveValue = directive(ResponsiveValueDirective);
+
+export { responsiveText, responsiveValue };

package/dist/screen-size/types.d.ts

@@ -0,0 +1,44 @@
+/**
+ * Screen size types and interfaces
+ */
+/** Available breakpoint names (mobile-first) */
+export type Breakpoint = "xs" | "sm" | "md" | "lg" | "xl";
+/** Breakpoint threshold configuration (min-width values in pixels) */
+export interface BreakpointConfig {
+    xs: number;
+    sm: number;
+    md: number;
+    lg: number;
+    xl: number;
+}
+/** Options for responsive text directive */
+export interface ResponsiveTextOptions {
+    /** Default text (used when no breakpoint-specific text matches) */
+    default: string;
+    /** Text for extra small screens (< 640px) */
+    xs?: string;
+    /** Text for small screens (640px - 767px) */
+    sm?: string;
+    /** Text for medium screens (768px - 1023px) */
+    md?: string;
+    /** Text for large screens (1024px - 1279px) */
+    lg?: string;
+    /** Text for extra large screens (>= 1280px) */
+    xl?: string;
+}
+/** Options for responsive value directive (generic version) */
+export interface ResponsiveValueOptions<T> {
+    /** Default value (used when no breakpoint-specific value matches) */
+    default: T;
+    /** Value for extra small screens */
+    xs?: T;
+    /** Value for small screens */
+    sm?: T;
+    /** Value for medium screens */
+    md?: T;
+    /** Value for large screens */
+    lg?: T;
+    /** Value for extra large screens */
+    xl?: T;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/screen-size/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/screen-size/types.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,gDAAgD;AAChD,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE1D,sEAAsE;AACtE,MAAM,WAAW,gBAAgB;IAC/B,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;CACZ;AAED,4CAA4C;AAC5C,MAAM,WAAW,qBAAqB;IACpC,mEAAmE;IACnE,OAAO,EAAE,MAAM,CAAC;IAChB,6CAA6C;IAC7C,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,6CAA6C;IAC7C,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,+CAA+C;IAC/C,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,+CAA+C;IAC/C,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,+CAA+C;IAC/C,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AAED,+DAA+D;AAC/D,MAAM,WAAW,sBAAsB,CAAC,CAAC;IACvC,qEAAqE;IACrE,OAAO,EAAE,CAAC,CAAC;IACX,oCAAoC;IACpC,EAAE,CAAC,EAAE,CAAC,CAAC;IACP,8BAA8B;IAC9B,EAAE,CAAC,EAAE,CAAC,CAAC;IACP,+BAA+B;IAC/B,EAAE,CAAC,EAAE,CAAC,CAAC;IACP,8BAA8B;IAC9B,EAAE,CAAC,EAAE,CAAC,CAAC;IACP,oCAAoC;IACpC,EAAE,CAAC,EAAE,CAAC,CAAC;CACR"}

package/dist/service-provider/ServiceRegistry.d.ts

@@ -0,0 +1,67 @@
+import { ServiceProvider, IAuthProvider, IFunctionProvider, IStorageProvider, IDatabaseProvider } from '@progressive-development/pd-provider-interfaces';
+/**
+ * Central service container for dependency injection
+ *
+ * Usage:
+ * ```typescript
+ * // In app initialization (e.g., main.ts)
+ * import { services } from "pd-helper-app";
+ * import { createFirebaseProvider } from "pd-provider-firebase";
+ *
+ * services.initialize(createFirebaseProvider(firebaseConfig));
+ *
+ * // In components/services
+ * import { services } from "pd-helper-app";
+ *
+ * const user = services.auth.getCurrentUser();
+ * ```
+ */
+export declare class ServiceRegistry {
+    private provider;
+    /**
+     * Initialize the service registry with a provider
+     * @param provider The service provider to use
+     * @throws Error if already initialized
+     */
+    initialize(provider: ServiceProvider): void;
+    /**
+     * Check if the registry has been initialized
+     */
+    get isInitialized(): boolean;
+    /**
+     * Ensure the registry is initialized before accessing providers
+     * @throws Error if not initialized
+     */
+    private ensureInitialized;
+    /**
+     * Get the auth provider
+     */
+    get auth(): IAuthProvider;
+    /**
+     * Get the functions provider
+     */
+    get functions(): IFunctionProvider;
+    /**
+     * Get the storage provider
+     */
+    get storage(): IStorageProvider;
+    /**
+     * Get the database provider (optional)
+     * @returns Database provider or undefined if not configured
+     */
+    get database(): IDatabaseProvider | undefined;
+    /**
+     * Reset the registry (primarily for testing)
+     *
+     * Warning: This should only be used in tests.
+     * In production, providers should be initialized once at app startup.
+     */
+    reset(): void;
+}
+/**
+ * Global service registry instance
+ *
+ * This is the main entry point for accessing services throughout the application.
+ */
+export declare const services: ServiceRegistry;
+//# sourceMappingURL=ServiceRegistry.d.ts.map

package/dist/service-provider/ServiceRegistry.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ServiceRegistry.d.ts","sourceRoot":"","sources":["../../src/service-provider/ServiceRegistry.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EACV,eAAe,EACf,aAAa,EACb,iBAAiB,EACjB,gBAAgB,EAChB,iBAAiB,EAClB,MAAM,iDAAiD,CAAC;AAEzD;;;;;;;;;;;;;;;;GAgBG;AACH,qBAAa,eAAe;IAC1B,OAAO,CAAC,QAAQ,CAAgC;IAEhD;;;;OAIG;IACH,UAAU,CAAC,QAAQ,EAAE,eAAe,GAAG,IAAI;IAS3C;;OAEG;IACH,IAAI,aAAa,IAAI,OAAO,CAE3B;IAED;;;OAGG;IACH,OAAO,CAAC,iBAAiB;IAQzB;;OAEG;IACH,IAAI,IAAI,IAAI,aAAa,CAGxB;IAED;;OAEG;IACH,IAAI,SAAS,IAAI,iBAAiB,CAGjC;IAED;;OAEG;IACH,IAAI,OAAO,IAAI,gBAAgB,CAG9B;IAED;;;OAGG;IACH,IAAI,QAAQ,IAAI,iBAAiB,GAAG,SAAS,CAG5C;IAED;;;;;OAKG;IACH,KAAK,IAAI,IAAI;CAGd;AAED;;;;GAIG;AACH,eAAO,MAAM,QAAQ,iBAAwB,CAAC"}