react-magazine 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Gnanaprakash
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,205 @@
+# react-magazine
+
+React component for creating realistic magazine-style page flip animations with built-in controls and full TypeScript support.
+
+## Installation
+
+```bash
+npm install react-magazine
+```
+
+## Quick Start
+
+```tsx
+import { MagazineBook, Page } from 'react-magazine';
+import 'react-magazine/styles.css';
+
+function App() {
+  return (
+    <MagazineBook
+      width={400}
+      height={500}
+      showCover={true}
+      showControls={true}
+    >
+      <Page number={1}>Front Cover</Page>
+      <Page number={2}>Page 2</Page>
+      <Page number={3}>Page 3</Page>
+      <Page number={4}>Back Cover</Page>
+    </MagazineBook>
+  );
+}
+```
+
+## Features
+
+- Realistic page flip animation
+- Built-in navigation controls
+- Hard/soft page density support
+- Responsive design (fixed/stretch modes)
+- Portrait and landscape orientation
+- Touch and mouse support
+- TypeScript support
+- SSR compatible (with dynamic import)
+
+## Using the useFlipBook Hook
+
+```tsx
+import { MagazineBook, Page, useFlipBook } from 'react-magazine';
+import 'react-magazine/styles.css';
+
+function App() {
+  const { bookRef, state, flipNext, flipPrev, handlers } = useFlipBook();
+
+  return (
+    <div>
+      <MagazineBook ref={bookRef} width={400} height={500} {...handlers}>
+        <Page number={1}>Page 1</Page>
+        <Page number={2}>Page 2</Page>
+        <Page number={3}>Page 3</Page>
+        <Page number={4}>Page 4</Page>
+      </MagazineBook>
+
+      <p>Page {state.currentPage + 1} of {state.pageCount}</p>
+      <button onClick={() => flipPrev()}>Previous</button>
+      <button onClick={() => flipNext()}>Next</button>
+    </div>
+  );
+}
+```
+
+## Props
+
+### MagazineBook Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `width` | `number` | `400` | Page width in pixels |
+| `height` | `number` | `300` | Page height in pixels |
+| `size` | `'fixed' \| 'stretch'` | `'fixed'` | Size mode |
+| `startPage` | `number` | `0` | Starting page index |
+| `showCover` | `boolean` | `false` | Makes first & last pages hard (like book covers) |
+| `showControls` | `boolean` | `false` | Show built-in navigation controls |
+| `drawShadow` | `boolean` | `true` | Draw shadow when flipping |
+| `flippingTime` | `number` | `1000` | Flip animation duration (ms) |
+| `usePortrait` | `boolean` | `false` | Use portrait mode |
+| `mobileScrollSupport` | `boolean` | `true` | Enable mobile scroll |
+| `swipeDistance` | `number` | `30` | Swipe distance threshold |
+| `showPageCorners` | `boolean` | `true` | Show page corner fold on hover |
+| `disableFlipByClick` | `boolean` | `false` | Disable click to flip |
+| `clickEventForward` | `boolean` | `true` | Forward click events to children |
+| `useMouseEvents` | `boolean` | `true` | Enable mouse/touch events |
+| `maxShadowOpacity` | `number` | `1` | Shadow intensity (0-1) |
+| `autoSize` | `boolean` | `true` | Auto-resize based on container |
+| `isLoading` | `boolean` | `false` | Show loading state |
+| `disabled` | `boolean` | `false` | Disable all interactions |
+| `controlsClassName` | `string` | `''` | Custom class for controls |
+| `controlsStyle` | `CSSProperties` | `{}` | Custom style for controls |
+
+### Event Props
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `onFlip` | `(e: FlipEvent) => void` | Called when page flips |
+| `onChangeState` | `(e: StateEvent) => void` | Called when state changes |
+| `onChangeOrientation` | `(e: OrientationEvent) => void` | Called when orientation changes |
+| `onInit` | `(e: FlipEvent) => void` | Called when initialized |
+| `onUpdate` | `(e: FlipEvent) => void` | Called when updated |
+
+### Page Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `number` | `number` | - | Page number (for display) |
+| `density` | `'soft' \| 'hard'` | `'soft'` | Page density (soft bends, hard doesn't) |
+| `className` | `string` | `''` | Custom class |
+| `style` | `CSSProperties` | `{}` | Custom style |
+
+## showCover Behavior
+
+When `showCover={true}`:
+- First page automatically becomes **hard** (doesn't bend)
+- Last page automatically becomes **hard** (doesn't bend)
+- All inner pages remain **soft** (paper flip effect)
+
+```tsx
+<MagazineBook showCover={true}>
+  <Page>Front Cover (auto hard)</Page>
+  <Page>Page 2 (soft - bends)</Page>
+  <Page>Page 3 (soft - bends)</Page>
+  <Page>Back Cover (auto hard)</Page>
+</MagazineBook>
+```
+
+## Ref API Methods
+
+Access via `bookRef.current`:
+
+| Method | Description |
+|--------|-------------|
+| `flipNext(corner?)` | Flip to next page |
+| `flipPrev(corner?)` | Flip to previous page |
+| `flip(pageNum, corner?)` | Flip to specific page with animation |
+| `turnToPage(pageNum)` | Jump to page without animation |
+| `getCurrentPageIndex()` | Get current page index (0-based) |
+| `getPageCount()` | Get total page count |
+| `getOrientation()` | Get current orientation |
+| `getState()` | Get current state |
+| `pageFlip()` | Get underlying PageFlip instance |
+
+## useFlipBook Hook
+
+Returns:
+
+| Property | Type | Description |
+|----------|------|-------------|
+| `bookRef` | `RefObject` | Ref to attach to MagazineBook |
+| `state` | `object` | `{ currentPage, pageCount, orientation, pageState, isFlipping }` |
+| `flipNext` | `function` | Flip to next page |
+| `flipPrev` | `function` | Flip to previous page |
+| `flipTo` | `function` | Flip to specific page |
+| `turnTo` | `function` | Jump without animation |
+| `canFlipNext` | `function` | Check if can flip next |
+| `canFlipPrev` | `function` | Check if can flip prev |
+| `handlers` | `object` | Event handlers to spread on MagazineBook |
+
+## Next.js Usage
+
+```tsx
+import dynamic from 'next/dynamic';
+
+const MagazineBook = dynamic(
+  () => import('react-magazine').then((mod) => mod.MagazineBook),
+  { ssr: false }
+);
+
+const Page = dynamic(
+  () => import('react-magazine').then((mod) => mod.Page),
+  { ssr: false }
+);
+```
+
+## TypeScript
+
+All types are exported:
+
+```tsx
+import type {
+  PageFlipInstance,
+  IFlipSetting,
+  IEventProps,
+  PageProps,
+  FlipEvent,
+  OrientationEvent,
+  StateEvent,
+  PageDensity,
+  PageOrientation,
+  PageState,
+  FlipCorner,
+  SizeType,
+} from 'react-magazine';
+```
+
+## License
+
+MIT

package/dist/cjs/_virtual/_commonjsHelpers.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
+
+exports.commonjsGlobal = commonjsGlobal;
+//# sourceMappingURL=_commonjsHelpers.js.map

package/dist/cjs/_virtual/_commonjsHelpers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"_commonjsHelpers.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/dist/cjs/_virtual/page-flip.browser.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var pageFlip_browser = {exports: {}};
+
+exports.__module = pageFlip_browser;
+//# sourceMappingURL=page-flip.browser.js.map

package/dist/cjs/_virtual/page-flip.browser.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"page-flip.browser.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/dist/cjs/components/MagazineBook.js

@@ -0,0 +1,264 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var pageFlip_browser = require('../node_modules/page-flip/dist/js/page-flip.browser.js');
+
+// SVG Arrow Icons
+const ChevronLeft = () => (jsxRuntime.jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: jsxRuntime.jsx("polyline", { points: "15 18 9 12 15 6" }) }));
+const ChevronRight = () => (jsxRuntime.jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: jsxRuntime.jsx("polyline", { points: "9 18 15 12 9 6" }) }));
+const MagazineBookForward = React.forwardRef((props, ref) => {
+    const { className = '', style = {}, children, renderOnlyPageLengthChange = false, isLoading = false, disabled = false, showControls = false, controlsClassName = '', controlsStyle = {}, width = 400, height = 300, size = 'fixed', minWidth = 100, maxWidth = 2000, minHeight = 100, maxHeight = 2000, drawShadow = true, flippingTime = 1000, usePortrait = false, startZIndex = 0, autoSize = true, maxShadowOpacity = 1, showCover = false, mobileScrollSupport = true, clickEventForward = true, useMouseEvents = true, swipeDistance = 30, showPageCorners = true, disableFlipByClick = false, startPage = 0, onFlip, onChangeOrientation, onChangeState, onInit, onUpdate, } = props;
+    const htmlElementRef = React.useRef(null);
+    const childRef = React.useRef([]);
+    const pageFlip = React.useRef(null);
+    const [pages, setPages] = React.useState([]);
+    const [orientation, setOrientation] = React.useState('landscape');
+    const [currentPage, setCurrentPage] = React.useState(0);
+    const [pageCount, setPageCount] = React.useState(0);
+    // Expose pageFlip instance and helper methods via ref
+    React.useImperativeHandle(ref, () => ({
+        pageFlip: () => pageFlip.current,
+        flipNext: (corner) => {
+            pageFlip.current?.flipNext(corner);
+        },
+        flipPrev: (corner) => {
+            pageFlip.current?.flipPrev(corner);
+        },
+        flip: (pageNum, corner) => {
+            pageFlip.current?.flip(pageNum, corner);
+        },
+        turnToPage: (pageNum) => {
+            pageFlip.current?.turnToPage(pageNum);
+        },
+        getCurrentPageIndex: () => {
+            return pageFlip.current?.getCurrentPageIndex() ?? 0;
+        },
+        getPageCount: () => {
+            return pageFlip.current?.getPageCount() ?? 0;
+        },
+        getOrientation: () => {
+            const o = pageFlip.current?.getOrientation();
+            return o;
+        },
+        getState: () => {
+            const s = pageFlip.current?.getState();
+            return s;
+        },
+    }));
+    const refreshOnPageDelete = React.useCallback(() => {
+        if (pageFlip.current) {
+            pageFlip.current.clear();
+        }
+    }, []);
+    const removeHandlers = React.useCallback(() => {
+        const flip = pageFlip.current;
+        if (flip) {
+            flip.off('flip');
+            flip.off('changeOrientation');
+            flip.off('changeState');
+            flip.off('init');
+            flip.off('update');
+        }
+    }, []);
+    // Handle children changes
+    React.useEffect(() => {
+        childRef.current = [];
+        if (children) {
+            const childArray = React.Children.toArray(children).filter(React.isValidElement);
+            const totalChildren = childArray.length;
+            const childList = childArray.map((child, index) => {
+                if (!React.isValidElement(child))
+                    return null;
+                // Get the density from child props, default to 'soft'
+                const childProps = child.props;
+                let density = childProps.density || 'soft';
+                // If showCover is true, force first and last pages to be hard
+                if (showCover) {
+                    const isFirstPage = index === 0;
+                    const isLastPage = index === totalChildren - 1;
+                    if (isFirstPage || isLastPage) {
+                        density = 'hard';
+                    }
+                }
+                return React.cloneElement(child, {
+                    ref: (dom) => {
+                        if (dom) {
+                            // Ensure data-density is set correctly on the DOM element
+                            dom.setAttribute('data-density', density);
+                            childRef.current[index] = dom;
+                        }
+                    },
+                });
+            })?.filter(Boolean);
+            if (!renderOnlyPageLengthChange || pages.length !== childList?.length) {
+                if (childList && childList.length < pages.length) {
+                    refreshOnPageDelete();
+                }
+                setPages(childList || []);
+            }
+        }
+    }, [children, renderOnlyPageLengthChange, pages.length, refreshOnPageDelete, showCover]);
+    // Initialize PageFlip and handle updates
+    React.useEffect(() => {
+        const setHandlers = () => {
+            const flip = pageFlip.current;
+            if (flip) {
+                // Always track current page for controls
+                flip.on('flip', (e) => {
+                    const event = e;
+                    setCurrentPage(event.data);
+                    if (onFlip) {
+                        onFlip(e);
+                    }
+                });
+                // Always track orientation for CSS classes
+                flip.on('changeOrientation', (e) => {
+                    const event = e;
+                    setOrientation(event.data);
+                    if (onChangeOrientation) {
+                        onChangeOrientation(e);
+                    }
+                });
+                if (onChangeState) {
+                    flip.on('changeState', (e) => onChangeState(e));
+                }
+                // Always track page count on init
+                flip.on('init', (e) => {
+                    // Get actual page count from the flip instance
+                    const count = flip.getPageCount();
+                    setPageCount(count);
+                    // Set initial page
+                    setCurrentPage(flip.getCurrentPageIndex());
+                    if (onInit) {
+                        onInit(e);
+                    }
+                });
+                if (onUpdate) {
+                    flip.on('update', (e) => onUpdate(e));
+                }
+            }
+        };
+        // Filter out any undefined entries and ensure proper order
+        const validRefs = childRef.current.filter((ref) => ref !== null && ref !== undefined);
+        if (pages.length > 0 && validRefs.length > 0) {
+            removeHandlers();
+            if (htmlElementRef.current && !pageFlip.current) {
+                pageFlip.current = new pageFlip_browser.pageFlip_browserExports.PageFlip(htmlElementRef.current, {
+                    width,
+                    height,
+                    size,
+                    minWidth,
+                    maxWidth,
+                    minHeight,
+                    maxHeight,
+                    drawShadow,
+                    flippingTime,
+                    usePortrait,
+                    startZIndex,
+                    autoSize,
+                    maxShadowOpacity,
+                    showCover,
+                    mobileScrollSupport,
+                    clickEventForward,
+                    useMouseEvents,
+                    swipeDistance,
+                    showPageCorners,
+                    disableFlipByClick,
+                    startPage,
+                });
+            }
+            if (pageFlip.current) {
+                // Use requestAnimationFrame to ensure DOM is fully rendered
+                requestAnimationFrame(() => {
+                    if (pageFlip.current) {
+                        if (!pageFlip.current.getFlipController()) {
+                            pageFlip.current.loadFromHTML(validRefs);
+                        }
+                        else {
+                            pageFlip.current.updateFromHtml(validRefs);
+                        }
+                        setHandlers();
+                    }
+                });
+            }
+            else {
+                setHandlers();
+            }
+        }
+        return () => {
+            removeHandlers();
+        };
+    }, [
+        pages,
+        width,
+        height,
+        size,
+        minWidth,
+        maxWidth,
+        minHeight,
+        maxHeight,
+        drawShadow,
+        flippingTime,
+        usePortrait,
+        startZIndex,
+        autoSize,
+        maxShadowOpacity,
+        showCover,
+        mobileScrollSupport,
+        clickEventForward,
+        useMouseEvents,
+        swipeDistance,
+        showPageCorners,
+        disableFlipByClick,
+        startPage,
+        onFlip,
+        onChangeOrientation,
+        onChangeState,
+        onInit,
+        onUpdate,
+        removeHandlers,
+    ]);
+    // Cleanup on unmount
+    React.useEffect(() => {
+        return () => {
+            if (pageFlip.current) {
+                pageFlip.current.destroy();
+                pageFlip.current = null;
+            }
+        };
+    }, []);
+    // Control handlers
+    const handlePrevPage = React.useCallback(() => {
+        pageFlip.current?.flipPrev();
+    }, []);
+    const handleNextPage = React.useCallback(() => {
+        pageFlip.current?.flipNext();
+    }, []);
+    // Build CSS classes
+    const cssClasses = [
+        'react-magazine',
+        `react-magazine--${orientation}`,
+        isLoading ? 'react-magazine--loading' : '',
+        disabled ? 'react-magazine--disabled' : '',
+        className,
+    ]
+        .filter(Boolean)
+        .join(' ');
+    return (jsxRuntime.jsxs("div", { className: "react-magazine-wrapper", children: [jsxRuntime.jsx("div", { ref: htmlElementRef, className: cssClasses, style: {
+                    ...style,
+                    pointerEvents: disabled ? 'none' : undefined,
+                }, children: pages }), showControls && (jsxRuntime.jsxs("div", { className: `react-magazine-controls ${controlsClassName}`, style: {
+                    display: 'flex',
+                    justifyContent: 'center',
+                    alignItems: 'center',
+                    gap: '15px',
+                    marginTop: '8px',
+                    ...controlsStyle,
+                }, children: [jsxRuntime.jsxs("button", { className: "react-magazine-controls__btn react-magazine-controls__btn--prev", onClick: handlePrevPage, disabled: currentPage === 0, type: "button", children: [jsxRuntime.jsx(ChevronLeft, {}), jsxRuntime.jsx("span", { children: "Previous" })] }), jsxRuntime.jsxs("span", { className: "react-magazine-controls__page-info", children: ["Page ", currentPage + 1, " of ", pageCount || '...'] }), jsxRuntime.jsxs("button", { className: "react-magazine-controls__btn react-magazine-controls__btn--next", onClick: handleNextPage, disabled: currentPage >= pageCount - 1, type: "button", children: [jsxRuntime.jsx("span", { children: "Next" }), jsxRuntime.jsx(ChevronRight, {})] })] }))] }));
+});
+MagazineBookForward.displayName = 'MagazineBook';
+const MagazineBook = React.memo(MagazineBookForward);
+
+exports.MagazineBook = MagazineBook;
+//# sourceMappingURL=MagazineBook.js.map

