@tekton-ui/core 0.2.0

package/dist/layout-tokens/safe-area.js

@@ -0,0 +1,316 @@
+/**
+ * @tekton-ui/core - SafeArea Utilities
+ * SafeArea calculation and application utilities for mobile platforms
+ * [SPEC-LAYOUT-004] [MILESTONE-3]
+ */
+import { SAFE_AREA_DEFAULTS } from './types.js';
+// ============================================================================
+// Device Detection
+// ============================================================================
+/**
+ * Detect device type for SafeArea defaults
+ *
+ * Uses screen dimensions and platform APIs to determine device classification.
+ * Detection strategy:
+ * - iOS: Checks screen dimensions and model via window.navigator
+ * - Android: Checks navigation mode via WindowInsets API
+ * - Web: Returns 'unknown'
+ *
+ * @returns DeviceType enum value
+ *
+ * @example
+ * ```typescript
+ * const device = detectDeviceType();
+ * if (device === 'ios-dynamic-island') {
+ *   console.log('Using 59pt top safe area');
+ * }
+ * ```
+ */
+export function detectDeviceType() {
+    // Web environment - no safe area needed
+    if (typeof window === 'undefined') {
+        return 'unknown';
+    }
+    // Check platform
+    const platform = getPlatform();
+    if (platform === 'ios') {
+        return detectiOSDeviceType();
+    }
+    else if (platform === 'android') {
+        return detectAndroidDeviceType();
+    }
+    // Default to unknown for web and other platforms
+    return 'unknown';
+}
+/**
+ * Get current platform
+ * @internal
+ */
+function getPlatform() {
+    if (typeof navigator === 'undefined') {
+        return 'web';
+    }
+    const userAgent = navigator.userAgent || navigator.vendor;
+    if (/iPad|iPhone|iPod/.test(userAgent)) {
+        return 'ios';
+    }
+    else if (/android/i.test(userAgent)) {
+        return 'android';
+    }
+    return 'web';
+}
+/**
+ * Detect iOS device type based on screen dimensions
+ * @internal
+ */
+function detectiOSDeviceType() {
+    if (typeof window === 'undefined') {
+        return 'ios-standard';
+    }
+    const width = window.screen.width;
+    const height = window.screen.height;
+    // iPhone 14 Pro / 15 Pro / 16 Pro dimensions (Dynamic Island)
+    // 393×852 @3x = 1179×2556
+    const dynamicIslandModels = [
+        { width: 393, height: 852 }, // iPhone 14 Pro, 15 Pro
+        { width: 430, height: 932 }, // iPhone 14 Pro Max, 15 Pro Max, 16 Pro Max
+    ];
+    for (const model of dynamicIslandModels) {
+        if ((width === model.width && height === model.height) ||
+            (width === model.height && height === model.width)) {
+            return 'ios-dynamic-island';
+        }
+    }
+    // iPhone with notch (X, XS, XR, 11, 12, 13 series)
+    // 375×812, 390×844, 414×896, 428×926
+    const notchModels = [
+        { width: 375, height: 812 }, // iPhone X, XS, 11 Pro, 12 mini, 13 mini
+        { width: 390, height: 844 }, // iPhone 12, 12 Pro, 13, 13 Pro, 14
+        { width: 414, height: 896 }, // iPhone XR, 11, 11 Pro Max, XS Max
+        { width: 428, height: 926 }, // iPhone 12 Pro Max, 13 Pro Max, 14 Plus
+    ];
+    for (const model of notchModels) {
+        if ((width === model.width && height === model.height) ||
+            (width === model.height && height === model.width)) {
+            return 'ios-notch';
+        }
+    }
+    // Standard iOS devices (SE, 8, 7, 6s) - no notch or Dynamic Island
+    return 'ios-standard';
+}
+/**
+ * Detect Android device navigation type
+ * @internal
+ */
+function detectAndroidDeviceType() {
+    // In React Native, this would check WindowInsets
+    // For web, we default to gesture navigation (more common on modern devices)
+    if (typeof window === 'undefined') {
+        return 'android-gesture';
+    }
+    // Check if running in React Native environment
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const isReactNative = typeof window.ReactNativeWebView !== 'undefined';
+    if (isReactNative) {
+        // In React Native, we could check navigation bar height from WindowInsets
+        // For now, default to gesture navigation (24dp)
+        return 'android-gesture';
+    }
+    // Web Android defaults to gesture navigation
+    return 'android-gesture';
+}
+// ============================================================================
+// Safe Area Calculation
+// ============================================================================
+/**
+ * Get safe area top inset based on device type
+ *
+ * @returns Top inset in points
+ *
+ * @example
+ * ```typescript
+ * const topInset = getSafeAreaTop();
+ * // Returns 59 on iPhone 14 Pro (Dynamic Island)
+ * // Returns 44 on iPhone 13 (Notch)
+ * // Returns 20 on iPhone SE (Standard)
+ * ```
+ */
+export function getSafeAreaTop() {
+    const device = detectDeviceType();
+    switch (device) {
+        case 'ios-dynamic-island':
+            return SAFE_AREA_DEFAULTS.DYNAMIC_ISLAND;
+        case 'ios-notch':
+            return SAFE_AREA_DEFAULTS.NOTCH;
+        case 'ios-standard':
+            return SAFE_AREA_DEFAULTS.STATUS_BAR;
+        default:
+            return 0;
+    }
+}
+/**
+ * Get safe area bottom inset based on device type
+ *
+ * @returns Bottom inset in points
+ *
+ * @example
+ * ```typescript
+ * const bottomInset = getSafeAreaBottom();
+ * // Returns 34 on iPhone with Face ID (home indicator)
+ * // Returns 24 on Android with gesture navigation
+ * // Returns 48 on Android with 3-button navigation
+ * ```
+ */
+export function getSafeAreaBottom() {
+    const device = detectDeviceType();
+    switch (device) {
+        case 'ios-dynamic-island':
+        case 'ios-notch':
+            return SAFE_AREA_DEFAULTS.HOME_INDICATOR;
+        case 'android-gesture':
+            return 24; // Android gesture navigation bar
+        case 'android-button':
+            return 48; // Android 3-button navigation
+        default:
+            return 0;
+    }
+}
+/**
+ * Get safe area insets for the current device
+ *
+ * Detection strategy:
+ * 1. In browser/web context: Returns zero insets
+ * 2. In React Native with react-native-safe-area-context: Uses library
+ * 3. Fallback: Uses detectDeviceType() and applies defaults
+ *
+ * @returns SafeAreaInsets object with top, bottom, left, right values in points
+ *
+ * @example
+ * ```typescript
+ * const insets = getSafeAreaInsets();
+ * console.log(insets.top); // 44 on iPhone 14, 59 on iPhone 14 Pro
+ * console.log(insets.bottom); // 34 on Face ID iPhones, 24 on Android gesture
+ * ```
+ */
+export function getSafeAreaInsets() {
+    // Web environment - no safe area
+    if (typeof window === 'undefined') {
+        return { top: 0, bottom: 0, left: 0, right: 0 };
+    }
+    // Check if running in React Native with safe area context
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const global = window;
+    if (global.ReactNativeWebView && global.__SAFE_AREA_INSETS__) {
+        // Use provided safe area insets from React Native
+        return global.__SAFE_AREA_INSETS__;
+    }
+    // Fallback to device type detection
+    const top = getSafeAreaTop();
+    const bottom = getSafeAreaBottom();
+    return {
+        top,
+        bottom,
+        left: 0, // Horizontal insets typically handled in landscape
+        right: 0,
+    };
+}
+// ============================================================================
+// Safe Area Application
+// ============================================================================
+/**
+ * Apply safe area configuration to a layout
+ *
+ * Modifies layout padding based on safe area configuration and edges.
+ * Respects the edges configuration to determine which sides receive safe area padding.
+ *
+ * @param layout - Layout object to modify (must have padding property)
+ * @param config - SafeArea configuration from ShellToken
+ * @returns Modified layout with safe area applied
+ *
+ * @example
+ * ```typescript
+ * const layout = { padding: { top: 0, bottom: 0, left: 0, right: 0 } };
+ * const safeLayout = applySafeAreaToLayout(layout, shellConfig.safeArea);
+ * // Result: { padding: { top: 44, bottom: 34, left: 0, right: 0 } }
+ * ```
+ *
+ * @example
+ * ```typescript
+ * // Only apply safe area to top edge
+ * const config = {
+ *   edges: { top: true, bottom: false, horizontal: false },
+ *   // ... other config
+ * };
+ * const layout = applySafeAreaToLayout(baseLayout, config);
+ * // Result: Only top padding is modified
+ * ```
+ */
+export function applySafeAreaToLayout(layout, config) {
+    // Get current safe area insets
+    const insets = getSafeAreaInsets();
+    // Initialize padding if not present
+    if (!layout.padding) {
+        layout.padding = { top: 0, bottom: 0, left: 0, right: 0 };
+    }
+    // Ensure all padding properties exist
+    const padding = layout.padding;
+    if (padding.top === undefined) {
+        padding.top = 0;
+    }
+    if (padding.bottom === undefined) {
+        padding.bottom = 0;
+    }
+    if (padding.left === undefined) {
+        padding.left = 0;
+    }
+    if (padding.right === undefined) {
+        padding.right = 0;
+    }
+    // Apply safe area based on edges configuration
+    if (config.edges.top) {
+        padding.top += insets.top;
+    }
+    if (config.edges.bottom) {
+        padding.bottom += insets.bottom;
+    }
+    if (config.edges.horizontal) {
+        padding.left += insets.left;
+        padding.right += insets.right;
+    }
+    return layout;
+}
+// ============================================================================
+// React Native Hook (Placeholder)
+// ============================================================================
+/**
+ * React Native hook to get safe area insets
+ *
+ * This is a placeholder implementation that wraps getSafeAreaInsets().
+ * In a real React Native environment, this should use the
+ * react-native-safe-area-context library's useSafeAreaInsets() hook.
+ *
+ * @returns SafeAreaInsets from react-native-safe-area-context or fallback
+ *
+ * @example
+ * ```typescript
+ * function MyComponent() {
+ *   const insets = useSafeArea();
+ *   return <View style={{ paddingTop: insets.top }} />;
+ * }
+ * ```
+ *
+ * @see https://github.com/th3rdwave/react-native-safe-area-context
+ *
+ * @remarks
+ * For production use, replace this with:
+ * ```typescript
+ * import { useSafeAreaInsets } from 'react-native-safe-area-context';
+ * export const useSafeArea = useSafeAreaInsets;
+ * ```
+ */
+export function useSafeArea() {
+    // Placeholder implementation - returns static insets
+    // In a real React environment, this would use React hooks
+    return getSafeAreaInsets();
+}
+//# sourceMappingURL=safe-area.js.map

