@limetech/lime-web-components 6.4.1 → 6.5.0

package/dist/core/state.d.ts

@@ -1,47 +1,171 @@
 import { Subscribable } from 'rxjs';
 import { LimeWebComponentContext } from './context';
 /**
- * Base service for letting a Lime web component subscribe to state changes
+ * Base interface for repositories that provide reactive state subscriptions.
+ *
+ * StateRepository is the foundation for all reactive data sources in the platform.
+ * Repositories like {@link ConfigRepository}, {@link LimeObjectRepository},
+ * {@link FilterRepository}, etc. extend this interface to provide
+ * subscription-based access to their data.
+ *
+ * The subscription pattern allows components to react to data changes automatically,
+ * ensuring UI stays synchronized with the underlying application state.
+ *
+ * @example RECOMMENDED: Use state decorators for automatic reactive properties
+ * ```typescript
+ * class MyComponent {
+ *     @State()
+ *     @SelectCurrentUser({
+ *         map: [(user) => user?.fullname],
+ *         filter: [(name) => name !== undefined]
+ *     })
+ *     private userName: string;
+ *
+ *     @State()
+ *     @SelectCurrentLimeobject({
+ *         map: [(obj) => obj?.properties?.name]
+ *     })
+ *     private objectName: string;
+ * }
+ * ```
+ *
+ * @example ALTERNATIVE: Manual subscription for custom logic
+ * ```typescript
+ * const unsubscribe = repository.subscribe(
+ *     (state) => {
+ *         console.log('State updated:', state);
+ *     },
+ *     {
+ *         map: [(state) => ({ user: state.user, language: state.language })],
+ *         filter: [(state) => state.user !== null]
+ *     }
+ * );
+ *
+ * // Remember to unsubscribe when component is destroyed
+ * unsubscribe();
+ * ```
+ *
  * @public
  * @group Core
  */
 export interface StateRepository {
     /**
-     * Subscribe to state changes
+     * Subscribe to state changes with optional transformation and filtering.
      *
-     * @param callback - function to call when subscription updates
-     * @param options - options for the state selector
-     * @returns unsubscribe callback
+     * The subscription will immediately invoke the callback with the current state
+     * (if any), then continue to call it whenever the state changes. The map and
+     * filter options allow you to transform and selectively receive updates.
+     *
+     * @param callback - Function called with state updates (after map/filter applied)
+     * @param options - Optional transformations and filters for the subscription
+     * @returns Unsubscribe function - call this to stop receiving updates
+     *
+     * @remarks
+     * - Map functions are applied sequentially to transform the state
+     * - Filter functions must all return true for the callback to be invoked
+     * - Functions in map/filter arrays are bound to the component instance
+     * - Always store and call the unsubscribe function when component is destroyed
+     *
+     * @example
+     * ```typescript
+     * // Basic subscription
+     * const unsubscribe = repository.subscribe((state) => {
+     *     console.log('State updated:', state);
+     * });
+     *
+     * // With transformations
+     * const unsubscribe = repository.subscribe(
+     *     (userName) => console.log('User:', userName),
+     *     { map: [(state) => state.user?.name] }
+     * );
+     * ```
      */
     subscribe(callback: (...args: unknown[]) => void, options?: StateOptions): () => void;
 }
 /**
- * Options for the state selector
+ * Configuration options for state subscriptions.
+ *
+ * These options allow you to transform and filter state updates before they
+ * reach your callback. Map functions transform the data, while filter functions
+ * determine whether the callback should be invoked at all.
+ *
+ * @example
+ * ```typescript
+ * const options: StateOptions = {
+ *     // Extract and transform specific parts of state
+ *     map: [
+ *         (state) => state.users,
+ *         (users) => users.map(u => ({ id: u.id, name: u.name }))
+ *     ],
+ *     // Only notify when conditions are met
+ *     filter: [
+ *         (users) => users.length > 0,
+ *         (users) => users.some(u => u.name === 'Admin')
+ *     ]
+ * };
+ * ```
+ *
  * @public
  * @group Core
  */
 export interface StateOptions {
     /**
-     * List of functions that will be used to map the state.
-     * The functions will be bound to the web component instance
+     * List of transformation functions applied sequentially to the state.
+     *
+     * Each function receives the output of the previous function (or the raw state
+     * for the first function). Use this to extract, transform, or compute derived
+     * values from the state. Functions are bound to the web component instance.
+     *
+     * @example
+     * ```typescript
+     * map: [
+     *     (state) => state.orders,                    // Extract orders
+     *     (orders) => orders.filter(o => o.pending),  // Filter to pending only
+     *     (pending) => pending.length                 // Get count
+     * ]
+     * // Callback receives: number (count of pending orders)
+     * ```
      */
     map?: Array<(state: any) => any>;
     /**
-     * List of functions that will be used to filter any changes to the state.
-     * The functions will be bound to the web component instance
+     * List of predicate functions that must all return true for updates to be emitted.
+     *
+     * Filters are evaluated after map transformations. If any filter returns false,
+     * the callback is not invoked for that state change. Useful for preventing
+     * unnecessary updates. Functions are bound to the web component instance.
+     *
+     * @example
+     * ```typescript
+     * filter: [
+     *     (state) => state !== null,              // Ignore null states
+     *     (state) => state.isReady,               // Only when ready
+     *     (state) => state.items.length > 0       // Only when has items
+     * ]
+     * ```
      */
     filter?: Array<(state: any) => boolean>;
 }
 /**
+ * Extended state options for repositories that are context-aware.
+ *
+ * Some repositories (like CurrentLimetype and CurrentLimeobject) can automatically
+ * react to context changes. When the context observable emits a new value, these
+ * repositories will re-evaluate and emit their state for the new context.
+ *
  * @public
  * @group Core
  */
 export interface ContextAwareStateOptions extends StateOptions {
     /**
-     * An observable that emits a new value when the context of the component
-     * is changed. If set, the corresponding state service will emit a new value
-     * when the context has changed as well. Only applies to states that are
-     * aware of the context, e.g. `CurrentLimetype` and `CurrentLimeobject`
+     * Observable that emits new context values to trigger state re-evaluation.
+     *
+     * When provided, the repository will subscribe to this observable and re-fetch
+     * or re-evaluate its state whenever a new context is emitted. This is particularly
+     * useful for components that need to react to navigation or context switches.
+     *
+     * Only applies to context-aware state services like:
+     * - `CurrentLimetype` - Updates when limetype in context changes
+     * - `CurrentLimeobject` - Re-fetches object when context ID changes
      */
     context?: Subscribable<LimeWebComponentContext> | null;
 }