package/dist/cjs/components/MagazineBook.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MagazineBook.js","sources":["../../../../src/components/MagazineBook.tsx"],"sourcesContent":[null],"names":["_jsx","forwardRef","useRef","useState","useImperativeHandle","useCallback","useEffect","PageFlip","_jsxs"],"mappings":"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"}

package/dist/cjs/components/Page.js

@@ -0,0 +1,21 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+
+/**
+ * Page component for use inside MagazineBook
+ * Each page should be wrapped in this component to properly integrate with the flip book
+ */
+const Page = React.forwardRef(({ children, number, density = 'soft', className = '', style = {} }, ref) => {
+    return (jsxRuntime.jsx("div", { ref: ref, className: `react-magazine-page ${className}`, "data-density": density, "data-page-number": number, style: {
+            width: '100%',
+            height: '100%',
+            boxSizing: 'border-box',
+            ...style,
+        }, children: children }));
+});
+Page.displayName = 'Page';
+
+exports.Page = Page;
+//# sourceMappingURL=Page.js.map

package/dist/cjs/components/Page.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Page.js","sources":["../../../../src/components/Page.tsx"],"sourcesContent":[null],"names":["forwardRef","_jsx"],"mappings":";;;;;AAGA;;;AAGG;AACI,MAAM,IAAI,GAAGA,gBAAU,CAC5B,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,OAAO,GAAG,MAAM,EAAE,SAAS,GAAG,EAAE,EAAE,KAAK,GAAG,EAAE,EAAE,EAAE,GAAG,KAAI;AAC1E,IAAA,QACEC,cAAA,CAAA,KAAA,EAAA,EACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,CAAA,oBAAA,EAAuB,SAAS,EAAE,EAAA,cAAA,EAC/B,OAAO,sBACH,MAAM,EACxB,KAAK,EAAE;AACL,YAAA,KAAK,EAAE,MAAM;AACb,YAAA,MAAM,EAAE,MAAM;AACd,YAAA,SAAS,EAAE,YAAY;AACvB,YAAA,GAAG,KAAK;SACT,EAAA,QAAA,EAEA,QAAQ,EAAA,CACL;AAEV,CAAC;AAGH,IAAI,CAAC,WAAW,GAAG,MAAM;;;;"}

