@v-miniapp/ui-react 1.0.41 → 1.0.47

package/dist-storybook/assets/CUSTOM_ERROR_BOUNDARY-G_i_6aho.js

@@ -0,0 +1,250 @@
+import{j as r}from"./iframe-CLEfhyJc.js";import{useMDXComponents as t}from"./index-7xlKHfV2.js";import{b as a}from"./blocks-CpOj9FQ_.js";import"./preload-helper-PPVm8Dsz.js";import"./index-CaMbLGUB.js";function e(o){const n={code:"code",h1:"h1",h2:"h2",h3:"h3",li:"li",ol:"ol",p:"p",pre:"pre",strong:"strong",ul:"ul",...t(),...o.components};return r.jsxs(r.Fragment,{children:[`
+`,`
+`,r.jsx(a,{title:"Use Cases/Custom Error Boundary"}),`
+`,r.jsx(n.h1,{id:"custom-error-boundary",children:"Custom Error Boundary"}),`
+`,r.jsx(n.p,{children:"App framework đã có sẵn ErrorBoundary global để catch tất cả lỗi, nhưng bạn có thể thêm ErrorBoundary riêng cho từng page thông qua Layouts để bắt lỗi trước và xử lý chi tiết hơn."}),`
+`,r.jsx(n.h2,{id:"tổng-quan",children:"Tổng quan"}),`
+`,r.jsxs(n.p,{children:["App component đã được bọc với ErrorBoundary global ở ngoài cùng để catch tất cả lỗi không được handle. Tuy nhiên, bạn có thể thêm ErrorBoundary riêng cho từng page thông qua ",r.jsx(n.code,{children:"Layouts"})," trong ",r.jsx(n.code,{children:"IPageConfig"})," để:"]}),`
+`,r.jsxs(n.ul,{children:[`
+`,r.jsxs(n.li,{children:[r.jsx(n.strong,{children:"Bắt lỗi trước"}),": ErrorBoundary ở page-level sẽ bắt lỗi trước ErrorBoundary global"]}),`
+`,r.jsxs(n.li,{children:[r.jsx(n.strong,{children:"Xử lý chi tiết"}),": Mỗi page có thể có error UI và logic xử lý lỗi riêng phù hợp với context"]}),`
+`,r.jsxs(n.li,{children:[r.jsx(n.strong,{children:"Isolate errors"}),": Lỗi ở một page không ảnh hưởng đến các pages khác"]}),`
+`,r.jsxs(n.li,{children:[r.jsx(n.strong,{children:"Better UX"}),": User có thể tiếp tục sử dụng các pages khác khi một page bị lỗi"]}),`
+`]}),`
+`,r.jsx(n.h2,{id:"errorboundary-global",children:"ErrorBoundary Global"}),`
+`,r.jsx(n.p,{children:"App component đã có ErrorBoundary global sẵn:"}),`
+`,r.jsx(n.pre,{children:r.jsx(n.code,{className:"language-tsx",children:`<ErrorBoundary isGlobal>{/* App content */}</ErrorBoundary>
+`})}),`
+`,r.jsx(n.p,{children:"ErrorBoundary global sẽ catch tất cả lỗi không được handle bởi các ErrorBoundary khác."}),`
+`,r.jsx(n.h2,{id:"thêm-errorboundary-cho-từng-page",children:"Thêm ErrorBoundary cho từng Page"}),`
+`,r.jsxs(n.p,{children:["Bạn có thể thêm ErrorBoundary riêng cho từng page thông qua ",r.jsx(n.code,{children:"Layouts"}),":"]}),`
+`,r.jsx(n.h3,{id:"bước-1-tạo-custom-error-boundary-layout",children:"Bước 1: Tạo Custom Error Boundary Layout"}),`
+`,r.jsx(n.p,{children:"Bạn có thể tự viết ErrorBoundary của riêng bạn:"}),`
+`,r.jsx(n.pre,{children:r.jsx(n.code,{className:"language-tsx",children:`import { Component } from 'react'
+import { FC, PropsWithChildren } from 'react'
+
+// Custom ErrorBoundary của riêng bạn
+class CustomErrorBoundary extends Component<
+  PropsWithChildren,
+  { hasError: boolean; error: Error | null }
+> {
+  constructor(props: PropsWithChildren) {
+    super(props)
+    this.state = { hasError: false, error: null }
+  }
+
+  static getDerivedStateFromError(error: Error) {
+    return { hasError: true, error }
+  }
+
+  componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
+    // Log error to service
+    console.error('Error caught:', error, errorInfo)
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return (
+        <div>
+          <h1>Something went wrong</h1>
+          <p>{this.state.error?.message}</p>
+        </div>
+      )
+    }
+
+    return this.props.children
+  }
+}
+
+const PageErrorBoundary: FC<PropsWithChildren> = ({ children }) => {
+  return <CustomErrorBoundary>{children}</CustomErrorBoundary>
+}
+`})}),`
+`,r.jsx(n.h3,{id:"bước-2-sử-dụng-trong-page-config",children:"Bước 2: Sử dụng trong Page Config"}),`
+`,r.jsx(n.pre,{children:r.jsx(n.code,{className:"language-tsx",children:`import { App, type IAppConfig } from '@v-miniapp/ui-react'
+import { PageErrorBoundary } from './layouts/PageErrorBoundary'
+
+const appConfig: IAppConfig = {
+  pages: [
+    {
+      pathname: '/home',
+      Component: HomePage,
+      // Wrap page với ErrorBoundary riêng
+      Layouts: [PageErrorBoundary],
+    },
+    {
+      pathname: '/settings',
+      Component: SettingsPage,
+      // Page này không có ErrorBoundary riêng, sẽ dùng global
+    },
+    {
+      pathname: '/detail',
+      Component: DetailPage,
+      // Có thể kết hợp với các layouts khác
+      Layouts: [PageErrorBoundary, HeaderLayout],
+    },
+  ],
+}
+
+export function MiniApp() {
+  return <App config={appConfig} />
+}
+`})}),`
+`,r.jsx(n.h2,{id:"thứ-tự-xử-lý-lỗi",children:"Thứ tự xử lý lỗi"}),`
+`,r.jsx(n.p,{children:"Khi có lỗi xảy ra, ErrorBoundary sẽ được gọi theo thứ tự từ trong ra ngoài:"}),`
+`,r.jsxs(n.ol,{children:[`
+`,r.jsxs(n.li,{children:[r.jsx(n.strong,{children:"Page-level ErrorBoundary"})," (nếu có trong Layouts) - Bắt lỗi trước"]}),`
+`,r.jsxs(n.li,{children:[r.jsx(n.strong,{children:"Global ErrorBoundary"})," (trong App component) - Bắt các lỗi còn lại"]}),`
+`]}),`
+`,r.jsx(n.p,{children:"Nếu page có ErrorBoundary riêng và nó catch được lỗi, Global ErrorBoundary sẽ không nhận được lỗi đó."}),`
+`,r.jsx(n.h2,{id:"ví-dụ-nâng-cao",children:"Ví dụ nâng cao"}),`
+`,r.jsx(n.h3,{id:"custom-error-ui-cho-từng-page",children:"Custom Error UI cho từng page"}),`
+`,r.jsx(n.p,{children:"Bạn có thể tạo các ErrorBoundary khác nhau với error UI và logic xử lý riêng. Có thể sử dụng ErrorBoundary có sẵn hoặc tự viết:"}),`
+`,r.jsx(n.pre,{children:r.jsx(n.code,{className:"language-tsx",children:`import { Component, type ReactNode } from 'react'
+import { FC, PropsWithChildren } from 'react'
+
+// ErrorBoundary với custom error UI cho home page
+class HomeErrorBoundary extends Component<
+  PropsWithChildren,
+  { hasError: boolean }
+> {
+  constructor(props: PropsWithChildren) {
+    super(props)
+    this.state = { hasError: false }
+  }
+
+  static getDerivedStateFromError() {
+    return { hasError: true }
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return <div>Home page error occurred</div>
+    }
+    return this.props.children
+  }
+}
+
+// ErrorBoundary với custom error UI cho settings page
+class SettingsErrorBoundary extends Component<
+  PropsWithChildren,
+  { hasError: boolean }
+> {
+  constructor(props: PropsWithChildren) {
+    super(props)
+    this.state = { hasError: false }
+  }
+
+  static getDerivedStateFromError() {
+    return { hasError: true }
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return <div>Settings page error occurred</div>
+    }
+    return this.props.children
+  }
+}
+
+const HomeErrorBoundaryWrapper: FC<PropsWithChildren> = ({ children }) => {
+  return <HomeErrorBoundary>{children}</HomeErrorBoundary>
+}
+
+const SettingsErrorBoundaryWrapper: FC<PropsWithChildren> = ({ children }) => {
+  return <SettingsErrorBoundary>{children}</SettingsErrorBoundary>
+}
+
+const appConfig: IAppConfig = {
+  pages: [
+    {
+      pathname: '/home',
+      Component: HomePage,
+      Layouts: [HomeErrorBoundaryWrapper],
+    },
+    {
+      pathname: '/settings',
+      Component: SettingsPage,
+      Layouts: [SettingsErrorBoundaryWrapper],
+    },
+  ],
+}
+`})}),`
+`,r.jsx(n.h3,{id:"kết-hợp-với-các-layouts-khác",children:"Kết hợp với các Layouts khác"}),`
+`,r.jsx(n.p,{children:"Bạn có thể kết hợp ErrorBoundary với các layouts khác. Thứ tự trong array sẽ quyết định thứ tự wrap:"}),`
+`,r.jsx(n.pre,{children:r.jsx(n.code,{className:"language-tsx",children:`import { Component } from 'react'
+import { FC, PropsWithChildren } from 'react'
+
+// Tự viết ErrorBoundary hoặc sử dụng từ @v-miniapp/ui-react
+class PageErrorBoundary extends Component<
+  PropsWithChildren,
+  { hasError: boolean }
+> {
+  constructor(props: PropsWithChildren) {
+    super(props)
+    this.state = { hasError: false }
+  }
+
+  static getDerivedStateFromError() {
+    return { hasError: true }
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return <div>Page error occurred</div>
+    }
+    return this.props.children
+  }
+}
+
+const PageErrorBoundaryWrapper: FC<PropsWithChildren> = ({ children }) => {
+  return <PageErrorBoundary>{children}</PageErrorBoundary>
+}
+
+const HeaderLayout: FC<PropsWithChildren> = ({ children }) => {
+  return (
+    <div className="header-layout">
+      <header>Header</header>
+      {children}
+    </div>
+  )
+}
+
+const AuthLayout: FC<PropsWithChildren> = ({ children }) => {
+  return <div className="auth-layout">{children}</div>
+}
+
+const appConfig: IAppConfig = {
+  pages: [
+    {
+      pathname: '/home',
+      Component: HomePage,
+      // Thứ tự wrap: AuthLayout → HeaderLayout → PageErrorBoundaryWrapper → HomePage
+      Layouts: [AuthLayout, HeaderLayout, PageErrorBoundaryWrapper],
+    },
+  ],
+}
+`})}),`
+`,r.jsxs(n.p,{children:[r.jsx(n.strong,{children:"Lưu ý:"})," Phần tử ",r.jsx(n.strong,{children:"cuối cùng"})," trong array sẽ wrap ở ",r.jsx(n.strong,{children:"trong cùng"})," (gần Component nhất). Với ",r.jsx(n.code,{children:"Layouts: [AuthLayout, HeaderLayout, PageErrorBoundaryWrapper]"}),", kết quả render sẽ là:"]}),`
+`,r.jsx(n.pre,{children:r.jsx(n.code,{className:"language-tsx",children:`<AuthLayout>
+  <HeaderLayout>
+    <PageErrorBoundaryWrapper>
+      <HomePage />
+    </PageErrorBoundaryWrapper>
+  </HeaderLayout>
+</AuthLayout>
+`})}),`
+`,r.jsx(n.h2,{id:"lưu-ý-quan-trọng",children:"Lưu ý quan trọng"}),`
+`,r.jsxs(n.ul,{children:[`
+`,r.jsxs(n.li,{children:[r.jsx(n.strong,{children:"Wrap từng màn hình"}),": Layouts phải wrap từng page riêng biệt, không hỗ trợ nested routes hoặc group layout cho nhiều pages. Mỗi page cần wrap ErrorBoundary riêng nếu muốn xử lý lỗi độc lập."]}),`
+`,r.jsxs(n.li,{children:[r.jsx(n.strong,{children:"Không group Layout"}),": Không thể định nghĩa Layouts ở app-level để áp dụng cho nhiều pages. Layouts chỉ có thể được khai báo trong ",r.jsx(n.code,{children:"IPageConfig"})," của từng page."]}),`
+`,r.jsxs(n.li,{children:[r.jsx(n.strong,{children:"ErrorBoundary scope"}),": ErrorBoundary trong Layouts chỉ catch lỗi của page component và các component con của nó, không catch lỗi của các pages khác."]}),`
+`,r.jsxs(n.li,{children:[r.jsx(n.strong,{children:"Bắt lỗi trước"}),": Page-level ErrorBoundary sẽ bắt lỗi trước Global ErrorBoundary, cho phép bạn xử lý lỗi chi tiết hơn cho từng page."]}),`
+`]}),`
+`,r.jsx(n.h2,{id:"best-practices",children:"Best Practices"}),`
+`,r.jsxs(n.ol,{children:[`
+`,r.jsxs(n.li,{children:[r.jsx(n.strong,{children:"Chỉ bọc page cần thiết"}),": Không cần bọc ErrorBoundary cho tất cả pages, chỉ bọc những page có logic phức tạp hoặc cần xử lý lỗi riêng"]}),`
+`,r.jsxs(n.li,{children:[r.jsx(n.strong,{children:"Đặt ErrorBoundary ở trong cùng"}),": Nếu kết hợp với các layouts khác, thường nên đặt ErrorBoundary ở trong cùng (cuối array) để chỉ catch lỗi của page component"]}),`
+`,r.jsxs(n.li,{children:[r.jsx(n.strong,{children:"Custom error UI"}),": Tùy chỉnh error UI phù hợp với context của từng page để có UX tốt hơn"]}),`
+`,r.jsxs(n.li,{children:[r.jsx(n.strong,{children:"Error logging"}),": Có thể thêm error logging trong ErrorBoundary để track lỗi"]}),`
+`]})]})}function l(o={}){const{wrapper:n}={...t(),...o.components};return n?r.jsx(n,{...o,children:r.jsx(e,{...o})}):e(o)}export{l as default};