package/dist/core/state.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"state.d.ts","sourceRoot":"","sources":["../../src/core/state.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,MAAM,CAAC;AACpC,OAAO,EAAE,uBAAuB,EAAE,MAAM,WAAW,CAAC;AAEpD;;;;GAIG;AACH,MAAM,WAAW,eAAe;IAC5B;;;;;;OAMG;IACH,SAAS,CACL,QAAQ,EAAE,CAAC,GAAG,IAAI,EAAE,OAAO,EAAE,KAAK,IAAI,EACtC,OAAO,CAAC,EAAE,YAAY,GACvB,MAAM,IAAI,CAAC;CACjB;AAED;;;;GAIG;AACH,MAAM,WAAW,YAAY;IACzB;;;OAGG;IAEH,GAAG,CAAC,EAAE,KAAK,CAAC,CAAC,KAAK,EAAE,GAAG,KAAK,GAAG,CAAC,CAAC;IAEjC;;;OAGG;IAEH,MAAM,CAAC,EAAE,KAAK,CAAC,CAAC,KAAK,EAAE,GAAG,KAAK,OAAO,CAAC,CAAC;CAC3C;AAED;;;GAGG;AACH,MAAM,WAAW,wBAAyB,SAAQ,YAAY;IAC1D;;;;;OAKG;IACH,OAAO,CAAC,EAAE,YAAY,CAAC,uBAAuB,CAAC,GAAG,IAAI,CAAC;CAC1D"}
+{"version":3,"file":"state.d.ts","sourceRoot":"","sources":["../../src/core/state.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,MAAM,CAAC;AACpC,OAAO,EAAE,uBAAuB,EAAE,MAAM,WAAW,CAAC;AAQpD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+CG;AACH,MAAM,WAAW,eAAe;IAC5B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OA8BG;IACH,SAAS,CACL,QAAQ,EAAE,CAAC,GAAG,IAAI,EAAE,OAAO,EAAE,KAAK,IAAI,EACtC,OAAO,CAAC,EAAE,YAAY,GACvB,MAAM,IAAI,CAAC;CACjB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,MAAM,WAAW,YAAY;IACzB;;;;;;;;;;;;;;;;OAgBG;IAEH,GAAG,CAAC,EAAE,KAAK,CAAC,CAAC,KAAK,EAAE,GAAG,KAAK,GAAG,CAAC,CAAC;IAEjC;;;;;;;;;;;;;;;OAeG;IAEH,MAAM,CAAC,EAAE,KAAK,CAAC,CAAC,KAAK,EAAE,GAAG,KAAK,OAAO,CAAC,CAAC;CAC3C;AAED;;;;;;;;;GASG;AACH,MAAM,WAAW,wBAAyB,SAAQ,YAAY;IAC1D;;;;;;;;;;OAUG;IACH,OAAO,CAAC,EAAE,YAAY,CAAC,uBAAuB,CAAC,GAAG,IAAI,CAAC;CAC1D"}

package/dist/datetimeformatter/datetimeformatter.d.ts

@@ -45,60 +45,123 @@ export interface DateTimeFormatterOptions {
     hourCycle?: HourCycle;
 }
 /**
- * Service for formatting date and time values.
+ * Service for formatting and parsing date and time values according to user locale
+ *
+ * The DateTimeFormatter provides locale-aware formatting for dates and times,
+ * ensuring that dates are displayed in a format familiar to the user. It handles
+ * various date types including full timestamps, date-only values, times, and
+ * relative dates (like "2 hours ago").
+ *
+ * The service also handles the complexities of parsing date strings and converting
+ * between UTC and local time, which is particularly important for date-only values
+ * that need timezone compensation.
+ *
+ * @example Basic date formatting
+ * ```ts
+ * const formatter = platform.get(PlatformServiceName.DateTimeFormatter);
+ * const timestamp = '2024-03-15T14:30:00.000Z';
+ * const formatted = formatter.format(timestamp, 'datetime');
+ * // Result: "2024-03-15 14:30" (format varies by locale)
+ * ```
+ *
+ * @example Formatting different date types
+ * ```ts
+ * const formatter = platform.get(PlatformServiceName.DateTimeFormatter);
+ * const now = new Date();
+ *
+ * formatter.format(now, 'datetime');  // "2024-03-15 14:30"
+ * formatter.format(now, 'date');      // "2024-03-15"
+ * formatter.format(now, 'time');      // "14:30" or "2:30 PM"
+ * formatter.format(now, 'relative');  // "2 hours ago"
+ * ```
  *
  * @public
  * @group Localization
  */
 export interface DateTimeFormatter {
     /**
-     * Format the given date as the given type.
+     * Format a date or timestamp as a localized string
      *
-     * **Note**<br>
-     * If a `string` is supplied to the `date` parameter, it will be converted
-     * to a `Date` object before formatting. See {@link DateTimeFormatter#parse}
-     * for details.
+     * Converts a date value to a human-readable string according to the user's
+     * locale and the specified format type. The formatting automatically respects
+     * the user's locale preferences for date ordering, separators, and time format.
+     *
+     * @param date - The date to format, either as a Date object or an ISO string
+     * @param options - Either a string specifying the format type (e.g., 'date', 'time', 'datetime'),
+     *                  or a {@link DateTimeFormatterOptions} object for more control
+     * @returns A localized string representation of the date
+     *
+     * @example Simple string format types
+     * ```ts
+     * const date = new Date('2024-03-15T14:30:00');
+     *
+     * formatter.format(date, 'date');     // "2024-03-15" or "15/03/2024" depending on locale
+     * formatter.format(date, 'time');     // "14:30" or "2:30 PM" depending on locale
+     * formatter.format(date, 'datetime'); // "2024-03-15 14:30"
+     * formatter.format(date, 'relative'); // "2 hours ago"
+     * ```
      *
-     * @param date - The date to format.
-     * @param options - Either a string specifying the type to format the date
-     *                  as, or a `DateTimeFormatterOptions` object.
-     * @returns A string representation of the date.
+     * @example Using format options
+     * ```ts
+     * const date = new Date();
+     *
+     * // With specific hour cycle
+     * const formatted = formatter.format(date, {
+     *     type: 'datetime',
+     *     hourCycle: 'h23' // Force 24-hour format
+     * });
+     * ```
+     *
+     * @example Formatting dates from API responses
+     * ```ts
+     * // Date string from API will be automatically parsed
+     * const apiDate = "2024-03-15T14:30:00.000Z";
+     * const display = formatter.format(apiDate, 'datetime');
+     * ```
+     *
+     * @note If a `string` is supplied to the `date` parameter, it will be converted
+     *       to a `Date` object before formatting. See {@link DateTimeFormatter.parse}
+     *       for details on how strings are parsed.
      */
     format(date: Date | string, options: DateTimeType | DateTimeFormatterOptions): string;
     /**
-     * Parse a date value, converting it to local time.
+     * Parse a date string and convert it to a Date object with proper timezone handling
      *
-     * A date value passed as a `string` may be converted as a date-only value
-     * if `type` is 'date', 'year', 'quarter', 'month' or 'week'. This
-     * basically means returning dates as they are stored in the database, by
-     * compensating for any time difference.
+     * This method handles the complexity of converting date strings to Date objects,
+     * with special handling for date-only values that need timezone compensation.
+     * This is important when working with dates stored in a database, which are
+     * typically in UTC but should be displayed in the user's local timezone.
      *
-     * If the date value includes time but not time zone offset, it is always
-     * interpreted as local time.
+     * For date-only types ('date', 'year', 'quarter', 'month', 'week'), the method
+     * compensates for timezone differences to ensure the date is displayed as stored.
      *
-     * A date value passed as a `Date` is returned unmodified.
+     * @param date - The date value to parse. Can be a Date object (returned unchanged)
+     *               or a string in ISO format
+     * @param type - The date type, which determines how timezone conversion is handled
+     * @returns A Date object in local time
      *
-     * @example
-     * ```
-     * // Converting a saved date value to 2023-10-24 in local time
-     * // The time component of the returned date object should be ignored.
-     * const parsedDate = dateTimeFormatter.parse('2023-10-24T00:00:00.000Z', 'date');
+     * @example Parsing a date-only value from the database
+     * ```ts
+     * // Database stores "2024-03-15" as "2024-03-15T00:00:00.000Z"
+     * const dbValue = '2024-03-15T00:00:00.000Z';
+     * const localDate = formatter.parse(dbValue, 'date');
+     * // localDate represents 2024-03-15 in local time, regardless of timezone
      * ```
      *
-     * @example
-     * ```
-     * // Parsing a date value as local time
-     * const parsedDate = dateTimeFormatter.parse('2023-10-24 23:59:59', 'date');
+     * @example Parsing a datetime value
+     * ```ts
+     * // Datetime values include time and respect timezones
+     * const timestamp = '2024-03-15T14:30:00.000Z';
+     * const localTime = formatter.parse(timestamp, 'datetime');
+     * // localTime is converted to user's timezone
      * ```
      *
-     * @example
+     * @example Parsing a date string without timezone info
+     * ```ts
+     * // Date strings without timezone are interpreted as local time
+     * const localDateStr = '2024-03-15 23:59:59';
+     * const date = formatter.parse(localDateStr, 'datetime');
      * ```
-     * // Parsing a date-time value including time zone offset
-     * const parsedDate = dateTimeFormatter.parse('2023-10-24T13:00:00+02:00', 'time');
-     * ```
-     *
-     * @param date - The date to parse.
-     * @param type - A string specifying the type to parse the date as.
      */
     parse(date: Date | string, type: DateTimeType): Date;
 }

package/dist/datetimeformatter/datetimeformatter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"datetimeformatter.d.ts","sourceRoot":"","sources":["../../src/datetimeformatter/datetimeformatter.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC;AAEnD;;;;;GAKG;AACH,MAAM,MAAM,YAAY,GAAG,MAAM,GAAG,UAAU,GAAG,oBAAoB,CAAC;AAEtE;;;;;;;;;GASG;AACH,MAAM,MAAM,SAAS,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,CAAC;AAEtD;;;;;GAKG;AACH,MAAM,WAAW,wBAAwB;IACrC;;OAEG;IACH,IAAI,EAAE,YAAY,CAAC;IAEnB;;;;;;;;;OASG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;OAEG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;CACzB;AAED;;;;;GAKG;AACH,MAAM,WAAW,iBAAiB;IAC9B;;;;;;;;;;;;OAYG;IACH,MAAM,CACF,IAAI,EAAE,IAAI,GAAG,MAAM,EACnB,OAAO,EAAE,YAAY,GAAG,wBAAwB,GACjD,MAAM,CAAC;IAEV;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAkCG;IACH,KAAK,CAAC,IAAI,EAAE,IAAI,GAAG,MAAM,EAAE,IAAI,EAAE,YAAY,GAAG,IAAI,CAAC;CACxD"}
+{"version":3,"file":"datetimeformatter.d.ts","sourceRoot":"","sources":["../../src/datetimeformatter/datetimeformatter.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC;AAEnD;;;;;GAKG;AACH,MAAM,MAAM,YAAY,GAAG,MAAM,GAAG,UAAU,GAAG,oBAAoB,CAAC;AAEtE;;;;;;;;;GASG;AACH,MAAM,MAAM,SAAS,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,CAAC;AAEtD;;;;;GAKG;AACH,MAAM,WAAW,wBAAwB;IACrC;;OAEG;IACH,IAAI,EAAE,YAAY,CAAC;IAEnB;;;;;;;;;OASG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;OAEG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;CACzB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,MAAM,WAAW,iBAAiB;IAC9B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OA2CG;IACH,MAAM,CACF,IAAI,EAAE,IAAI,GAAG,MAAM,EACnB,OAAO,EAAE,YAAY,GAAG,wBAAwB,GACjD,MAAM,CAAC;IAEV;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAsCG;IACH,KAAK,CAAC,IAAI,EAAE,IAAI,GAAG,MAAM,EAAE,IAAI,EAAE,YAAY,GAAG,IAAI,CAAC;CACxD"}

package/dist/device/decorator.d.ts

@@ -6,12 +6,64 @@ import { StateOptions } from '../core';
  */
 export type DeviceType = 'desktop' | 'tablet' | 'phone';
 /**
- * Get the current device type
+ * Decorator that subscribes to the current device type from the device service.
  *
- * The device will only indicate roughly how big the viewport is, not what actual device is being used
+ * This decorator automatically updates the decorated property whenever the device type
+ * changes (typically when the viewport is resized). The device type indicates roughly
+ * how big the viewport is, not what actual device is being used. It's the recommended
+ * approach over manual subscriptions as it handles subscription lifecycle automatically.
+ *
+ * @param options - Configuration for state transformation and filtering via {@link StateOptions}
+ * @returns A PropertyDecorator that sets up automatic subscription to device type
+ *
+ * @remarks
+ * Subscribes to: Device service
+ *
+ * Updates: The decorated property with {@link DeviceType} ('desktop', 'tablet', or 'phone')
+ *
+ * Viewport-aware: Automatically updates when viewport size changes
+ *
+ * Lifecycle: Automatically subscribes in `connectedCallback` and
+ * unsubscribes in `disconnectedCallback`
+ *
+ * @example
+ * Basic usage with Stencil component
+ * ```typescript
+ * @State()
+ * @SelectDevice()
+ * private deviceType: DeviceType;
+ *
+ * render() {
+ *     return (
+ *         <div class={`layout-${this.deviceType}`}>
+ *             <p>Viewing on: {this.deviceType}</p>
+ *         </div>
+ *     );
+ * }
+ * ```
+ *
+ * @example
+ * Conditional rendering based on device
+ * ```typescript
+ * @State()
+ * @SelectDevice()
+ * private device: DeviceType;
+ *
+ * render() {
+ *     if (this.device === 'phone') {
+ *         return <button class="hamburger-menu">Menu</button>;
+ *     }
+ *
+ *     return (
+ *         <nav class="full-menu">
+ *             <a href="/home">Home</a>
+ *             <a href="/about">About</a>
+ *             <a href="/contact">Contact</a>
+ *         </nav>
+ *     );
+ * }
+ * ```
  *
- * @param options - state decorator options
- * @returns state decorator
  * @public
  * @group Device
  */

package/dist/device/decorator.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"decorator.d.ts","sourceRoot":"","sources":["../../src/device/decorator.ts"],"names":[],"mappings":"AAAA,OAAO,EAEH,YAAY,EAEf,MAAM,SAAS,CAAC;AAGjB;;;;GAIG;AACH,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,QAAQ,GAAG,OAAO,CAAC;AAExD;;;;;;;;;GASG;AACH,wBAAgB,YAAY,CAAC,OAAO,GAAE,YAAiB,GAAG,iBAAiB,CAM1E"}
+{"version":3,"file":"decorator.d.ts","sourceRoot":"","sources":["../../src/device/decorator.ts"],"names":[],"mappings":"AAAA,OAAO,EAEH,YAAY,EAEf,MAAM,SAAS,CAAC;AAGjB;;;;GAIG;AACH,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,QAAQ,GAAG,OAAO,CAAC;AAExD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6DG;AACH,wBAAgB,YAAY,CAAC,OAAO,GAAE,YAAiB,GAAG,iBAAiB,CAM1E"}

package/dist/device/device.d.ts

@@ -1,25 +1,70 @@
 import { StateRepository } from '../core';
 /**
+ * Service for detecting the current device viewport size category
+ *
+ * The Device service provides reactive methods to determine whether the current
+ * viewport size falls into desktop, tablet, or phone categories. This is useful
+ * for creating responsive components that adapt their UI based on available screen
+ * real estate.
+ *
+ * Since Device extends {@link StateRepository}, components can use the `@State`
+ * decorator to automatically re-render when the device size category changes
+ * (e.g., when the user resizes their browser window or rotates their device).
+ *
+ * @example Checking device size
+ * ```ts
+ * const device = this.platform.get(PlatformServiceName.Device);
+ *
+ * if (device.isPhoneSize()) {
+ *     return this.generateMobileExport();
+ * }
+ *
+ * return this.generateDesktopExport();
+ * ```
+ *
+ * @example Conditional logic based on viewport size
+ * ```ts
+ * const device = this.platform.get(PlatformServiceName.Device);
+ *
+ * if (device.isDesktopSize()) {
+ *     columns = ['name', 'email', 'phone', 'address', 'status'];
+ * } else if (device.isTabletSize()) {
+ *     columns = ['name', 'email', 'status'];
+ * } else {
+ *     columns = ['name', 'status'];
+ * }
+ * ```
+ *
  * @public
  * @group Device
  */
 export interface Device extends StateRepository {
     /**
-     * Check if the device type is 'desktop'
+     * Check if the current viewport size is in the desktop category
      *
-     * @returns true/false
+     * Desktop size typically indicates a large screen with ample horizontal space
+     * for full-featured layouts, multiple columns, and detailed information display.
+     *
+     * @returns `true` if the viewport is desktop-sized, `false` otherwise
      */
     isDesktopSize(): boolean;
     /**
-     * Check if the device type is 'tablet'
+     * Check if the current viewport size is in the tablet category
+     *
+     * Tablet size typically indicates a medium-sized screen where some layout
+     * adjustments may be needed compared to desktop, but more space is available
+     * than on phone screens.
      *
-     * @returns true/false
+     * @returns `true` if the viewport is tablet-sized, `false` otherwise
      */
     isTabletSize(): boolean;
     /**
-     * Check if the device type is 'phone'
+     * Check if the current viewport size is in the phone category
+     *
+     * Phone size typically indicates a small screen where compact layouts, single
+     * columns, and simplified navigation patterns are most appropriate.
      *
-     * @returns true/false
+     * @returns `true` if the viewport is phone-sized, `false` otherwise
      */
     isPhoneSize(): boolean;
 }

package/dist/device/device.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"device.d.ts","sourceRoot":"","sources":["../../src/device/device.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAE1C;;;GAGG;AACH,MAAM,WAAW,MAAO,SAAQ,eAAe;IAC3C;;;;OAIG;IACH,aAAa,IAAI,OAAO,CAAC;IAEzB;;;;OAIG;IACH,YAAY,IAAI,OAAO,CAAC;IAExB;;;;OAIG;IACH,WAAW,IAAI,OAAO,CAAC;CAC1B"}
+{"version":3,"file":"device.d.ts","sourceRoot":"","sources":["../../src/device/device.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAE1C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCG;AACH,MAAM,WAAW,MAAO,SAAQ,eAAe;IAC3C;;;;;;;OAOG;IACH,aAAa,IAAI,OAAO,CAAC;IAEzB;;;;;;;;OAQG;IACH,YAAY,IAAI,OAAO,CAAC;IAExB;;;;;;;OAOG;IACH,WAAW,IAAI,OAAO,CAAC;CAC1B"}