package/dist/cjs/components/PageCover.js

@@ -0,0 +1,21 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+
+/**
+ * PageCover component for hard cover pages (front/back)
+ * This is a specialized Page component with density="hard" preset
+ */
+const PageCover = React.forwardRef(({ children, number, position = 'front', className = '', style = {} }, ref) => {
+    return (jsxRuntime.jsx("div", { ref: ref, className: `react-magazine-page react-magazine-cover react-magazine-cover--${position} ${className}`, "data-density": "hard", "data-page-number": number, "data-cover-position": position, style: {
+            width: '100%',
+            height: '100%',
+            boxSizing: 'border-box',
+            ...style,
+        }, children: children }));
+});
+PageCover.displayName = 'PageCover';
+
+exports.PageCover = PageCover;
+//# sourceMappingURL=PageCover.js.map

package/dist/cjs/components/PageCover.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PageCover.js","sources":["../../../../src/components/PageCover.tsx"],"sourcesContent":[null],"names":["forwardRef","_jsx"],"mappings":";;;;;AAGA;;;AAGG;AACI,MAAM,SAAS,GAAGA,gBAAU,CACjC,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,QAAQ,GAAG,OAAO,EAAE,SAAS,GAAG,EAAE,EAAE,KAAK,GAAG,EAAE,EAAE,EAAE,GAAG,KAAI;IAC5E,QACEC,wBACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,CAAA,+DAAA,EAAkE,QAAQ,IAAI,SAAS,CAAA,CAAE,kBACvF,MAAM,EAAA,kBAAA,EACD,MAAM,EAAA,qBAAA,EACH,QAAQ,EAC7B,KAAK,EAAE;AACL,YAAA,KAAK,EAAE,MAAM;AACb,YAAA,MAAM,EAAE,MAAM;AACd,YAAA,SAAS,EAAE,YAAY;AACvB,YAAA,GAAG,KAAK;SACT,EAAA,QAAA,EAEA,QAAQ,EAAA,CACL;AAEV,CAAC;AAGH,SAAS,CAAC,WAAW,GAAG,WAAW;;;;"}