package/dist-storybook/assets/Color-AVL7NMMY-OD8SQvXt.js

@@ -0,0 +1 @@
+import{d as ce,x as E,u as U,g as he,c as fe,e as de,f as ge,_ as be,h as I}from"./blocks-CpOj9FQ_.js";import{r as p,e as v}from"./iframe-CLEfhyJc.js";import"./preload-helper-PPVm8Dsz.js";import"./index-CaMbLGUB.js";var ve=I({"../../node_modules/color-name/index.js"(r,l){l.exports={aliceblue:[240,248,255],antiquewhite:[250,235,215],aqua:[0,255,255],aquamarine:[127,255,212],azure:[240,255,255],beige:[245,245,220],bisque:[255,228,196],black:[0,0,0],blanchedalmond:[255,235,205],blue:[0,0,255],blueviolet:[138,43,226],brown:[165,42,42],burlywood:[222,184,135],cadetblue:[95,158,160],chartreuse:[127,255,0],chocolate:[210,105,30],coral:[255,127,80],cornflowerblue:[100,149,237],cornsilk:[255,248,220],crimson:[220,20,60],cyan:[0,255,255],darkblue:[0,0,139],darkcyan:[0,139,139],darkgoldenrod:[184,134,11],darkgray:[169,169,169],darkgreen:[0,100,0],darkgrey:[169,169,169],darkkhaki:[189,183,107],darkmagenta:[139,0,139],darkolivegreen:[85,107,47],darkorange:[255,140,0],darkorchid:[153,50,204],darkred:[139,0,0],darksalmon:[233,150,122],darkseagreen:[143,188,143],darkslateblue:[72,61,139],darkslategray:[47,79,79],darkslategrey:[47,79,79],darkturquoise:[0,206,209],darkviolet:[148,0,211],deeppink:[255,20,147],deepskyblue:[0,191,255],dimgray:[105,105,105],dimgrey:[105,105,105],dodgerblue:[30,144,255],firebrick:[178,34,34],floralwhite:[255,250,240],forestgreen:[34,139,34],fuchsia:[255,0,255],gainsboro:[220,220,220],ghostwhite:[248,248,255],gold:[255,215,0],goldenrod:[218,165,32],gray:[128,128,128],green:[0,128,0],greenyellow:[173,255,47],grey:[128,128,128],honeydew:[240,255,240],hotpink:[255,105,180],indianred:[205,92,92],indigo:[75,0,130],ivory:[255,255,240],khaki:[240,230,140],lavender:[230,230,250],lavenderblush:[255,240,245],lawngreen:[124,252,0],lemonchiffon:[255,250,205],lightblue:[173,216,230],lightcoral:[240,128,128],lightcyan:[224,255,255],lightgoldenrodyellow:[250,250,210],lightgray:[211,211,211],lightgreen:[144,238,144],lightgrey:[211,211,211],lightpink:[255,182,193],lightsalmon:[255,160,122],lightseagreen:[32,178,170],lightskyblue:[135,206,250],lightslategray:[119,136,153],lightslategrey:[119,136,153],lightsteelblue:[176,196,222],lightyellow:[255,255,224],lime:[0,255,0],limegreen:[50,205,50],linen:[250,240,230],magenta:[255,0,255],maroon:[128,0,0],mediumaquamarine:[102,205,170],mediumblue:[0,0,205],mediumorchid:[186,85,211],mediumpurple:[147,112,219],mediumseagreen:[60,179,113],mediumslateblue:[123,104,238],mediumspringgreen:[0,250,154],mediumturquoise:[72,209,204],mediumvioletred:[199,21,133],midnightblue:[25,25,112],mintcream:[245,255,250],mistyrose:[255,228,225],moccasin:[255,228,181],navajowhite:[255,222,173],navy:[0,0,128],oldlace:[253,245,230],olive:[128,128,0],olivedrab:[107,142,35],orange:[255,165,0],orangered:[255,69,0],orchid:[218,112,214],palegoldenrod:[238,232,170],palegreen:[152,251,152],paleturquoise:[175,238,238],palevioletred:[219,112,147],papayawhip:[255,239,213],peachpuff:[255,218,185],peru:[205,133,63],pink:[255,192,203],plum:[221,160,221],powderblue:[176,224,230],purple:[128,0,128],rebeccapurple:[102,51,153],red:[255,0,0],rosybrown:[188,143,143],royalblue:[65,105,225],saddlebrown:[139,69,19],salmon:[250,128,114],sandybrown:[244,164,96],seagreen:[46,139,87],seashell:[255,245,238],sienna:[160,82,45],silver:[192,192,192],skyblue:[135,206,235],slateblue:[106,90,205],slategray:[112,128,144],slategrey:[112,128,144],snow:[255,250,250],springgreen:[0,255,127],steelblue:[70,130,180],tan:[210,180,140],teal:[0,128,128],thistle:[216,191,216],tomato:[255,99,71],turquoise:[64,224,208],violet:[238,130,238],wheat:[245,222,179],white:[255,255,255],whitesmoke:[245,245,245],yellow:[255,255,0],yellowgreen:[154,205,50]}}}),Y=I({"../../node_modules/color-convert/conversions.js"(r,l){var s=ve(),h={};for(let e of Object.keys(s))h[s[e]]=e;var u={rgb:{channels:3,labels:"rgb"},hsl:{channels:3,labels:"hsl"},hsv:{channels:3,labels:"hsv"},hwb:{channels:3,labels:"hwb"},cmyk:{channels:4,labels:"cmyk"},xyz:{channels:3,labels:"xyz"},lab:{channels:3,labels:"lab"},lch:{channels:3,labels:"lch"},hex:{channels:1,labels:["hex"]},keyword:{channels:1,labels:["keyword"]},ansi16:{channels:1,labels:["ansi16"]},ansi256:{channels:1,labels:["ansi256"]},hcg:{channels:3,labels:["h","c","g"]},apple:{channels:3,labels:["r16","g16","b16"]},gray:{channels:1,labels:["gray"]}};l.exports=u;for(let e of Object.keys(u)){if(!("channels"in u[e]))throw new Error("missing channels property: "+e);if(!("labels"in u[e]))throw new Error("missing channel labels property: "+e);if(u[e].labels.length!==u[e].channels)throw new Error("channel and label counts mismatch: "+e);let{channels:n,labels:t}=u[e];delete u[e].channels,delete u[e].labels,Object.defineProperty(u[e],"channels",{value:n}),Object.defineProperty(u[e],"labels",{value:t})}u.rgb.hsl=function(e){let n=e[0]/255,t=e[1]/255,a=e[2]/255,o=Math.min(n,t,a),i=Math.max(n,t,a),c=i-o,f,g;i===o?f=0:n===i?f=(t-a)/c:t===i?f=2+(a-n)/c:a===i&&(f=4+(n-t)/c),f=Math.min(f*60,360),f<0&&(f+=360);let b=(o+i)/2;return i===o?g=0:b<=.5?g=c/(i+o):g=c/(2-i-o),[f,g*100,b*100]},u.rgb.hsv=function(e){let n,t,a,o,i,c=e[0]/255,f=e[1]/255,g=e[2]/255,b=Math.max(c,f,g),y=b-Math.min(c,f,g),m=function(k){return(b-k)/6/y+1/2};return y===0?(o=0,i=0):(i=y/b,n=m(c),t=m(f),a=m(g),c===b?o=a-t:f===b?o=1/3+n-a:g===b&&(o=2/3+t-n),o<0?o+=1:o>1&&(o-=1)),[o*360,i*100,b*100]},u.rgb.hwb=function(e){let n=e[0],t=e[1],a=e[2],o=u.rgb.hsl(e)[0],i=1/255*Math.min(n,Math.min(t,a));return a=1-1/255*Math.max(n,Math.max(t,a)),[o,i*100,a*100]},u.rgb.cmyk=function(e){let n=e[0]/255,t=e[1]/255,a=e[2]/255,o=Math.min(1-n,1-t,1-a),i=(1-n-o)/(1-o)||0,c=(1-t-o)/(1-o)||0,f=(1-a-o)/(1-o)||0;return[i*100,c*100,f*100,o*100]};function d(e,n){return(e[0]-n[0])**2+(e[1]-n[1])**2+(e[2]-n[2])**2}u.rgb.keyword=function(e){let n=h[e];if(n)return n;let t=1/0,a;for(let o of Object.keys(s)){let i=s[o],c=d(e,i);c<t&&(t=c,a=o)}return a},u.keyword.rgb=function(e){return s[e]},u.rgb.xyz=function(e){let n=e[0]/255,t=e[1]/255,a=e[2]/255;n=n>.04045?((n+.055)/1.055)**2.4:n/12.92,t=t>.04045?((t+.055)/1.055)**2.4:t/12.92,a=a>.04045?((a+.055)/1.055)**2.4:a/12.92;let o=n*.4124+t*.3576+a*.1805,i=n*.2126+t*.7152+a*.0722,c=n*.0193+t*.1192+a*.9505;return[o*100,i*100,c*100]},u.rgb.lab=function(e){let n=u.rgb.xyz(e),t=n[0],a=n[1],o=n[2];t/=95.047,a/=100,o/=108.883,t=t>.008856?t**(1/3):7.787*t+16/116,a=a>.008856?a**(1/3):7.787*a+16/116,o=o>.008856?o**(1/3):7.787*o+16/116;let i=116*a-16,c=500*(t-a),f=200*(a-o);return[i,c,f]},u.hsl.rgb=function(e){let n=e[0]/360,t=e[1]/100,a=e[2]/100,o,i,c;if(t===0)return c=a*255,[c,c,c];a<.5?o=a*(1+t):o=a+t-a*t;let f=2*a-o,g=[0,0,0];for(let b=0;b<3;b++)i=n+1/3*-(b-1),i<0&&i++,i>1&&i--,6*i<1?c=f+(o-f)*6*i:2*i<1?c=o:3*i<2?c=f+(o-f)*(2/3-i)*6:c=f,g[b]=c*255;return g},u.hsl.hsv=function(e){let n=e[0],t=e[1]/100,a=e[2]/100,o=t,i=Math.max(a,.01);a*=2,t*=a<=1?a:2-a,o*=i<=1?i:2-i;let c=(a+t)/2,f=a===0?2*o/(i+o):2*t/(a+t);return[n,f*100,c*100]},u.hsv.rgb=function(e){let n=e[0]/60,t=e[1]/100,a=e[2]/100,o=Math.floor(n)%6,i=n-Math.floor(n),c=255*a*(1-t),f=255*a*(1-t*i),g=255*a*(1-t*(1-i));switch(a*=255,o){case 0:return[a,g,c];case 1:return[f,a,c];case 2:return[c,a,g];case 3:return[c,f,a];case 4:return[g,c,a];case 5:return[a,c,f]}},u.hsv.hsl=function(e){let n=e[0],t=e[1]/100,a=e[2]/100,o=Math.max(a,.01),i,c;c=(2-t)*a;let f=(2-t)*o;return i=t*o,i/=f<=1?f:2-f,i=i||0,c/=2,[n,i*100,c*100]},u.hwb.rgb=function(e){let n=e[0]/360,t=e[1]/100,a=e[2]/100,o=t+a,i;o>1&&(t/=o,a/=o);let c=Math.floor(6*n),f=1-a;i=6*n-c,(c&1)!==0&&(i=1-i);let g=t+i*(f-t),b,y,m;switch(c){default:case 6:case 0:b=f,y=g,m=t;break;case 1:b=g,y=f,m=t;break;case 2:b=t,y=f,m=g;break;case 3:b=t,y=g,m=f;break;case 4:b=g,y=t,m=f;break;case 5:b=f,y=t,m=g;break}return[b*255,y*255,m*255]},u.cmyk.rgb=function(e){let n=e[0]/100,t=e[1]/100,a=e[2]/100,o=e[3]/100,i=1-Math.min(1,n*(1-o)+o),c=1-Math.min(1,t*(1-o)+o),f=1-Math.min(1,a*(1-o)+o);return[i*255,c*255,f*255]},u.xyz.rgb=function(e){let n=e[0]/100,t=e[1]/100,a=e[2]/100,o,i,c;return o=n*3.2406+t*-1.5372+a*-.4986,i=n*-.9689+t*1.8758+a*.0415,c=n*.0557+t*-.204+a*1.057,o=o>.0031308?1.055*o**(1/2.4)-.055:o*12.92,i=i>.0031308?1.055*i**(1/2.4)-.055:i*12.92,c=c>.0031308?1.055*c**(1/2.4)-.055:c*12.92,o=Math.min(Math.max(0,o),1),i=Math.min(Math.max(0,i),1),c=Math.min(Math.max(0,c),1),[o*255,i*255,c*255]},u.xyz.lab=function(e){let n=e[0],t=e[1],a=e[2];n/=95.047,t/=100,a/=108.883,n=n>.008856?n**(1/3):7.787*n+16/116,t=t>.008856?t**(1/3):7.787*t+16/116,a=a>.008856?a**(1/3):7.787*a+16/116;let o=116*t-16,i=500*(n-t),c=200*(t-a);return[o,i,c]},u.lab.xyz=function(e){let n=e[0],t=e[1],a=e[2],o,i,c;i=(n+16)/116,o=t/500+i,c=i-a/200;let f=i**3,g=o**3,b=c**3;return i=f>.008856?f:(i-16/116)/7.787,o=g>.008856?g:(o-16/116)/7.787,c=b>.008856?b:(c-16/116)/7.787,o*=95.047,i*=100,c*=108.883,[o,i,c]},u.lab.lch=function(e){let n=e[0],t=e[1],a=e[2],o;o=Math.atan2(a,t)*360/2/Math.PI,o<0&&(o+=360);let i=Math.sqrt(t*t+a*a);return[n,i,o]},u.lch.lab=function(e){let n=e[0],t=e[1],a=e[2]/360*2*Math.PI,o=t*Math.cos(a),i=t*Math.sin(a);return[n,o,i]},u.rgb.ansi16=function(e,n=null){let[t,a,o]=e,i=n===null?u.rgb.hsv(e)[2]:n;if(i=Math.round(i/50),i===0)return 30;let c=30+(Math.round(o/255)<<2|Math.round(a/255)<<1|Math.round(t/255));return i===2&&(c+=60),c},u.hsv.ansi16=function(e){return u.rgb.ansi16(u.hsv.rgb(e),e[2])},u.rgb.ansi256=function(e){let n=e[0],t=e[1],a=e[2];return n===t&&t===a?n<8?16:n>248?231:Math.round((n-8)/247*24)+232:16+36*Math.round(n/255*5)+6*Math.round(t/255*5)+Math.round(a/255*5)},u.ansi16.rgb=function(e){let n=e%10;if(n===0||n===7)return e>50&&(n+=3.5),n=n/10.5*255,[n,n,n];let t=(~~(e>50)+1)*.5,a=(n&1)*t*255,o=(n>>1&1)*t*255,i=(n>>2&1)*t*255;return[a,o,i]},u.ansi256.rgb=function(e){if(e>=232){let i=(e-232)*10+8;return[i,i,i]}e-=16;let n,t=Math.floor(e/36)/5*255,a=Math.floor((n=e%36)/6)/5*255,o=n%6/5*255;return[t,a,o]},u.rgb.hex=function(e){let n=(((Math.round(e[0])&255)<<16)+((Math.round(e[1])&255)<<8)+(Math.round(e[2])&255)).toString(16).toUpperCase();return"000000".substring(n.length)+n},u.hex.rgb=function(e){let n=e.toString(16).match(/[a-f0-9]{6}|[a-f0-9]{3}/i);if(!n)return[0,0,0];let t=n[0];n[0].length===3&&(t=t.split("").map(f=>f+f).join(""));let a=parseInt(t,16),o=a>>16&255,i=a>>8&255,c=a&255;return[o,i,c]},u.rgb.hcg=function(e){let n=e[0]/255,t=e[1]/255,a=e[2]/255,o=Math.max(Math.max(n,t),a),i=Math.min(Math.min(n,t),a),c=o-i,f,g;return c<1?f=i/(1-c):f=0,c<=0?g=0:o===n?g=(t-a)/c%6:o===t?g=2+(a-n)/c:g=4+(n-t)/c,g/=6,g%=1,[g*360,c*100,f*100]},u.hsl.hcg=function(e){let n=e[1]/100,t=e[2]/100,a=t<.5?2*n*t:2*n*(1-t),o=0;return a<1&&(o=(t-.5*a)/(1-a)),[e[0],a*100,o*100]},u.hsv.hcg=function(e){let n=e[1]/100,t=e[2]/100,a=n*t,o=0;return a<1&&(o=(t-a)/(1-a)),[e[0],a*100,o*100]},u.hcg.rgb=function(e){let n=e[0]/360,t=e[1]/100,a=e[2]/100;if(t===0)return[a*255,a*255,a*255];let o=[0,0,0],i=n%1*6,c=i%1,f=1-c,g=0;switch(Math.floor(i)){case 0:o[0]=1,o[1]=c,o[2]=0;break;case 1:o[0]=f,o[1]=1,o[2]=0;break;case 2:o[0]=0,o[1]=1,o[2]=c;break;case 3:o[0]=0,o[1]=f,o[2]=1;break;case 4:o[0]=c,o[1]=0,o[2]=1;break;default:o[0]=1,o[1]=0,o[2]=f}return g=(1-t)*a,[(t*o[0]+g)*255,(t*o[1]+g)*255,(t*o[2]+g)*255]},u.hcg.hsv=function(e){let n=e[1]/100,t=e[2]/100,a=n+t*(1-n),o=0;return a>0&&(o=n/a),[e[0],o*100,a*100]},u.hcg.hsl=function(e){let n=e[1]/100,t=e[2]/100*(1-n)+.5*n,a=0;return t>0&&t<.5?a=n/(2*t):t>=.5&&t<1&&(a=n/(2*(1-t))),[e[0],a*100,t*100]},u.hcg.hwb=function(e){let n=e[1]/100,t=e[2]/100,a=n+t*(1-n);return[e[0],(a-n)*100,(1-a)*100]},u.hwb.hcg=function(e){let n=e[1]/100,t=1-e[2]/100,a=t-n,o=0;return a<1&&(o=(t-a)/(1-a)),[e[0],a*100,o*100]},u.apple.rgb=function(e){return[e[0]/65535*255,e[1]/65535*255,e[2]/65535*255]},u.rgb.apple=function(e){return[e[0]/255*65535,e[1]/255*65535,e[2]/255*65535]},u.gray.rgb=function(e){return[e[0]/100*255,e[0]/100*255,e[0]/100*255]},u.gray.hsl=function(e){return[0,0,e[0]]},u.gray.hsv=u.gray.hsl,u.gray.hwb=function(e){return[0,100,e[0]]},u.gray.cmyk=function(e){return[0,0,0,e[0]]},u.gray.lab=function(e){return[e[0],0,0]},u.gray.hex=function(e){let n=Math.round(e[0]/100*255)&255,t=((n<<16)+(n<<8)+n).toString(16).toUpperCase();return"000000".substring(t.length)+t},u.rgb.gray=function(e){return[(e[0]+e[1]+e[2])/3/255*100]}}}),me=I({"../../node_modules/color-convert/route.js"(r,l){var s=Y();function h(){let n={},t=Object.keys(s);for(let a=t.length,o=0;o<a;o++)n[t[o]]={distance:-1,parent:null};return n}function u(n){let t=h(),a=[n];for(t[n].distance=0;a.length;){let o=a.pop(),i=Object.keys(s[o]);for(let c=i.length,f=0;f<c;f++){let g=i[f],b=t[g];b.distance===-1&&(b.distance=t[o].distance+1,b.parent=o,a.unshift(g))}}return t}function d(n,t){return function(a){return t(n(a))}}function e(n,t){let a=[t[n].parent,n],o=s[t[n].parent][n],i=t[n].parent;for(;t[i].parent;)a.unshift(t[i].parent),o=d(s[t[i].parent][i],o),i=t[i].parent;return o.conversion=a,o}l.exports=function(n){let t=u(n),a={},o=Object.keys(t);for(let i=o.length,c=0;c<i;c++){let f=o[c];t[f].parent!==null&&(a[f]=e(f,t))}return a}}}),pe=I({"../../node_modules/color-convert/index.js"(r,l){var s=Y(),h=me(),u={},d=Object.keys(s);function e(t){let a=function(...o){let i=o[0];return i==null?i:(i.length>1&&(o=i),t(o))};return"conversion"in t&&(a.conversion=t.conversion),a}function n(t){let a=function(...o){let i=o[0];if(i==null)return i;i.length>1&&(o=i);let c=t(o);if(typeof c=="object")for(let f=c.length,g=0;g<f;g++)c[g]=Math.round(c[g]);return c};return"conversion"in t&&(a.conversion=t.conversion),a}d.forEach(t=>{u[t]={},Object.defineProperty(u[t],"channels",{value:s[t].channels}),Object.defineProperty(u[t],"labels",{value:s[t].labels});let a=h(t);Object.keys(a).forEach(o=>{let i=a[o];u[t][o]=n(i),u[t][o].raw=e(i)})}),l.exports=u}}),_=be(pe());function M(){return(M=Object.assign||function(r){for(var l=1;l<arguments.length;l++){var s=arguments[l];for(var h in s)Object.prototype.hasOwnProperty.call(s,h)&&(r[h]=s[h])}return r}).apply(this,arguments)}function X(r,l){if(r==null)return{};var s,h,u={},d=Object.keys(r);for(h=0;h<d.length;h++)l.indexOf(s=d[h])>=0||(u[s]=r[s]);return u}function P(r){var l=p.useRef(r),s=p.useRef(function(h){l.current&&l.current(h)});return l.current=r,s.current}var $=function(r,l,s){return l===void 0&&(l=0),s===void 0&&(s=1),r>s?s:r<l?l:r},O=function(r){return"touches"in r},L=function(r){return r&&r.ownerDocument.defaultView||self},G=function(r,l,s){var h=r.getBoundingClientRect(),u=O(l)?(function(d,e){for(var n=0;n<d.length;n++)if(d[n].identifier===e)return d[n];return d[0]})(l.touches,s):l;return{left:$((u.pageX-(h.left+L(r).pageXOffset))/h.width),top:$((u.pageY-(h.top+L(r).pageYOffset))/h.height)}},F=function(r){!O(r)&&r.preventDefault()},V=v.memo(function(r){var l=r.onMove,s=r.onKey,h=X(r,["onMove","onKey"]),u=p.useRef(null),d=P(l),e=P(s),n=p.useRef(null),t=p.useRef(!1),a=p.useMemo(function(){var f=function(y){F(y),(O(y)?y.touches.length>0:y.buttons>0)&&u.current?d(G(u.current,y,n.current)):b(!1)},g=function(){return b(!1)};function b(y){var m=t.current,k=L(u.current),x=y?k.addEventListener:k.removeEventListener;x(m?"touchmove":"mousemove",f),x(m?"touchend":"mouseup",g)}return[function(y){var m=y.nativeEvent,k=u.current;if(k&&(F(m),!(function(N,se){return se&&!O(N)})(m,t.current)&&k)){if(O(m)){t.current=!0;var x=m.changedTouches||[];x.length&&(n.current=x[0].identifier)}k.focus(),d(G(k,m,n.current)),b(!0)}},function(y){var m=y.which||y.keyCode;m<37||m>40||(y.preventDefault(),e({left:m===39?.05:m===37?-.05:0,top:m===40?.05:m===38?-.05:0}))},b]},[e,d]),o=a[0],i=a[1],c=a[2];return p.useEffect(function(){return c},[c]),v.createElement("div",M({},h,{onTouchStart:o,onMouseDown:o,className:"react-colorful__interactive",ref:u,onKeyDown:i,tabIndex:0,role:"slider"}))}),S=function(r){return r.filter(Boolean).join(" ")},D=function(r){var l=r.color,s=r.left,h=r.top,u=h===void 0?.5:h,d=S(["react-colorful__pointer",r.className]);return v.createElement("div",{className:d,style:{top:100*u+"%",left:100*s+"%"}},v.createElement("div",{className:"react-colorful__pointer-fill",style:{backgroundColor:l}}))},w=function(r,l,s){return l===void 0&&(l=0),s===void 0&&(s=Math.pow(10,l)),Math.round(s*r)/s},ye={grad:.9,turn:360,rad:360/(2*Math.PI)},xe=function(r){return Z(B(r))},B=function(r){return r[0]==="#"&&(r=r.substring(1)),r.length<6?{r:parseInt(r[0]+r[0],16),g:parseInt(r[1]+r[1],16),b:parseInt(r[2]+r[2],16),a:r.length===4?w(parseInt(r[3]+r[3],16)/255,2):1}:{r:parseInt(r.substring(0,2),16),g:parseInt(r.substring(2,4),16),b:parseInt(r.substring(4,6),16),a:r.length===8?w(parseInt(r.substring(6,8),16)/255,2):1}},we=function(r,l){return l===void 0&&(l="deg"),Number(r)*(ye[l]||1)},ke=function(r){var l=/hsla?\(?\s*(-?\d*\.?\d+)(deg|rad|grad|turn)?[,\s]+(-?\d*\.?\d+)%?[,\s]+(-?\d*\.?\d+)%?,?\s*[/\s]*(-?\d*\.?\d+)?(%)?\s*\)?/i.exec(r);return l?_e({h:we(l[1],l[2]),s:Number(l[3]),l:Number(l[4]),a:l[5]===void 0?1:Number(l[5])/(l[6]?100:1)}):{h:0,s:0,v:0,a:1}},_e=function(r){var l=r.s,s=r.l;return{h:r.h,s:(l*=(s<50?s:100-s)/100)>0?2*l/(s+l)*100:0,v:s+l,a:r.a}},Ee=function(r){return Ce(Q(r))},J=function(r){var l=r.s,s=r.v,h=r.a,u=(200-l)*s/100;return{h:w(r.h),s:w(u>0&&u<200?l*s/100/(u<=100?u:200-u)*100:0),l:w(u/2),a:w(h,2)}},K=function(r){var l=J(r);return"hsl("+l.h+", "+l.s+"%, "+l.l+"%)"},z=function(r){var l=J(r);return"hsla("+l.h+", "+l.s+"%, "+l.l+"%, "+l.a+")"},Q=function(r){var l=r.h,s=r.s,h=r.v,u=r.a;l=l/360*6,s/=100,h/=100;var d=Math.floor(l),e=h*(1-s),n=h*(1-(l-d)*s),t=h*(1-(1-l+d)*s),a=d%6;return{r:w(255*[h,n,e,e,t,h][a]),g:w(255*[t,h,h,n,e,e][a]),b:w(255*[e,e,t,h,h,n][a]),a:w(u,2)}},Me=function(r){var l=/rgba?\(?\s*(-?\d*\.?\d+)(%)?[,\s]+(-?\d*\.?\d+)(%)?[,\s]+(-?\d*\.?\d+)(%)?,?\s*[/\s]*(-?\d*\.?\d+)?(%)?\s*\)?/i.exec(r);return l?Z({r:Number(l[1])/(l[2]?100/255:1),g:Number(l[3])/(l[4]?100/255:1),b:Number(l[5])/(l[6]?100/255:1),a:l[7]===void 0?1:Number(l[7])/(l[8]?100:1)}):{h:0,s:0,v:0,a:1}},j=function(r){var l=r.toString(16);return l.length<2?"0"+l:l},Ce=function(r){var l=r.r,s=r.g,h=r.b,u=r.a,d=u<1?j(w(255*u)):"";return"#"+j(l)+j(s)+j(h)+d},Z=function(r){var l=r.r,s=r.g,h=r.b,u=r.a,d=Math.max(l,s,h),e=d-Math.min(l,s,h),n=e?d===l?(s-h)/e:d===s?2+(h-l)/e:4+(l-s)/e:0;return{h:w(60*(n<0?n+6:n)),s:w(d?e/d*100:0),v:w(d/255*100),a:u}},ee=v.memo(function(r){var l=r.hue,s=r.onChange,h=S(["react-colorful__hue",r.className]);return v.createElement("div",{className:h},v.createElement(V,{onMove:function(u){s({h:360*u.left})},onKey:function(u){s({h:$(l+360*u.left,0,360)})},"aria-label":"Hue","aria-valuenow":w(l),"aria-valuemax":"360","aria-valuemin":"0"},v.createElement(D,{className:"react-colorful__hue-pointer",left:l/360,color:K({h:l,s:100,v:100,a:1})})))}),re=v.memo(function(r){var l=r.hsva,s=r.onChange,h={backgroundColor:K({h:l.h,s:100,v:100,a:1})};return v.createElement("div",{className:"react-colorful__saturation",style:h},v.createElement(V,{onMove:function(u){s({s:100*u.left,v:100-100*u.top})},onKey:function(u){s({s:$(l.s+100*u.left,0,100),v:$(l.v-100*u.top,0,100)})},"aria-label":"Color","aria-valuetext":"Saturation "+w(l.s)+"%, Brightness "+w(l.v)+"%"},v.createElement(D,{className:"react-colorful__saturation-pointer",top:1-l.v/100,left:l.s/100,color:K(l)})))}),te=function(r,l){if(r===l)return!0;for(var s in r)if(r[s]!==l[s])return!1;return!0},ne=function(r,l){return r.replace(/\s/g,"")===l.replace(/\s/g,"")},$e=function(r,l){return r.toLowerCase()===l.toLowerCase()||te(B(r),B(l))};function ae(r,l,s){var h=P(s),u=p.useState(function(){return r.toHsva(l)}),d=u[0],e=u[1],n=p.useRef({color:l,hsva:d});p.useEffect(function(){if(!r.equal(l,n.current.color)){var a=r.toHsva(l);n.current={hsva:a,color:l},e(a)}},[l,r]),p.useEffect(function(){var a;te(d,n.current.hsva)||r.equal(a=r.fromHsva(d),n.current.color)||(n.current={hsva:d,color:a},h(a))},[d,r,h]);var t=p.useCallback(function(a){e(function(o){return Object.assign({},o,a)})},[]);return[d,t]}var Oe=typeof window<"u"?p.useLayoutEffect:p.useEffect,Se=function(){return typeof __webpack_nonce__<"u"?__webpack_nonce__:void 0},W=new Map,oe=function(r){Oe(function(){var l=r.current?r.current.ownerDocument:document;if(l!==void 0&&!W.has(l)){var s=l.createElement("style");s.innerHTML=`.react-colorful{position:relative;display:flex;flex-direction:column;width:200px;height:200px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default}.react-colorful__saturation{position:relative;flex-grow:1;border-color:transparent;border-bottom:12px solid #000;border-radius:8px 8px 0 0;background-image:linear-gradient(0deg,#000,transparent),linear-gradient(90deg,#fff,hsla(0,0%,100%,0))}.react-colorful__alpha-gradient,.react-colorful__pointer-fill{content:"";position:absolute;left:0;top:0;right:0;bottom:0;pointer-events:none;border-radius:inherit}.react-colorful__alpha-gradient,.react-colorful__saturation{box-shadow:inset 0 0 0 1px rgba(0,0,0,.05)}.react-colorful__alpha,.react-colorful__hue{position:relative;height:24px}.react-colorful__hue{background:linear-gradient(90deg,red 0,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red)}.react-colorful__last-control{border-radius:0 0 8px 8px}.react-colorful__interactive{position:absolute;left:0;top:0;right:0;bottom:0;border-radius:inherit;outline:none;touch-action:none}.react-colorful__pointer{position:absolute;z-index:1;box-sizing:border-box;width:28px;height:28px;transform:translate(-50%,-50%);background-color:#fff;border:2px solid #fff;border-radius:50%;box-shadow:0 2px 4px rgba(0,0,0,.2)}.react-colorful__interactive:focus .react-colorful__pointer{transform:translate(-50%,-50%) scale(1.1)}.react-colorful__alpha,.react-colorful__alpha-pointer{background-color:#fff;background-image:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill-opacity=".05"><path d="M8 0h8v8H8zM0 8h8v8H0z"/></svg>')}.react-colorful__saturation-pointer{z-index:3}.react-colorful__hue-pointer{z-index:2}`,W.set(l,s);var h=Se();h&&s.setAttribute("nonce",h),l.head.appendChild(s)}},[])},Ne=function(r){var l=r.className,s=r.colorModel,h=r.color,u=h===void 0?s.defaultColor:h,d=r.onChange,e=X(r,["className","colorModel","color","onChange"]),n=p.useRef(null);oe(n);var t=ae(s,u,d),a=t[0],o=t[1],i=S(["react-colorful",l]);return v.createElement("div",M({},e,{ref:n,className:i}),v.createElement(re,{hsva:a,onChange:o}),v.createElement(ee,{hue:a.h,onChange:o,className:"react-colorful__last-control"}))},je={defaultColor:"000",toHsva:xe,fromHsva:function(r){return Ee({h:r.h,s:r.s,v:r.v,a:1})},equal:$e},Re=function(r){return v.createElement(Ne,M({},r,{colorModel:je}))},ze=function(r){var l=r.className,s=r.hsva,h=r.onChange,u={backgroundImage:"linear-gradient(90deg, "+z(Object.assign({},s,{a:0}))+", "+z(Object.assign({},s,{a:1}))+")"},d=S(["react-colorful__alpha",l]),e=w(100*s.a);return v.createElement("div",{className:d},v.createElement("div",{className:"react-colorful__alpha-gradient",style:u}),v.createElement(V,{onMove:function(n){h({a:n.left})},onKey:function(n){h({a:$(s.a+n.left)})},"aria-label":"Alpha","aria-valuetext":e+"%","aria-valuenow":e,"aria-valuemin":"0","aria-valuemax":"100"},v.createElement(D,{className:"react-colorful__alpha-pointer",left:s.a,color:z(s)})))},le=function(r){var l=r.className,s=r.colorModel,h=r.color,u=h===void 0?s.defaultColor:h,d=r.onChange,e=X(r,["className","colorModel","color","onChange"]),n=p.useRef(null);oe(n);var t=ae(s,u,d),a=t[0],o=t[1],i=S(["react-colorful",l]);return v.createElement("div",M({},e,{ref:n,className:i}),v.createElement(re,{hsva:a,onChange:o}),v.createElement(ee,{hue:a.h,onChange:o}),v.createElement(ze,{hsva:a,onChange:o,className:"react-colorful__last-control"}))},He={defaultColor:"hsla(0, 0%, 0%, 1)",toHsva:ke,fromHsva:z,equal:ne},Ie=function(r){return v.createElement(le,M({},r,{colorModel:He}))},qe={defaultColor:"rgba(0, 0, 0, 1)",toHsva:Me,fromHsva:function(r){var l=Q(r);return"rgba("+l.r+", "+l.g+", "+l.b+", "+l.a+")"},equal:ne},Pe=function(r){return v.createElement(le,M({},r,{colorModel:qe}))},Le=E.div({position:"relative",maxWidth:250,'&[aria-readonly="true"]':{opacity:.5}}),Be=E(U)({position:"absolute",zIndex:1,top:4,left:4,"[aria-readonly=true] &":{cursor:"not-allowed"}}),Ke=E.div({width:200,margin:5,".react-colorful__saturation":{borderRadius:"4px 4px 0 0"},".react-colorful__hue":{boxShadow:"inset 0 0 0 1px rgb(0 0 0 / 5%)"},".react-colorful__last-control":{borderRadius:"0 0 4px 4px"}}),Te=E(fe)(({theme:r})=>({fontFamily:r.typography.fonts.base})),Xe=E.div({display:"grid",gridTemplateColumns:"repeat(9, 16px)",gap:6,padding:3,marginTop:5,width:200}),Ve=E.div(({theme:r,active:l})=>({width:16,height:16,boxShadow:l?`${r.appBorderColor} 0 0 0 1px inset, ${r.textMutedColor}50 0 0 0 4px`:`${r.appBorderColor} 0 0 0 1px inset`,borderRadius:r.appBorderRadius})),De=`url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill-opacity=".05"><path d="M8 0h8v8H8zM0 8h8v8H0z"/></svg>')`,A=({value:r,style:l,...s})=>{let h=`linear-gradient(${r}, ${r}), ${De}, linear-gradient(#fff, #fff)`;return v.createElement(Ve,{...s,style:{...l,backgroundImage:h}})},Ge=E(de.Input)(({theme:r,readOnly:l})=>({width:"100%",paddingLeft:30,paddingRight:30,boxSizing:"border-box",fontFamily:r.typography.fonts.base})),Fe=E(ge)(({theme:r})=>({position:"absolute",zIndex:1,top:6,right:7,width:20,height:20,padding:4,boxSizing:"border-box",cursor:"pointer",color:r.input.color})),ue=(r=>(r.RGB="rgb",r.HSL="hsl",r.HEX="hex",r))(ue||{}),q=Object.values(ue),We=/\(([0-9]+),\s*([0-9]+)%?,\s*([0-9]+)%?,?\s*([0-9.]+)?\)/,Ae=/^\s*rgba?\(([0-9]+),\s*([0-9]+),\s*([0-9]+),?\s*([0-9.]+)?\)\s*$/i,Ue=/^\s*hsla?\(([0-9]+),\s*([0-9]+)%,\s*([0-9]+)%,?\s*([0-9.]+)?\)\s*$/i,T=/^\s*#?([0-9a-f]{3}|[0-9a-f]{6})\s*$/i,Ye=/^\s*#?([0-9a-f]{3})\s*$/i,Je={hex:Re,rgb:Pe,hsl:Ie},R={hex:"transparent",rgb:"rgba(0, 0, 0, 0)",hsl:"hsla(0, 0%, 0%, 0)"},ie=r=>{let l=r?.match(We);if(!l)return[0,0,0,1];let[,s,h,u,d=1]=l;return[s,h,u,d].map(Number)},Qe=r=>{let[l,s,h,u]=ie(r),[d,e,n]=_.default.rgb.hsl([l,s,h])||[0,0,0];return{valid:!0,value:r,keyword:_.default.rgb.keyword([l,s,h]),colorSpace:"rgb",rgb:r,hsl:`hsla(${d}, ${e}%, ${n}%, ${u})`,hex:`#${_.default.rgb.hex([l,s,h]).toLowerCase()}`}},Ze=r=>{let[l,s,h,u]=ie(r),[d,e,n]=_.default.hsl.rgb([l,s,h])||[0,0,0];return{valid:!0,value:r,keyword:_.default.hsl.keyword([l,s,h]),colorSpace:"hsl",rgb:`rgba(${d}, ${e}, ${n}, ${u})`,hsl:r,hex:`#${_.default.hsl.hex([l,s,h]).toLowerCase()}`}},er=r=>{let l=r.replace("#",""),s=_.default.keyword.rgb(l)||_.default.hex.rgb(l),h=_.default.rgb.hsl(s),u=r;/[^#a-f0-9]/i.test(r)?u=l:T.test(r)&&(u=`#${l}`);let d=!0;if(u.startsWith("#"))d=T.test(u);else try{_.default.keyword.hex(u)}catch{d=!1}return{valid:d,value:u,keyword:_.default.rgb.keyword(s),colorSpace:"hex",rgb:`rgba(${s[0]}, ${s[1]}, ${s[2]}, 1)`,hsl:`hsla(${h[0]}, ${h[1]}%, ${h[2]}%, 1)`,hex:u}},C=r=>{if(r)return Ae.test(r)?Qe(r):Ue.test(r)?Ze(r):er(r)},rr=(r,l,s)=>{if(!r||!l?.valid)return R[s];if(s!=="hex")return l?.[s]||R[s];if(!l.hex.startsWith("#"))try{return`#${_.default.keyword.hex(l.hex)}`}catch{return R.hex}let h=l.hex.match(Ye);if(!h)return T.test(l.hex)?l.hex:R.hex;let[u,d,e]=h[1].split("");return`#${u}${u}${d}${d}${e}${e}`},tr=(r,l)=>{let[s,h]=p.useState(r||""),[u,d]=p.useState(()=>C(s)),[e,n]=p.useState(u?.colorSpace||"hex");p.useEffect(()=>{let i=r||"",c=C(i);h(i),d(c),n(c?.colorSpace||"hex")},[r]);let t=p.useMemo(()=>rr(s,u,e).toLowerCase(),[s,u,e]),a=p.useCallback(i=>{let c=C(i),f=c?.value||i||"";h(f),f===""&&(d(void 0),l(void 0)),c&&(d(c),n(c.colorSpace),l(c.value))},[l]),o=p.useCallback(()=>{let i=(q.indexOf(e)+1)%q.length,c=q[i];n(c);let f=u?.[c]||"";h(f),l(f)},[u,e,l]);return{value:s,realValue:t,updateValue:a,color:u,colorSpace:e,cycleColorSpace:o}},H=r=>r.replace(/\s*/,"").toLowerCase(),nr=(r,l,s)=>{let[h,u]=p.useState(l?.valid?[l]:[]);p.useEffect(()=>{l===void 0&&u([])},[l]);let d=p.useMemo(()=>(r||[]).map(n=>typeof n=="string"?C(n):n.title?{...C(n.color),keyword:n.title}:C(n.color)).concat(h).filter(Boolean).slice(-27),[r,h]),e=p.useCallback(n=>{n?.valid&&(d.some(t=>t&&t[s]&&H(t[s]||"")===H(n[s]||""))||u(t=>t.concat(n)))},[s,d]);return{presets:d,addPreset:e}},ar=({name:r,value:l,onChange:s,onFocus:h,onBlur:u,presetColors:d,startOpen:e=!1,argType:n})=>{let t=p.useCallback(ce(s,200),[s]),{value:a,realValue:o,updateValue:i,color:c,colorSpace:f,cycleColorSpace:g}=tr(l,t),{presets:b,addPreset:y}=nr(d??[],c,f),m=Je[f],k=!!n?.table?.readonly;return v.createElement(Le,{"aria-readonly":k},v.createElement(Be,{startOpen:e,trigger:k?null:void 0,closeOnOutsideClick:!0,onVisibleChange:()=>c&&y(c),tooltip:v.createElement(Ke,null,v.createElement(m,{color:o==="transparent"?"#000000":o,onChange:i,onFocus:h,onBlur:u}),b.length>0&&v.createElement(Xe,null,b.map((x,N)=>v.createElement(U,{key:`${x?.value||N}-${N}`,hasChrome:!1,tooltip:v.createElement(Te,{note:x?.keyword||x?.value||""})},v.createElement(A,{value:x?.[f]||"",active:!!(c&&x&&x[f]&&H(x[f]||"")===H(c[f])),onClick:()=>x&&i(x.value||"")})))))},v.createElement(A,{value:o,style:{margin:4}})),v.createElement(Ge,{id:he(r),value:a,onChange:x=>i(x.target.value),onFocus:x=>x.target.select(),readOnly:k,placeholder:"Choose color..."}),a?v.createElement(Fe,{onClick:g}):null)},sr=ar;export{ar as ColorControl,sr as default};