package/dist/layout-tokens/safe-area.js.map

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

package/dist/layout-tokens/sections-advanced.d.ts

@@ -0,0 +1,277 @@
+/**
+ * @tekton-ui/core - Advanced Section Pattern Token Definitions
+ * HIGH Priority Advanced Layout Patterns for SPEC-LAYOUT-005
+ *
+ * Implements 4 advanced section patterns:
+ * 1. section.masonry - Pinterest-style waterfall grid
+ * 2. section.sticky-header - Header that sticks to viewport top
+ * 3. section.sticky-footer - Footer that sticks to viewport bottom
+ * 4. section.collapsible-sidebar - Sidebar with expand/collapse toggle
+ *
+ * [SPEC-LAYOUT-005] [PHASE-1]
+ */
+import type { AdvancedSectionPatternToken, MasonrySectionCSS, StickySectionCSS, CollapsibleSectionCSS, SectionPatternToken } from './types.js';
+/**
+ * Pinterest-style waterfall grid layout using CSS columns
+ *
+ * Uses CSS multi-column layout for broad browser support (IE10+).
+ * Items flow vertically within columns, creating the classic masonry effect.
+ *
+ * Responsive behavior:
+ * - default (mobile): 2 columns
+ * - sm: 2 columns
+ * - md: 3 columns
+ * - lg: 4 columns
+ * - xl: 5 columns
+ * - 2xl: 6 columns
+ *
+ * @example
+ * ```tsx
+ * // React usage
+ * <div style={{ ...getMasonryStyles(breakpoint) }}>
+ *   {items.map(item => (
+ *     <div key={item.id} style={{ breakInside: 'avoid' }}>
+ *       {item.content}
+ *     </div>
+ *   ))}
+ * </div>
+ * ```
+ */
+export declare const SECTION_MASONRY: AdvancedSectionPatternToken;
+/**
+ * Header that sticks to the viewport top during scroll
+ *
+ * Uses CSS `position: sticky` for native scroll-aware behavior.
+ * Includes shadow and z-index for proper layering when stuck.
+ *
+ * Features:
+ * - Sticks to top of viewport (top: 0)
+ * - High z-index (100) to stay above content
+ * - Optional shadow when stuck for visual separation
+ * - Full-width with transparent background option
+ *
+ * Responsive behavior:
+ * - Consistent sticky behavior across all breakpoints
+ * - Padding adjusts for different screen sizes
+ *
+ * @example
+ * ```tsx
+ * // React usage with intersection observer for stuck state
+ * const [isStuck, setIsStuck] = useState(false);
+ *
+ * <header style={{
+ *   position: 'sticky',
+ *   top: 0,
+ *   zIndex: 100,
+ *   boxShadow: isStuck ? 'var(--shadow-md)' : 'none'
+ * }}>
+ *   {children}
+ * </header>
+ * ```
+ */
+export declare const SECTION_STICKY_HEADER: AdvancedSectionPatternToken;
+/**
+ * Footer that sticks to the viewport bottom during scroll
+ *
+ * Uses CSS `position: sticky` with `bottom: 0` for bottom-stuck behavior.
+ * Ideal for action bars, navigation bars, or persistent CTAs.
+ *
+ * Features:
+ * - Sticks to bottom of viewport (bottom: 0)
+ * - High z-index (100) to stay above content
+ * - Top shadow for visual separation from content
+ * - Safe area padding support for mobile devices
+ *
+ * Responsive behavior:
+ * - Consistent sticky behavior across all breakpoints
+ * - Padding adjusts for different screen sizes
+ * - Mobile: considers safe area for home indicator
+ *
+ * @example
+ * ```tsx
+ * // React usage for action bar
+ * <footer style={{
+ *   position: 'sticky',
+ *   bottom: 0,
+ *   zIndex: 100,
+ *   paddingBottom: 'env(safe-area-inset-bottom)'
+ * }}>
+ *   <Button>Save</Button>
+ *   <Button>Cancel</Button>
+ * </footer>
+ * ```
+ */
+export declare const SECTION_STICKY_FOOTER: AdvancedSectionPatternToken;
+/**
+ * Sidebar with expand/collapse toggle capability
+ *
+ * Provides a collapsible navigation sidebar with smooth CSS transitions.
+ * Supports both icon-only collapsed state and full-width expanded state.
+ *
+ * Features:
+ * - Expanded width: 256px (atomic.spacing.64)
+ * - Collapsed width: 64px (atomic.spacing.16)
+ * - Smooth 200ms transition animation
+ * - Icon-only mode when collapsed
+ * - Full content when expanded
+ *
+ * Responsive behavior:
+ * - default/sm: Hidden by default (overlay mode recommended)
+ * - md: Collapsed by default
+ * - lg+: Expanded by default
+ *
+ * @example
+ * ```tsx
+ * // React usage with state management
+ * const [isCollapsed, setIsCollapsed] = useState(false);
+ *
+ * <aside style={{
+ *   width: isCollapsed ? '64px' : '256px',
+ *   transition: 'width 200ms ease-in-out',
+ *   overflow: 'hidden'
+ * }}>
+ *   <button onClick={() => setIsCollapsed(!isCollapsed)}>
+ *     {isCollapsed ? <ChevronRight /> : <ChevronLeft />}
+ *   </button>
+ *   <nav>
+ *     {menuItems.map(item => (
+ *       <MenuItem
+ *         key={item.id}
+ *         icon={item.icon}
+ *         label={isCollapsed ? '' : item.label}
+ *       />
+ *     ))}
+ *   </nav>
+ * </aside>
+ * ```
+ */
+export declare const SECTION_COLLAPSIBLE_SIDEBAR: AdvancedSectionPatternToken;
+/**
+ * Get an advanced section pattern token by its ID
+ *
+ * @param patternId - Advanced section pattern token ID (e.g., "section.masonry")
+ * @returns AdvancedSectionPatternToken if found, undefined otherwise
+ *
+ * @example
+ * ```typescript
+ * const masonry = getAdvancedSectionPatternToken('section.masonry');
+ * if (masonry) {
+ *   console.log(masonry.description);
+ *   // "Pinterest-style waterfall grid using CSS columns for broad browser support"
+ * }
+ * ```
+ */
+export declare function getAdvancedSectionPatternToken(patternId: string): AdvancedSectionPatternToken | undefined;
+/**
+ * Get all available advanced section pattern tokens
+ *
+ * @returns Array of all AdvancedSectionPatternTokens
+ *
+ * @example
+ * ```typescript
+ * const allAdvanced = getAllAdvancedSectionPatternTokens();
+ * console.log(`Available advanced sections: ${allAdvanced.length}`);
+ * // "Available advanced sections: 4"
+ *
+ * allAdvanced.forEach(token => {
+ *   console.log(`${token.id}: ${token.type}`);
+ * });
+ * ```
+ */
+export declare function getAllAdvancedSectionPatternTokens(): AdvancedSectionPatternToken[];
+/**
+ * Get advanced section pattern tokens filtered by type
+ *
+ * @param type - Section type ('masonry', 'sticky', or 'collapsible')
+ * @returns Array of AdvancedSectionPatternTokens with the specified type
+ *
+ * @example
+ * ```typescript
+ * const stickyTokens = getAdvancedSectionsByType('sticky');
+ * console.log(`Sticky sections: ${stickyTokens.length}`);
+ * // "Sticky sections: 2" (header and footer)
+ * ```
+ */
+export declare function getAdvancedSectionsByType(type: 'masonry' | 'sticky' | 'collapsible'): AdvancedSectionPatternToken[];
+/**
+ * Get CSS properties for an advanced section pattern at a specific breakpoint
+ *
+ * @param patternId - Advanced section pattern token ID
+ * @param breakpoint - Breakpoint key ('default', 'sm', 'md', 'lg', 'xl', '2xl')
+ * @returns CSS properties for the specified breakpoint, or undefined if not found
+ *
+ * @example
+ * ```typescript
+ * const masonryMd = getAdvancedSectionCSS('section.masonry', 'md');
+ * if (masonryMd) {
+ *   console.log(`Columns at md: ${masonryMd.columnCount}`);
+ *   // "Columns at md: 3"
+ * }
+ * ```
+ */
+export declare function getAdvancedSectionCSS(patternId: string, breakpoint?: 'default' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'): (MasonrySectionCSS | StickySectionCSS | CollapsibleSectionCSS) | undefined;
+/**
+ * Get state-specific CSS for collapsible or sticky patterns
+ *
+ * @param patternId - Advanced section pattern token ID
+ * @param state - State name ('default', 'collapsed', 'stuck')
+ * @returns CSS properties for the specified state, or undefined if not found
+ *
+ * @example
+ * ```typescript
+ * const collapsedCSS = getAdvancedSectionStateCSS('section.collapsible-sidebar', 'collapsed');
+ * if (collapsedCSS) {
+ *   console.log(`Collapsed width: ${collapsedCSS.width}`);
+ *   // "Collapsed width: atomic.spacing.16"
+ * }
+ *
+ * const stuckCSS = getAdvancedSectionStateCSS('section.sticky-header', 'stuck');
+ * if (stuckCSS) {
+ *   console.log(`Shadow when stuck: ${stuckCSS.boxShadow}`);
+ *   // "Shadow when stuck: atomic.shadow.md"
+ * }
+ * ```
+ */
+export declare function getAdvancedSectionStateCSS(patternId: string, state: 'default' | 'collapsed' | 'stuck'): Partial<MasonrySectionCSS | StickySectionCSS | CollapsibleSectionCSS> | undefined;
+/**
+ * Check if a pattern ID is an advanced section pattern
+ *
+ * @param patternId - Pattern ID to check
+ * @returns true if the pattern is an advanced section pattern
+ *
+ * @example
+ * ```typescript
+ * isAdvancedSectionPattern('section.masonry'); // true
+ * isAdvancedSectionPattern('section.grid-3'); // false
+ * ```
+ */
+export declare function isAdvancedSectionPattern(patternId: string): boolean;
+/**
+ * Get all advanced section pattern IDs
+ *
+ * @returns Array of all advanced section pattern IDs
+ *
+ * @example
+ * ```typescript
+ * const ids = getAdvancedSectionPatternIds();
+ * // ['section.masonry', 'section.sticky-header', 'section.sticky-footer', 'section.collapsible-sidebar']
+ * ```
+ */
+export declare function getAdvancedSectionPatternIds(): string[];
+/**
+ * Combine base section patterns with advanced section patterns
+ * Useful for getting a complete list of all available section patterns
+ *
+ * @param baseSections - Array of base SectionPatternTokens from sections.ts
+ * @returns Combined array of all section pattern tokens
+ *
+ * @example
+ * ```typescript
+ * import { getAllSectionPatternTokens } from './sections.js';
+ *
+ * const allSections = combineWithBaseSections(getAllSectionPatternTokens());
+ * console.log(`Total sections: ${allSections.length}`);
+ * ```
+ */
+export declare function combineWithBaseSections(baseSections: SectionPatternToken[]): (SectionPatternToken | AdvancedSectionPatternToken)[];
+//# sourceMappingURL=sections-advanced.d.ts.map

package/dist/layout-tokens/sections-advanced.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sections-advanced.d.ts","sourceRoot":"","sources":["../../src/layout-tokens/sections-advanced.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAK,EACV,2BAA2B,EAC3B,iBAAiB,EACjB,gBAAgB,EAChB,qBAAqB,EACrB,mBAAmB,EACpB,MAAM,YAAY,CAAC;AAOpB;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,eAAO,MAAM,eAAe,EAAE,2BAgD7B,CAAC;AAMF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,eAAO,MAAM,qBAAqB,EAAE,2BA+DnC,CAAC;AAMF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,eAAO,MAAM,qBAAqB,EAAE,2BAqEnC,CAAC;AAMF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0CG;AACH,eAAO,MAAM,2BAA2B,EAAE,2BAyEzC,CAAC;AAqBF;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,8BAA8B,CAC5C,SAAS,EAAE,MAAM,GAChB,2BAA2B,GAAG,SAAS,CAEzC;AAED;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,kCAAkC,IAAI,2BAA2B,EAAE,CAElF;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,yBAAyB,CACvC,IAAI,EAAE,SAAS,GAAG,QAAQ,GAAG,aAAa,GACzC,2BAA2B,EAAE,CAE/B;AAED;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,qBAAqB,CACnC,SAAS,EAAE,MAAM,EACjB,UAAU,GAAE,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAiB,GACpE,CAAC,iBAAiB,GAAG,gBAAgB,GAAG,qBAAqB,CAAC,GAAG,SAAS,CAsB5E;AAED;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,0BAA0B,CACxC,SAAS,EAAE,MAAM,EACjB,KAAK,EAAE,SAAS,GAAG,WAAW,GAAG,OAAO,GACvC,OAAO,CAAC,iBAAiB,GAAG,gBAAgB,GAAG,qBAAqB,CAAC,GAAG,SAAS,CAOnF;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,wBAAwB,CAAC,SAAS,EAAE,MAAM,GAAG,OAAO,CAEnE;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,4BAA4B,IAAI,MAAM,EAAE,CAEvD;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,uBAAuB,CACrC,YAAY,EAAE,mBAAmB,EAAE,GAClC,CAAC,mBAAmB,GAAG,2BAA2B,CAAC,EAAE,CAEvD"}