package/dist-storybook/assets/DocsRenderer-PQXLIZUC-D8kbgtPd.js

@@ -0,0 +1,2 @@
+const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["./index-7xlKHfV2.js","./iframe-CLEfhyJc.js","./preload-helper-PPVm8Dsz.js","./iframe-yMKl6hJA.css"])))=>i.map(i=>d[i]);
+import{_ as i}from"./preload-helper-PPVm8Dsz.js";import{e as t,r as p}from"./iframe-CLEfhyJc.js";import{renderElement as l,unmountElement as u}from"./react-18-4mLDkQmf.js";import{H as d,A as h,C as E,D as x}from"./blocks-CpOj9FQ_.js";import"./index-CaMbLGUB.js";var D={code:E,a:h,...d},_=class extends p.Component{constructor(){super(...arguments),this.state={hasError:!1}}static getDerivedStateFromError(){return{hasError:!0}}componentDidCatch(e){let{showException:r}=this.props;r(e)}render(){let{hasError:e}=this.state,{children:r}=this.props;return e?null:t.createElement(t.Fragment,null,r)}},y=class{constructor(){this.render=async(e,r,n)=>{let s={...D,...r?.components},a=x;return new Promise((m,c)=>{i(async()=>{const{MDXProvider:o}=await import("./index-7xlKHfV2.js");return{MDXProvider:o}},__vite__mapDeps([0,1,2,3]),import.meta.url).then(({MDXProvider:o})=>l(t.createElement(_,{showException:c,key:Math.random()},t.createElement(o,{components:s},t.createElement(a,{context:e,docsParameter:r}))),n)).then(()=>m())})},this.unmount=e=>{u(e)}}};export{y as DocsRenderer,D as defaultComponents};

package/dist-storybook/assets/GETTING_STARTED-Bf6ENjZo.js

@@ -0,0 +1,77 @@
+import{j as n}from"./iframe-CLEfhyJc.js";import{useMDXComponents as c}from"./index-7xlKHfV2.js";import{b as a}from"./blocks-CpOj9FQ_.js";import"./preload-helper-PPVm8Dsz.js";import"./index-CaMbLGUB.js";function t(e){const i={code:"code",h1:"h1",h2:"h2",h3:"h3",p:"p",pre:"pre",strong:"strong",...c(),...e.components};return n.jsxs(n.Fragment,{children:[`
+`,`
+`,n.jsx(a,{title:"Getting Started",parameters:{options:{nav:{icon:""}}}}),`
+`,n.jsx(i.h1,{id:"getting-started-với-v-miniappui-react",children:"Getting Started với @v-miniapp/ui-react"}),`
+`,n.jsxs(i.p,{children:[n.jsx(i.strong,{children:"@v-miniapp/ui-react"})," là bộ thư viện component React mạnh mẽ được thiết kế đặc biệt cho việc phát triển V-MiniApp."]}),`
+`,n.jsx(i.h2,{id:"cài-đặt",children:"Cài đặt"}),`
+`,n.jsx(i.pre,{children:n.jsx(i.code,{className:"language-bash",children:`npm install @v-miniapp/ui-react
+# hoặc
+pnpm add @v-miniapp/ui-react
+# hoặc
+yarn add @v-miniapp/ui-react
+`})}),`
+`,n.jsx(i.h2,{id:"import-styles",children:"Import Styles"}),`
+`,n.jsx(i.h3,{id:"option-1-sử-dụng-css-chuẩn",children:"Option 1: Sử dụng CSS chuẩn"}),`
+`,n.jsx(i.p,{children:"Đảm bảo bạn import CSS từ phía component để UI hoạt động tốt nhất:"}),`
+`,n.jsx(i.pre,{children:n.jsx(i.code,{className:"language-tsx",children:`import '@v-miniapp/ui-react/styles.css'
+`})}),`
+`,n.jsx(i.h3,{id:"option-2-tích-hợp-với-tailwind-css",children:"Option 2: Tích hợp với Tailwind CSS"}),`
+`,n.jsx(i.p,{children:"Nếu mini app của bạn đang sử dụng Tailwind CSS, bạn có thể tích hợp dễ dàng bằng cách thêm một dòng import vào file Tailwind config:"}),`
+`,n.jsx(i.pre,{children:n.jsx(i.code,{className:"language-css",children:`/* tailwind.css hoặc file CSS chính của bạn */
+@import '@v-miniapp/ui-react/tailwind';
+`})}),`
+`,n.jsxs(i.p,{children:[n.jsx(i.strong,{children:"Lưu ý:"})," Khi tích hợp với Tailwind, bạn không cần import ",n.jsx(i.code,{children:"@v-miniapp/ui-react/styles.css"})," nữa."]}),`
+`,n.jsx(i.h2,{id:"ví-dụ-bắt-đầu-sử-dụng",children:"Ví dụ bắt đầu sử dụng"}),`
+`,n.jsx(i.pre,{children:n.jsx(i.code,{className:"language-tsx",children:`import { App, type IAppConfig } from '@v-miniapp/ui-react'
+
+// Tạo các page components
+const HomePage = () => {
+  return <div>Trang chủ</div>
+}
+
+const SettingsPage = () => {
+  return <div>Cài đặt</div>
+}
+
+const appConfig: IAppConfig = {
+  // Animation giữa các pages: 'none', 'slide_up', 'slide_left', 'fade_in'
+  animation: {
+    type: 'slide_left',
+  },
+  // Keep-alive: giữ state của pages khi navigate
+  keepAlive: {
+    enable: true,
+  },
+  
+  pages: [
+    {
+      pathname: '/home',
+      Component: HomePage,
+      navigationBar: {
+        title: 'Trang chủ',
+      },
+    },
+    {
+      pathname: '/settings',
+      Component: SettingsPage,
+      navigationBar: {
+        title: 'Cài đặt',
+      },
+    },
+  ],
+}
+
+export const MiniApp: FC = () => {
+  return <App config={appConfig} />
+}
+`})}),`
+`,n.jsx(i.h2,{id:"️-lưu-ý-quan-trọng",children:"⚠️ Lưu ý quan trọng"}),`
+`,n.jsxs(i.p,{children:["Khi sử dụng component ",n.jsx(i.code,{children:"App"})," từ ",n.jsx(i.code,{children:"@v-miniapp/ui-react"}),", bạn đã có sẵn ",n.jsx(i.code,{children:"NavigationBar"})," component được quản lý bởi SDK. Nếu bạn cấu hình ",n.jsx(i.code,{children:"window"})," trong ",n.jsx(i.code,{children:"app-config.json"})," để hiển thị title bar/navigation bar từ native, sẽ có thể bị trùng lặp với component của ",n.jsx(i.code,{children:"ui-react"}),"."]}),`
+`,n.jsxs(i.p,{children:[n.jsx(i.strong,{children:"Giải pháp:"})," Nếu bạn sử dụng ",n.jsx(i.code,{children:"NavigationBar"})," từ ",n.jsx(i.code,{children:"@v-miniapp/ui-react"}),", bạn nên cấu hình trong ",n.jsx(i.code,{children:"app-config.json"})," để ẩn native title bar:"]}),`
+`,n.jsx(i.pre,{children:n.jsx(i.code,{className:"language-json",children:`{
+  "window": {
+    "defaultTitle": "",
+    "transparentTitle": "always"
+  }
+}
+`})})]})}function h(e={}){const{wrapper:i}={...c(),...e.components};return i?n.jsx(i,{...e,children:n.jsx(t,{...e})}):t(e)}export{h as default};

package/dist-storybook/assets/INFINITE_SCROLL-O36i5W8i.js

@@ -0,0 +1,111 @@
+import{j as n}from"./iframe-CLEfhyJc.js";import{useMDXComponents as i}from"./index-7xlKHfV2.js";import{b as o}from"./blocks-CpOj9FQ_.js";import"./preload-helper-PPVm8Dsz.js";import"./index-CaMbLGUB.js";function s(t){const e={code:"code",h1:"h1",h2:"h2",h3:"h3",li:"li",p:"p",pre:"pre",ul:"ul",...i(),...t.components};return n.jsxs(n.Fragment,{children:[`
+`,`
+`,n.jsx(o,{title:"Use Cases/Infinite Scroll"}),`
+`,n.jsx(e.h1,{id:"infinite-scroll--load-more",children:"Infinite Scroll / Load More"}),`
+`,n.jsx(e.p,{children:"Infinite scroll cho phép tự động load thêm data khi user scroll đến cuối danh sách."}),`
+`,n.jsx(e.h2,{id:"cách-sử-dụng",children:"Cách sử dụng"}),`
+`,n.jsxs(e.h3,{id:"sử-dụng-hook-useloadmore",children:["Sử dụng Hook ",n.jsx(e.code,{children:"useLoadMore"})]}),`
+`,n.jsx(e.pre,{children:n.jsx(e.code,{className:"language-tsx",children:`import { useLoadMore } from '@v-miniapp/ui-react'
+import { useState } from 'react'
+
+const ListPage: FC = () => {
+  const [items, setItems] = useState([...initialItems])
+  const [loading, setLoading] = useState(false)
+  const [hasMore, setHasMore] = useState(true)
+
+  const loadMore = async () => {
+    if (loading || !hasMore) return
+
+    setLoading(true)
+    try {
+      const newItems = await fetchMoreItems()
+      if (newItems.length === 0) {
+        setHasMore(false)
+      } else {
+        setItems([...items, ...newItems])
+      }
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  useLoadMore(loadMore)
+
+  return (
+    <div>
+      {items.map(item => (
+        <Item key={item.id} data={item} />
+      ))}
+      {loading && <LoadingSpinner />}
+      {!hasMore && <div>Đã hết dữ liệu</div>}
+    </div>
+  )
+}
+`})}),`
+`,n.jsx(e.h3,{id:"sử-dụng-page-layout-config",children:"Sử dụng Page Layout Config"}),`
+`,n.jsx(e.pre,{children:n.jsx(e.code,{className:"language-tsx",children:`const appConfig: IAppConfig = {
+  pages: [
+    {
+      pathname: '/list',
+      Component: ListPage,
+      pageLayout: {
+        onEndReached: async () => {
+          await loadMore()
+        },
+        onEndReachedThreshold: 100, // Trigger khi còn 100px từ bottom
+      },
+    },
+  ],
+}
+`})}),`
+`,n.jsx(e.h2,{id:"cách-hoạt-động",children:"Cách hoạt động"}),`
+`,n.jsxs(e.ul,{children:[`
+`,n.jsxs(e.li,{children:["Sử dụng ",n.jsx(e.code,{children:"VisibilitySensor"})," để detect khi scroll đến cuối page"]}),`
+`,n.jsxs(e.li,{children:["Tự động trigger ",n.jsx(e.code,{children:"onEndReached"})," khi sensor trở nên visible"]}),`
+`,n.jsxs(e.li,{children:[n.jsx(e.code,{children:"onEndReachedThreshold"})," xác định khoảng cách từ bottom để trigger (mặc định: 50px)"]}),`
+`]}),`
+`,n.jsx(e.h2,{id:"lưu-ý",children:"Lưu ý"}),`
+`,n.jsxs(e.ul,{children:[`
+`,n.jsxs(e.li,{children:[n.jsx(e.code,{children:"onEndReached"})," có thể được gọi nhiều lần, nên cần implement debounce/throttle hoặc flag để tránh duplicate requests"]}),`
+`,n.jsx(e.li,{children:"Nên hiển thị loading indicator khi đang fetch data"}),`
+`,n.jsxs(e.li,{children:["Nên check ",n.jsx(e.code,{children:"hasMore"})," để tránh fetch khi đã hết data"]}),`
+`]}),`
+`,n.jsx(e.h2,{id:"kết-hợp-với-pull-to-refresh",children:"Kết hợp với Pull to Refresh"}),`
+`,n.jsx(e.p,{children:"Bạn có thể kết hợp cả pull-to-refresh và load more trong cùng một page:"}),`
+`,n.jsx(e.pre,{children:n.jsx(e.code,{className:"language-tsx",children:`import { usePullToRefresh, useLoadMore } from '@v-miniapp/ui-react'
+import { useState } from 'react'
+
+const ListPage: FC = () => {
+  const [items, setItems] = useState([...initialItems])
+  const [loading, setLoading] = useState(false)
+
+  // Pull to refresh
+  const handleRefresh = async () => {
+    const newItems = await fetchInitialItems()
+    setItems(newItems)
+  }
+  usePullToRefresh(handleRefresh)
+
+  // Load more
+  const loadMore = async () => {
+    if (loading) return
+    setLoading(true)
+    try {
+      const newItems = await fetchMoreItems()
+      setItems([...items, ...newItems])
+    } finally {
+      setLoading(false)
+    }
+  }
+  useLoadMore(loadMore)
+
+  return (
+    <div>
+      {items.map(item => (
+        <Item key={item.id} data={item} />
+      ))}
+      {loading && <LoadingSpinner />}
+    </div>
+  )
+}
+`})})]})}function h(t={}){const{wrapper:e}={...i(),...t.components};return e?n.jsx(e,{...t,children:n.jsx(s,{...t})}):s(t)}export{h as default};

package/dist-storybook/assets/KEEP_ALIVE-CicDtVw6.js

@@ -0,0 +1,126 @@
+import{j as e}from"./iframe-CLEfhyJc.js";import{useMDXComponents as a}from"./index-7xlKHfV2.js";import{b as l,M as t}from"./blocks-CpOj9FQ_.js";import"./preload-helper-PPVm8Dsz.js";import"./index-CaMbLGUB.js";function r(i){const n={code:"code",h1:"h1",h2:"h2",h3:"h3",li:"li",ol:"ol",p:"p",pre:"pre",strong:"strong",ul:"ul",...a(),...i.components};return e.jsxs(e.Fragment,{children:[`
+`,`
+`,e.jsx(l,{title:"App Framework/Keep Alive"}),`
+`,e.jsx(n.h1,{id:"keep-alive",children:"Keep Alive"}),`
+`,e.jsx(n.p,{children:"Keep Alive cho phép giữ các pages trong DOM (ẩn) thay vì unmount khi navigate, giúp giữ state và scroll position."}),`
+`,e.jsx(n.h2,{id:"cấu-trúc",children:"Cấu trúc"}),`
+`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-typescript",children:`type IAppKeepAliveState = {
+  enable?: boolean
+  maxStack?: number
+  freeze?: boolean
+  freezeDelay?: number
+}
+
+// Page-level có thể override bằng boolean hoặc config object
+type IPageState = {
+  keepAlive?: boolean | IAppKeepAliveState
+  freeze?: boolean
+  freezeDelay?: number
+}
+`})}),`
+`,e.jsx(n.h2,{id:"thuộc-tính",children:"Thuộc tính"}),`
+`,e.jsx(t,{children:"\n| Thuộc tính | Kiểu dữ liệu | Mặc định | Mô tả |\n| :--- | :--- | :--- | :--- |\n| `enable` | `boolean` | `true` | Bật/tắt keep-alive |\n| `maxStack` | `number` | `5` | Số lượng pages tối đa được giữ trong DOM |\n| `freeze` | `boolean` | `true` | Bật/tắt freeze (ngăn re-render cho pages không hiển thị) |\n| `freezeDelay` | `number` | `3000` | Delay (ms) trước khi freeze page sau khi navigate đi |\n"}),`
+`,e.jsx(n.h2,{id:"cách-hoạt-động",children:"Cách hoạt động"}),`
+`,e.jsxs(n.ol,{children:[`
+`,e.jsxs(n.li,{children:[e.jsx(n.strong,{children:"Khi navigate đi"}),": Page được ẩn (",e.jsx(n.code,{children:"display: none"}),") nhưng vẫn trong DOM"]}),`
+`,e.jsxs(n.li,{children:[e.jsx(n.strong,{children:"Khi navigate đến"}),": Page được hiển thị (",e.jsx(n.code,{children:"display: block"}),")"]}),`
+`,e.jsxs(n.li,{children:[e.jsx(n.strong,{children:"Freeze"}),": Các pages không hiển thị được freeze bằng ",e.jsx(n.code,{children:"Freeze"})," component để tránh re-render. Freeze được áp dụng sau ",e.jsx(n.code,{children:"freezeDelay"})," (mặc định: 3000ms) để cho phép animation hoàn thành."]}),`
+`,e.jsxs(n.li,{children:[e.jsx(n.strong,{children:"Giới hạn"}),": Chỉ giữ tối đa ",e.jsx(n.code,{children:"maxStack"})," pages trong DOM"]}),`
+`]}),`
+`,e.jsx(n.h2,{id:"cấu-hình",children:"Cấu hình"}),`
+`,e.jsx(n.h3,{id:"app-level-config",children:"App-level Config"}),`
+`,e.jsx(n.p,{children:"Cấu hình keep-alive mặc định cho tất cả pages:"}),`
+`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-tsx",children:`const appConfig: IAppConfig = {
+  keepAlive: {
+    enable: true,      // Bật keep-alive
+    maxStack: 5,       // Giữ tối đa 5 pages
+    freeze: true,      // Bật freeze để tránh re-render
+    freezeDelay: 3000, // Freeze sau 3 giây
+  },
+  pages: [
+    // Tất cả pages sẽ được keep-alive
+  ],
+}
+`})}),`
+`,e.jsx(n.h3,{id:"page-level-config",children:"Page-level Config"}),`
+`,e.jsx(n.p,{children:"Override keep-alive cho từng page cụ thể:"}),`
+`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-tsx",children:`const appConfig: IAppConfig = {
+  keepAlive: {
+    enable: true,
+    maxStack: 5,
+  },
+  pages: [
+    {
+      pathname: '/home',
+      Component: HomePage,
+      // Page này dùng app-level config (keep-alive enabled)
+    },
+    {
+      pathname: '/login',
+      Component: LoginPage,
+      // Tắt keep-alive cho page này
+      keepAlive: false,
+    },
+    {
+      pathname: '/detail',
+      Component: DetailPage,
+      // Override config cho page này
+      keepAlive: {
+        enable: true,
+        maxStack: 3, // Giữ ít hơn pages khác
+      },
+      // Tắt freeze cho page này (vẫn keep-alive nhưng không freeze)
+      freeze: false,
+    },
+    {
+      pathname: '/video',
+      Component: VideoPage,
+      keepAlive: true,
+      // Freeze ngay lập tức (không delay)
+      freeze: true,
+      freezeDelay: 0,
+    },
+  ],
+}
+`})}),`
+`,e.jsx(n.h2,{id:"lợi-ích",children:"Lợi ích"}),`
+`,e.jsxs(n.ul,{children:[`
+`,e.jsxs(n.li,{children:[e.jsx(n.strong,{children:"Giữ state"}),": Component state không bị mất khi navigate"]}),`
+`,e.jsxs(n.li,{children:[e.jsx(n.strong,{children:"Giữ scroll position"}),": Scroll position được giữ nguyên (kết hợp với ",e.jsx(n.code,{children:"scrollRestoration"}),")"]}),`
+`,e.jsxs(n.li,{children:[e.jsx(n.strong,{children:"Form data"}),": Form data không bị mất khi navigate back"]}),`
+`,e.jsxs(n.li,{children:[e.jsx(n.strong,{children:"Performance"}),": Không cần re-render khi navigate back/forward"]}),`
+`]}),`
+`,e.jsx(n.h2,{id:"lưu-ý",children:"Lưu ý"}),`
+`,e.jsxs(n.ul,{children:[`
+`,e.jsx(n.li,{children:"Pages được giữ trong DOM nên vẫn tốn memory"}),`
+`,e.jsxs(n.li,{children:[e.jsx(n.code,{children:"maxStack"})," giới hạn số pages để tránh tốn quá nhiều memory"]}),`
+`,e.jsx(n.li,{children:"Chỉ pages trong stack (theo thứ tự) mới được keep-alive"}),`
+`,e.jsxs(n.li,{children:["Pages ngoài ",e.jsx(n.code,{children:"maxStack"})," sẽ bị unmount"]}),`
+`,e.jsxs(n.li,{children:[e.jsx(n.strong,{children:"Freeze"}),": Khi ",e.jsx(n.code,{children:"freeze: true"}),", pages không hiển thị sẽ bị freeze để tránh re-render, giúp tiết kiệm performance"]}),`
+`,e.jsxs(n.li,{children:[e.jsx(n.strong,{children:"Freeze Delay"}),": ",e.jsx(n.code,{children:"freezeDelay"})," cho phép animation hoàn thành trước khi freeze. Nếu set ",e.jsx(n.code,{children:"0"}),", page sẽ freeze ngay lập tức"]}),`
+`]}),`
+`,e.jsx(n.h2,{id:"ví-dụ",children:"Ví dụ"}),`
+`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-tsx",children:`const appConfig: IAppConfig = {
+  keepAlive: {
+    enable: true,
+    maxStack: 5,
+  },
+  pages: [
+    {
+      pathname: '/home',
+      Component: HomePage,
+      // Keep-alive enabled
+    },
+    {
+      pathname: '/list',
+      Component: ListPage,
+      // Keep-alive enabled, giữ scroll position khi back
+    },
+    {
+      pathname: '/login',
+      Component: LoginPage,
+      keepAlive: false, // Tắt keep-alive, reset mỗi lần vào
+    },
+  ],
+}
+`})})]})}function g(i={}){const{wrapper:n}={...a(),...i.components};return n?e.jsx(n,{...i,children:e.jsx(r,{...i})}):r(i)}export{g as default};