@kosdev-code/kos-ui-plugin 2.0.22 → 2.0.23

package/index.cjs

@@ -11,7 +11,7 @@
   top: 0;
   left: 0;
   z-index: 10000;
-`,w=({remotesOverride:e,children:t})=>{const[n,l]=i.useState();return i.useEffect(()=>{a.initPluginManager(e).then(r=>{l(r)})},[e]),c.jsx(h.Provider,{value:n,children:n?t:c.jsx(P,{children:"Loading remote plugins..."})})},p=()=>{const e=i.useContext(h);if(!e)throw new Error("useKosPluginsContext must be used within a KosPluginProvider");return e},j=e=>{var t;return((t=e==null?void 0:e.view)==null?void 0:t.component)!==void 0},x=({extension:e,module:t})=>{const{extensions:n}=p(),[l,r]=i.useState(null),[s,u]=i.useState(null);return i.useEffect(()=>{async function g(){const o=a.resolveBestExtension(n==null?void 0:n[e],t);u(o??null);const f=(o==null?void 0:o.remote)||"",m=j(o)?o.view.component:o==null?void 0:o.component,C=m?`./${m}`:"",y=i.lazy(()=>a.mf.loadRemoteModule(f,C));r(y)}g()},[n,t,e]),[l,s]},b=d.div`
+`,w=({remotesOverride:e,children:t})=>{const[n,l]=i.useState();return i.useEffect(()=>{a.initPluginManager(e).then(r=>{l(r)})},[e]),c.jsx(h.Provider,{value:n,children:n?t:c.jsx(P,{children:"Loading remote plugins..."})})},x=()=>{const e=i.useContext(h);if(!e)throw new Error("useKosPluginsContext must be used within a KosPluginProvider");return e},j=e=>{var t;return((t=e==null?void 0:e.view)==null?void 0:t.component)!==void 0},f=({extension:e,module:t})=>{const{extensions:n}=x(),[l,r]=i.useState(null),[s,u]=i.useState(null);return i.useEffect(()=>{async function g(){const o=a.resolveBestExtension(n==null?void 0:n[e],t);u(o??null);const m=(o==null?void 0:o.remote)||"",p=j(o)?o.view.component:o==null?void 0:o.component,C=p?`./${p}`:"";if(!m)return;const y=i.lazy(()=>a.mf.loadRemoteModule(m,C));r(y)}g()},[n,t,e]),[l,s]},b=d.div`
   align-items: center;
   display: flex;
   height: 100%;
@@ -25,5 +25,5 @@
   height: ${e=>e.height};
   justify-content: center;
   width: ${e=>e.width};
-`,k=({extension:e,fallback:t,module:n,props:l})=>{const[r,s]=x({extension:e,module:n});if(!r)return null;const u=t||c.jsx(b,{children:`Dynamic component, ${e}, not found...`});return c.jsx(v.ErrorBoundaryWithFallback,{fallback:u,children:c.jsx(i.Suspense,{fallback:s!=null&&s.size?c.jsx(S,{width:s.size.width,height:s.size.height}):null,children:c.jsx(r,{...l})})})};exports.DynamicComponent=k;exports.KosPluginProvider=w;exports.RemotesContext=h;exports.useDynamicComponent=x;exports.useKosPluginsContext=p;
+`,k=({extension:e,fallback:t,module:n,props:l})=>{const[r,s]=f({extension:e,module:n});if(!r)return null;const u=t||c.jsx(b,{children:`Dynamic component, ${e}, not found...`});return c.jsx(v.ErrorBoundaryWithFallback,{fallback:u,children:c.jsx(i.Suspense,{fallback:s!=null&&s.size?c.jsx(S,{width:s.size.width,height:s.size.height}):null,children:c.jsx(r,{...l})})})};exports.DynamicComponent=k;exports.KosPluginProvider=w;exports.RemotesContext=h;exports.useDynamicComponent=f;exports.useKosPluginsContext=x;
 //# sourceMappingURL=index.cjs.map

package/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../../packages/sdk/kos-ui-plugin/src/lib/contexts/plugins-provider/plugins-provider.tsx","../../../../packages/sdk/kos-ui-plugin/src/lib/hooks/use-dynamic-component.tsx","../../../../packages/sdk/kos-ui-plugin/src/lib/components/dynamic-component/dynamic-component.tsx"],"sourcesContent":["/**\n *\n *\n * @module remotes-provider\n * @description Provides a context for managing dynamic remotes and extensions in a React application.\n */\n\nimport styled from \"@emotion/styled\";\nimport {\n  PropsWithChildren,\n  createContext,\n  useContext,\n  useEffect,\n  useState,\n} from \"react\";\nimport type { DynamicRemotes } from \"../../../types/global\";\nimport type { PluginExtension } from \"../../../types/plugins\";\nimport { initPluginManager } from \"../../utils/plugin-extension-manager\";\n\ninterface PluginsType {\n  remotes?: DynamicRemotes;\n  extensions?: PluginExtensionsType;\n  extensionPoints?: Record<string, PluginExtension[]>;\n  getExtensions: (extensionPointId: string) => PluginExtension[];\n}\n\nexport interface PluginExtensionsType {\n  [k: string]: {\n    [k: string]: PluginExtension;\n  };\n}\n\n/**\n * The context for managing dynamic remotes and extensions.\n */\nexport const RemotesContext = createContext<PluginsType | undefined>(undefined);\n\ninterface Props {\n  remotesOverride?: DynamicRemotes;\n}\n\nconst MessageContainer = styled.div`\n  padding-inline: 20px;\n  width: 100%;\n  height: 100vh;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  position: fixed;\n  font-size: 14px;\n  top: 0;\n  left: 0;\n  z-index: 10000;\n`;\n/**\n * The provider component for the RemotesContext.\n */\nexport const KosPluginProvider: React.FunctionComponent<\n  PropsWithChildren<Props>\n> = ({ remotesOverride, children }) => {\n  const [contextValue, setContextValue] = useState<PluginsType | undefined>();\n\n  useEffect(() => {\n    initPluginManager(remotesOverride).then((value) => {\n      setContextValue(value);\n    });\n  }, [remotesOverride]);\n\n  return (\n    <RemotesContext.Provider value={contextValue}>\n      {contextValue ? (\n        children\n      ) : (\n        <MessageContainer>Loading remote plugins...</MessageContainer>\n      )}\n    </RemotesContext.Provider>\n  );\n};\n\n/**\n * Custom hook for accessing the RemotesContext.\n */\nexport const useKosPluginsContext = () => {\n  const context = useContext(RemotesContext);\n  if (!context) {\n    throw new Error(\n      \"useKosPluginsContext must be used within a KosPluginProvider\"\n    );\n  }\n  return context;\n};\n","import { loadRemoteModule } from \"@nx/react/mf\";\n\nimport React, { useEffect, useState } from \"react\";\nimport type {\n  BasePluginExtension,\n  BaseViewPluginExtension,\n} from \"../../types/plugins\";\nimport { useKosPluginsContext } from \"../contexts\";\nimport { resolveBestExtension } from \"../utils/resolve-best-extension\";\n\ninterface Props {\n  /**\n   * The extension point ID to resolve plugin modules from.\n   * Example: \"ddk.ncui.settings.tabView\"\n   */\n  extension: string;\n\n  /**\n   * Optional module ID to load a specific plugin.\n   * If not provided, the plugin with the **lowest rank** for the extension point is used.\n   */\n  module?: string;\n}\n\ntype DynamicComponentResult = [\n  React.FunctionComponent | null,\n  BasePluginExtension | null\n];\n\n/**\n * Determines whether a plugin extension follows the \"view\" structure.\n * This allows resolving the correct field (`view.component` vs `component`) when loading.\n */\nconst isViewPlugin = (module: any): module is BaseViewPluginExtension =>\n  module?.view?.component !== undefined;\n\n/**\n * React hook to resolve and lazily load a plugin component for a given extension point.\n *\n * - If `module` is provided, it directly loads that plugin.\n * - If `module` is not provided, it uses the **lowest-ranked plugin** from the extension point.\n * - Supports both standard plugins (`component`) and view-style plugins (`view.component`)\n * - Uses React.lazy + Module Federation to dynamically import the remote component.\n *\n * @param props.extension The extension point to resolve plugins from\n * @param props.module (Optional) Specific module ID to use, otherwise the highest-priority plugin is loaded\n * @returns A tuple: `[Component, PluginExtension]`\n */\nexport const useDynamicComponent = ({\n  extension,\n  module,\n}: Props): DynamicComponentResult => {\n  const { extensions } = useKosPluginsContext();\n\n  const [Component, setComponent] = useState<React.FunctionComponent | null>(\n    null\n  );\n  const [extensionPoint, setExtensionPoint] =\n    useState<BasePluginExtension | null>(null);\n\n  useEffect(() => {\n    async function loadComponent() {\n      // Determine which plugin to use\n\n      const _module = resolveBestExtension(extensions?.[extension], module);\n\n      setExtensionPoint(_module ?? null);\n\n      const remote = _module?.remote || \"\";\n\n      // Resolve the component path for the module\n      const componentName = isViewPlugin(_module)\n        ? _module.view.component\n        : _module?.component;\n\n      const componentPath = componentName ? `./${componentName}` : \"\";\n\n      // Load the component using Module Federation\n      const Comp = React.lazy(() => loadRemoteModule(remote, componentPath));\n      setComponent(Comp);\n    }\n\n    loadComponent();\n  }, [extensions, module, extension]);\n\n  return [Component, extensionPoint];\n};\n","import styled from \"@emotion/styled\";\nimport { ErrorBoundaryWithFallback } from \"@kosdev-code/kos-ui-sdk\";\nimport React, { Suspense } from \"react\";\nimport { useDynamicComponent } from \"../../hooks\";\n\nconst NotFound = styled.div`\n  align-items: center;\n  display: flex;\n  height: 100%;\n  justify-content: center;\n  width: 100%;\n`;\ninterface Props {\n  extension: string;\n  fallback?: React.ReactNode;\n  module?: string;\n  props?: any;\n}\n\nconst Skeleton = styled.div<{ width: string; height: string }>`\n  align-items: center;\n  background-color: transparent;\n  display: flex;\n  flex-direction: column;\n  height: ${(props) => props.height};\n  justify-content: center;\n  width: ${(props) => props.width};\n`;\n\nexport const DynamicComponent: React.FunctionComponent<Props> = ({\n  extension,\n  fallback,\n  module,\n  props,\n}) => {\n  // get the list of extensions from the context\n  const [Component, extensionPoint] = useDynamicComponent({\n    extension,\n    module,\n  });\n  // get the module from the extension\n\n  if (!Component) {\n    return null;\n  }\n\n  const fb = fallback || (\n    <NotFound>{`Dynamic component, ${extension}, not found...`}</NotFound>\n  );\n\n  return (\n    <ErrorBoundaryWithFallback fallback={fb}>\n      <Suspense\n        fallback={\n          extensionPoint?.size ? (\n            <Skeleton\n              width={extensionPoint.size.width}\n              height={extensionPoint.size.height}\n            />\n          ) : null\n        }\n      >\n        <Component {...props} />\n      </Suspense>\n    </ErrorBoundaryWithFallback>\n  );\n};\n"],"names":["RemotesContext","createContext","MessageContainer","styled","KosPluginProvider","remotesOverride","children","contextValue","setContextValue","useState","useEffect","initPluginManager","value","jsx","useKosPluginsContext","context","useContext","isViewPlugin","module","_a","useDynamicComponent","extension","extensions","Component","setComponent","extensionPoint","setExtensionPoint","loadComponent","_module","resolveBestExtension","remote","componentName","componentPath","Comp","React","loadRemoteModule","NotFound","Skeleton","props","DynamicComponent","fallback","fb","ErrorBoundaryWithFallback","Suspense"],"mappings":"6TAmCa,MAAAA,EAAiBC,EAAAA,cAAuC,MAAS,EAMxEC,EAAmBC,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAiBnBC,EAET,CAAC,CAAE,gBAAAC,EAAiB,SAAAC,KAAe,CACrC,KAAM,CAACC,EAAcC,CAAe,EAAIC,EAAkC,SAAA,EAE1EC,OAAAA,EAAAA,UAAU,IAAM,CACdC,EAAAA,kBAAkBN,CAAe,EAAE,KAAMO,GAAU,CACjDJ,EAAgBI,CAAK,CAAA,CACtB,CAAA,EACA,CAACP,CAAe,CAAC,EAGlBQ,EAAAA,IAACb,EAAe,SAAf,CAAwB,MAAOO,EAC7B,SAAAA,EACCD,EAEAO,EAAAA,IAACX,EAAiB,CAAA,SAAA,2BAAA,CAAyB,CAE/C,CAAA,CAEJ,EAKaY,EAAuB,IAAM,CAClC,MAAAC,EAAUC,aAAWhB,CAAc,EACzC,GAAI,CAACe,EACH,MAAM,IAAI,MACR,8DAAA,EAGG,OAAAA,CACT,EC1DME,EAAgBC,GACpB,OAAA,QAAAC,EAAAD,GAAA,YAAAA,EAAQ,OAAR,YAAAC,EAAc,aAAc,QAcjBC,EAAsB,CAAC,CAClC,UAAAC,EACA,OAAAH,CACF,IAAqC,CAC7B,KAAA,CAAE,WAAAI,GAAeR,IAEjB,CAACS,EAAWC,CAAY,EAAIf,EAAA,SAChC,IAAA,EAEI,CAACgB,EAAgBC,CAAiB,EACtCjB,WAAqC,IAAI,EAE3CC,OAAAA,EAAAA,UAAU,IAAM,CACd,eAAeiB,GAAgB,CAG7B,MAAMC,EAAUC,EAAAA,qBAAqBP,GAAA,YAAAA,EAAaD,GAAYH,CAAM,EAEpEQ,EAAkBE,GAAW,IAAI,EAE3B,MAAAE,GAASF,GAAA,YAAAA,EAAS,SAAU,GAG5BG,EAAgBd,EAAaW,CAAO,EACtCA,EAAQ,KAAK,UACbA,GAAA,YAAAA,EAAS,UAEPI,EAAgBD,EAAgB,KAAKA,CAAa,GAAK,GAGvDE,EAAOC,EAAM,KAAK,IAAMC,EAAAA,GAAAA,iBAAiBL,EAAQE,CAAa,CAAC,EACrER,EAAaS,CAAI,CACnB,CAEcN,GACb,EAAA,CAACL,EAAYJ,EAAQG,CAAS,CAAC,EAE3B,CAACE,EAAWE,CAAc,CACnC,ECjFMW,EAAWjC,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAclBkC,EAAWlC,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA,YAKXmC,GAAUA,EAAM,MAAM;AAAA;AAAA,WAEvBA,GAAUA,EAAM,KAAK;AAAA,EAGpBC,EAAmD,CAAC,CAC/D,UAAAlB,EACA,SAAAmB,EACA,OAAAtB,EACA,MAAAoB,CACF,IAAM,CAEJ,KAAM,CAACf,EAAWE,CAAc,EAAIL,EAAoB,CACtD,UAAAC,EACA,OAAAH,CAAA,CACD,EAGD,GAAI,CAACK,EACI,OAAA,KAGT,MAAMkB,EAAKD,GACT3B,EAAA,IAACuB,EAAU,CAAA,SAAA,sBAAsBf,CAAS,gBAAiB,CAAA,EAI3D,OAAAR,EAAAA,IAAC6B,EAAAA,0BAA0B,CAAA,SAAUD,EACnC,SAAA5B,EAAA,IAAC8B,EAAA,SAAA,CACC,SACElB,GAAA,MAAAA,EAAgB,KACdZ,EAAA,IAACwB,EAAA,CACC,MAAOZ,EAAe,KAAK,MAC3B,OAAQA,EAAe,KAAK,MAAA,CAAA,EAE5B,KAGN,SAAAZ,EAAAA,IAACU,EAAW,CAAA,GAAGe,CAAO,CAAA,CAAA,CAE1B,CAAA,CAAA,CAEJ"}
+{"version":3,"file":"index.cjs","sources":["../../../../packages/sdk/kos-ui-plugin/src/lib/contexts/plugins-provider/plugins-provider.tsx","../../../../packages/sdk/kos-ui-plugin/src/lib/hooks/use-dynamic-component.tsx","../../../../packages/sdk/kos-ui-plugin/src/lib/components/dynamic-component/dynamic-component.tsx"],"sourcesContent":["/**\n *\n *\n * @module remotes-provider\n * @description Provides a context for managing dynamic remotes and extensions in a React application.\n */\n\nimport styled from \"@emotion/styled\";\nimport {\n  PropsWithChildren,\n  createContext,\n  useContext,\n  useEffect,\n  useState,\n} from \"react\";\nimport type { DynamicRemotes } from \"../../../types/global\";\nimport type { PluginExtension } from \"../../../types/plugins\";\nimport { initPluginManager } from \"../../utils/plugin-extension-manager\";\n\ninterface PluginsType {\n  remotes?: DynamicRemotes;\n  extensions?: PluginExtensionsType;\n  extensionPoints?: Record<string, PluginExtension[]>;\n  getExtensions: (extensionPointId: string) => PluginExtension[];\n}\n\nexport interface PluginExtensionsType {\n  [k: string]: {\n    [k: string]: PluginExtension;\n  };\n}\n\n/**\n * The context for managing dynamic remotes and extensions.\n */\nexport const RemotesContext = createContext<PluginsType | undefined>(undefined);\n\ninterface Props {\n  remotesOverride?: DynamicRemotes;\n}\n\nconst MessageContainer = styled.div`\n  padding-inline: 20px;\n  width: 100%;\n  height: 100vh;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  position: fixed;\n  font-size: 14px;\n  top: 0;\n  left: 0;\n  z-index: 10000;\n`;\n/**\n * The provider component for the RemotesContext.\n */\nexport const KosPluginProvider: React.FunctionComponent<\n  PropsWithChildren<Props>\n> = ({ remotesOverride, children }) => {\n  const [contextValue, setContextValue] = useState<PluginsType | undefined>();\n\n  useEffect(() => {\n    initPluginManager(remotesOverride).then((value) => {\n      setContextValue(value);\n    });\n  }, [remotesOverride]);\n\n  return (\n    <RemotesContext.Provider value={contextValue}>\n      {contextValue ? (\n        children\n      ) : (\n        <MessageContainer>Loading remote plugins...</MessageContainer>\n      )}\n    </RemotesContext.Provider>\n  );\n};\n\n/**\n * Custom hook for accessing the RemotesContext.\n */\nexport const useKosPluginsContext = () => {\n  const context = useContext(RemotesContext);\n  if (!context) {\n    throw new Error(\n      \"useKosPluginsContext must be used within a KosPluginProvider\"\n    );\n  }\n  return context;\n};\n","import { loadRemoteModule } from \"@nx/react/mf\";\n\nimport React, { useEffect, useState } from \"react\";\nimport type {\n  BasePluginExtension,\n  BaseViewPluginExtension,\n} from \"../../types/plugins\";\nimport { useKosPluginsContext } from \"../contexts\";\nimport { resolveBestExtension } from \"../utils/resolve-best-extension\";\n\ninterface Props {\n  /**\n   * The extension point ID to resolve plugin modules from.\n   * Example: \"ddk.ncui.settings.tabView\"\n   */\n  extension: string;\n\n  /**\n   * Optional module ID to load a specific plugin.\n   * If not provided, the plugin with the **lowest rank** for the extension point is used.\n   */\n  module?: string;\n}\n\ntype DynamicComponentResult = [\n  React.FunctionComponent | null,\n  BasePluginExtension | null\n];\n\n/**\n * Determines whether a plugin extension follows the \"view\" structure.\n * This allows resolving the correct field (`view.component` vs `component`) when loading.\n */\nconst isViewPlugin = (module: any): module is BaseViewPluginExtension =>\n  module?.view?.component !== undefined;\n\n/**\n * React hook to resolve and lazily load a plugin component for a given extension point.\n *\n * - If `module` is provided, it directly loads that plugin.\n * - If `module` is not provided, it uses the **lowest-ranked plugin** from the extension point.\n * - Supports both standard plugins (`component`) and view-style plugins (`view.component`)\n * - Uses React.lazy + Module Federation to dynamically import the remote component.\n *\n * @param props.extension The extension point to resolve plugins from\n * @param props.module (Optional) Specific module ID to use, otherwise the highest-priority plugin is loaded\n * @returns A tuple: `[Component, PluginExtension]`\n */\nexport const useDynamicComponent = ({\n  extension,\n  module,\n}: Props): DynamicComponentResult => {\n  const { extensions } = useKosPluginsContext();\n\n  const [Component, setComponent] = useState<React.FunctionComponent | null>(\n    null\n  );\n  const [extensionPoint, setExtensionPoint] =\n    useState<BasePluginExtension | null>(null);\n\n  useEffect(() => {\n    async function loadComponent() {\n      // Determine which plugin to use\n\n      const _module = resolveBestExtension(extensions?.[extension], module);\n\n      setExtensionPoint(_module ?? null);\n\n      const remote = _module?.remote || \"\";\n\n      // Resolve the component path for the module\n      const componentName = isViewPlugin(_module)\n        ? _module.view.component\n        : _module?.component;\n\n      const componentPath = componentName ? `./${componentName}` : \"\";\n\n      if (!remote) return;\n\n      // Load the component using Module Federation\n      const Comp = React.lazy(() => loadRemoteModule(remote, componentPath));\n      setComponent(Comp);\n    }\n\n    loadComponent();\n  }, [extensions, module, extension]);\n\n  return [Component, extensionPoint];\n};\n","import styled from \"@emotion/styled\";\nimport { ErrorBoundaryWithFallback } from \"@kosdev-code/kos-ui-sdk\";\nimport React, { Suspense } from \"react\";\nimport { useDynamicComponent } from \"../../hooks\";\n\nconst NotFound = styled.div`\n  align-items: center;\n  display: flex;\n  height: 100%;\n  justify-content: center;\n  width: 100%;\n`;\ninterface Props {\n  extension: string;\n  fallback?: React.ReactNode;\n  module?: string;\n  props?: any;\n}\n\nconst Skeleton = styled.div<{ width: string; height: string }>`\n  align-items: center;\n  background-color: transparent;\n  display: flex;\n  flex-direction: column;\n  height: ${(props) => props.height};\n  justify-content: center;\n  width: ${(props) => props.width};\n`;\n\nexport const DynamicComponent: React.FunctionComponent<Props> = ({\n  extension,\n  fallback,\n  module,\n  props,\n}) => {\n  // get the list of extensions from the context\n  const [Component, extensionPoint] = useDynamicComponent({\n    extension,\n    module,\n  });\n  // get the module from the extension\n\n  if (!Component) {\n    return null;\n  }\n\n  const fb = fallback || (\n    <NotFound>{`Dynamic component, ${extension}, not found...`}</NotFound>\n  );\n\n  return (\n    <ErrorBoundaryWithFallback fallback={fb}>\n      <Suspense\n        fallback={\n          extensionPoint?.size ? (\n            <Skeleton\n              width={extensionPoint.size.width}\n              height={extensionPoint.size.height}\n            />\n          ) : null\n        }\n      >\n        <Component {...props} />\n      </Suspense>\n    </ErrorBoundaryWithFallback>\n  );\n};\n"],"names":["RemotesContext","createContext","MessageContainer","styled","KosPluginProvider","remotesOverride","children","contextValue","setContextValue","useState","useEffect","initPluginManager","value","jsx","useKosPluginsContext","context","useContext","isViewPlugin","module","_a","useDynamicComponent","extension","extensions","Component","setComponent","extensionPoint","setExtensionPoint","loadComponent","_module","resolveBestExtension","remote","componentName","componentPath","Comp","React","loadRemoteModule","NotFound","Skeleton","props","DynamicComponent","fallback","fb","ErrorBoundaryWithFallback","Suspense"],"mappings":"6TAmCa,MAAAA,EAAiBC,EAAAA,cAAuC,MAAS,EAMxEC,EAAmBC,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAiBnBC,EAET,CAAC,CAAE,gBAAAC,EAAiB,SAAAC,KAAe,CACrC,KAAM,CAACC,EAAcC,CAAe,EAAIC,EAAkC,SAAA,EAE1EC,OAAAA,EAAAA,UAAU,IAAM,CACdC,EAAAA,kBAAkBN,CAAe,EAAE,KAAMO,GAAU,CACjDJ,EAAgBI,CAAK,CAAA,CACtB,CAAA,EACA,CAACP,CAAe,CAAC,EAGlBQ,EAAAA,IAACb,EAAe,SAAf,CAAwB,MAAOO,EAC7B,SAAAA,EACCD,EAEAO,EAAAA,IAACX,EAAiB,CAAA,SAAA,2BAAA,CAAyB,CAE/C,CAAA,CAEJ,EAKaY,EAAuB,IAAM,CAClC,MAAAC,EAAUC,aAAWhB,CAAc,EACzC,GAAI,CAACe,EACH,MAAM,IAAI,MACR,8DAAA,EAGG,OAAAA,CACT,EC1DME,EAAgBC,GACpB,OAAA,QAAAC,EAAAD,GAAA,YAAAA,EAAQ,OAAR,YAAAC,EAAc,aAAc,QAcjBC,EAAsB,CAAC,CAClC,UAAAC,EACA,OAAAH,CACF,IAAqC,CAC7B,KAAA,CAAE,WAAAI,GAAeR,IAEjB,CAACS,EAAWC,CAAY,EAAIf,EAAA,SAChC,IAAA,EAEI,CAACgB,EAAgBC,CAAiB,EACtCjB,WAAqC,IAAI,EAE3CC,OAAAA,EAAAA,UAAU,IAAM,CACd,eAAeiB,GAAgB,CAG7B,MAAMC,EAAUC,EAAAA,qBAAqBP,GAAA,YAAAA,EAAaD,GAAYH,CAAM,EAEpEQ,EAAkBE,GAAW,IAAI,EAE3B,MAAAE,GAASF,GAAA,YAAAA,EAAS,SAAU,GAG5BG,EAAgBd,EAAaW,CAAO,EACtCA,EAAQ,KAAK,UACbA,GAAA,YAAAA,EAAS,UAEPI,EAAgBD,EAAgB,KAAKA,CAAa,GAAK,GAE7D,GAAI,CAACD,EAAQ,OAGb,MAAMG,EAAOC,EAAM,KAAK,IAAMC,EAAAA,GAAAA,iBAAiBL,EAAQE,CAAa,CAAC,EACrER,EAAaS,CAAI,CACnB,CAEcN,GACb,EAAA,CAACL,EAAYJ,EAAQG,CAAS,CAAC,EAE3B,CAACE,EAAWE,CAAc,CACnC,ECnFMW,EAAWjC,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAclBkC,EAAWlC,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA,YAKXmC,GAAUA,EAAM,MAAM;AAAA;AAAA,WAEvBA,GAAUA,EAAM,KAAK;AAAA,EAGpBC,EAAmD,CAAC,CAC/D,UAAAlB,EACA,SAAAmB,EACA,OAAAtB,EACA,MAAAoB,CACF,IAAM,CAEJ,KAAM,CAACf,EAAWE,CAAc,EAAIL,EAAoB,CACtD,UAAAC,EACA,OAAAH,CAAA,CACD,EAGD,GAAI,CAACK,EACI,OAAA,KAGT,MAAMkB,EAAKD,GACT3B,EAAA,IAACuB,EAAU,CAAA,SAAA,sBAAsBf,CAAS,gBAAiB,CAAA,EAI3D,OAAAR,EAAAA,IAAC6B,EAAAA,0BAA0B,CAAA,SAAUD,EACnC,SAAA5B,EAAA,IAAC8B,EAAA,SAAA,CACC,SACElB,GAAA,MAAAA,EAAgB,KACdZ,EAAA,IAACwB,EAAA,CACC,MAAOZ,EAAe,KAAK,MAC3B,OAAQA,EAAe,KAAK,MAAA,CAAA,EAE5B,KAGN,SAAAZ,EAAAA,IAACU,EAAW,CAAA,GAAGe,CAAO,CAAA,CAAA,CAE1B,CAAA,CAAA,CAEJ"}

package/index.js

@@ -1,10 +1,10 @@
 import { j as s } from "./emotion-react-jsx-runtime.browser.esm-vwuMB3sI.js";
 import u from "@emotion/styled";
 import { ErrorBoundaryWithFallback as C } from "@kosdev-code/kos-ui-sdk";
-import y, { createContext as v, useState as a, useEffect as p, useContext as w, Suspense as P } from "react";
+import y, { createContext as v, useState as a, useEffect as d, useContext as w, Suspense as P } from "react";
 import { i as b, r as z, m as j } from "./resolve-best-extension-DAJIkfJh.js";
 import "react/jsx-runtime";
-const d = v(void 0), k = u.div`
+const h = v(void 0), k = u.div`
   padding-inline: 20px;
   width: 100%;
   height: 100vh;
@@ -19,13 +19,13 @@ const d = v(void 0), k = u.div`
   z-index: 10000;
 `, L = ({ remotesOverride: t, children: n }) => {
   const [e, r] = a();
-  return p(() => {
+  return d(() => {
     b(t).then((c) => {
       r(c);
     });
-  }, [t]), /* @__PURE__ */ s(d.Provider, { value: e, children: e ? n : /* @__PURE__ */ s(k, { children: "Loading remote plugins..." }) });
+  }, [t]), /* @__PURE__ */ s(h.Provider, { value: e, children: e ? n : /* @__PURE__ */ s(k, { children: "Loading remote plugins..." }) });
 }, E = () => {
-  const t = w(d);
+  const t = w(h);
   if (!t)
     throw new Error(
       "useKosPluginsContext must be used within a KosPluginProvider"
@@ -41,14 +41,17 @@ const d = v(void 0), k = u.div`
   const { extensions: e } = E(), [r, c] = a(
     null
   ), [i, l] = a(null);
-  return p(() => {
-    async function h() {
+  return d(() => {
+    async function f() {
       const o = z(e == null ? void 0 : e[t], n);
       l(o ?? null);
-      const f = (o == null ? void 0 : o.remote) || "", m = K(o) ? o.view.component : o == null ? void 0 : o.component, g = m ? `./${m}` : "", x = y.lazy(() => j.loadRemoteModule(f, g));
+      const m = (o == null ? void 0 : o.remote) || "", p = K(o) ? o.view.component : o == null ? void 0 : o.component, g = p ? `./${p}` : "";
+      if (!m)
+        return;
+      const x = y.lazy(() => j.loadRemoteModule(m, g));
       c(x);
     }
-    h();
+    f();
   }, [e, n, t]), [r, i];
 }, D = u.div`
   align-items: center;
@@ -94,7 +97,7 @@ const d = v(void 0), k = u.div`
 export {
   W as DynamicComponent,
   L as KosPluginProvider,
-  d as RemotesContext,
+  h as RemotesContext,
   $ as useDynamicComponent,
   E as useKosPluginsContext
 };

package/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../packages/sdk/kos-ui-plugin/src/lib/contexts/plugins-provider/plugins-provider.tsx","../../../../packages/sdk/kos-ui-plugin/src/lib/hooks/use-dynamic-component.tsx","../../../../packages/sdk/kos-ui-plugin/src/lib/components/dynamic-component/dynamic-component.tsx"],"sourcesContent":["/**\n *\n *\n * @module remotes-provider\n * @description Provides a context for managing dynamic remotes and extensions in a React application.\n */\n\nimport styled from \"@emotion/styled\";\nimport {\n  PropsWithChildren,\n  createContext,\n  useContext,\n  useEffect,\n  useState,\n} from \"react\";\nimport type { DynamicRemotes } from \"../../../types/global\";\nimport type { PluginExtension } from \"../../../types/plugins\";\nimport { initPluginManager } from \"../../utils/plugin-extension-manager\";\n\ninterface PluginsType {\n  remotes?: DynamicRemotes;\n  extensions?: PluginExtensionsType;\n  extensionPoints?: Record<string, PluginExtension[]>;\n  getExtensions: (extensionPointId: string) => PluginExtension[];\n}\n\nexport interface PluginExtensionsType {\n  [k: string]: {\n    [k: string]: PluginExtension;\n  };\n}\n\n/**\n * The context for managing dynamic remotes and extensions.\n */\nexport const RemotesContext = createContext<PluginsType | undefined>(undefined);\n\ninterface Props {\n  remotesOverride?: DynamicRemotes;\n}\n\nconst MessageContainer = styled.div`\n  padding-inline: 20px;\n  width: 100%;\n  height: 100vh;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  position: fixed;\n  font-size: 14px;\n  top: 0;\n  left: 0;\n  z-index: 10000;\n`;\n/**\n * The provider component for the RemotesContext.\n */\nexport const KosPluginProvider: React.FunctionComponent<\n  PropsWithChildren<Props>\n> = ({ remotesOverride, children }) => {\n  const [contextValue, setContextValue] = useState<PluginsType | undefined>();\n\n  useEffect(() => {\n    initPluginManager(remotesOverride).then((value) => {\n      setContextValue(value);\n    });\n  }, [remotesOverride]);\n\n  return (\n    <RemotesContext.Provider value={contextValue}>\n      {contextValue ? (\n        children\n      ) : (\n        <MessageContainer>Loading remote plugins...</MessageContainer>\n      )}\n    </RemotesContext.Provider>\n  );\n};\n\n/**\n * Custom hook for accessing the RemotesContext.\n */\nexport const useKosPluginsContext = () => {\n  const context = useContext(RemotesContext);\n  if (!context) {\n    throw new Error(\n      \"useKosPluginsContext must be used within a KosPluginProvider\"\n    );\n  }\n  return context;\n};\n","import { loadRemoteModule } from \"@nx/react/mf\";\n\nimport React, { useEffect, useState } from \"react\";\nimport type {\n  BasePluginExtension,\n  BaseViewPluginExtension,\n} from \"../../types/plugins\";\nimport { useKosPluginsContext } from \"../contexts\";\nimport { resolveBestExtension } from \"../utils/resolve-best-extension\";\n\ninterface Props {\n  /**\n   * The extension point ID to resolve plugin modules from.\n   * Example: \"ddk.ncui.settings.tabView\"\n   */\n  extension: string;\n\n  /**\n   * Optional module ID to load a specific plugin.\n   * If not provided, the plugin with the **lowest rank** for the extension point is used.\n   */\n  module?: string;\n}\n\ntype DynamicComponentResult = [\n  React.FunctionComponent | null,\n  BasePluginExtension | null\n];\n\n/**\n * Determines whether a plugin extension follows the \"view\" structure.\n * This allows resolving the correct field (`view.component` vs `component`) when loading.\n */\nconst isViewPlugin = (module: any): module is BaseViewPluginExtension =>\n  module?.view?.component !== undefined;\n\n/**\n * React hook to resolve and lazily load a plugin component for a given extension point.\n *\n * - If `module` is provided, it directly loads that plugin.\n * - If `module` is not provided, it uses the **lowest-ranked plugin** from the extension point.\n * - Supports both standard plugins (`component`) and view-style plugins (`view.component`)\n * - Uses React.lazy + Module Federation to dynamically import the remote component.\n *\n * @param props.extension The extension point to resolve plugins from\n * @param props.module (Optional) Specific module ID to use, otherwise the highest-priority plugin is loaded\n * @returns A tuple: `[Component, PluginExtension]`\n */\nexport const useDynamicComponent = ({\n  extension,\n  module,\n}: Props): DynamicComponentResult => {\n  const { extensions } = useKosPluginsContext();\n\n  const [Component, setComponent] = useState<React.FunctionComponent | null>(\n    null\n  );\n  const [extensionPoint, setExtensionPoint] =\n    useState<BasePluginExtension | null>(null);\n\n  useEffect(() => {\n    async function loadComponent() {\n      // Determine which plugin to use\n\n      const _module = resolveBestExtension(extensions?.[extension], module);\n\n      setExtensionPoint(_module ?? null);\n\n      const remote = _module?.remote || \"\";\n\n      // Resolve the component path for the module\n      const componentName = isViewPlugin(_module)\n        ? _module.view.component\n        : _module?.component;\n\n      const componentPath = componentName ? `./${componentName}` : \"\";\n\n      // Load the component using Module Federation\n      const Comp = React.lazy(() => loadRemoteModule(remote, componentPath));\n      setComponent(Comp);\n    }\n\n    loadComponent();\n  }, [extensions, module, extension]);\n\n  return [Component, extensionPoint];\n};\n","import styled from \"@emotion/styled\";\nimport { ErrorBoundaryWithFallback } from \"@kosdev-code/kos-ui-sdk\";\nimport React, { Suspense } from \"react\";\nimport { useDynamicComponent } from \"../../hooks\";\n\nconst NotFound = styled.div`\n  align-items: center;\n  display: flex;\n  height: 100%;\n  justify-content: center;\n  width: 100%;\n`;\ninterface Props {\n  extension: string;\n  fallback?: React.ReactNode;\n  module?: string;\n  props?: any;\n}\n\nconst Skeleton = styled.div<{ width: string; height: string }>`\n  align-items: center;\n  background-color: transparent;\n  display: flex;\n  flex-direction: column;\n  height: ${(props) => props.height};\n  justify-content: center;\n  width: ${(props) => props.width};\n`;\n\nexport const DynamicComponent: React.FunctionComponent<Props> = ({\n  extension,\n  fallback,\n  module,\n  props,\n}) => {\n  // get the list of extensions from the context\n  const [Component, extensionPoint] = useDynamicComponent({\n    extension,\n    module,\n  });\n  // get the module from the extension\n\n  if (!Component) {\n    return null;\n  }\n\n  const fb = fallback || (\n    <NotFound>{`Dynamic component, ${extension}, not found...`}</NotFound>\n  );\n\n  return (\n    <ErrorBoundaryWithFallback fallback={fb}>\n      <Suspense\n        fallback={\n          extensionPoint?.size ? (\n            <Skeleton\n              width={extensionPoint.size.width}\n              height={extensionPoint.size.height}\n            />\n          ) : null\n        }\n      >\n        <Component {...props} />\n      </Suspense>\n    </ErrorBoundaryWithFallback>\n  );\n};\n"],"names":["RemotesContext","createContext","MessageContainer","styled","KosPluginProvider","remotesOverride","children","contextValue","setContextValue","useState","useEffect","initPluginManager","value","jsx","useKosPluginsContext","context","useContext","isViewPlugin","module","_a","useDynamicComponent","extension","extensions","Component","setComponent","extensionPoint","setExtensionPoint","loadComponent","_module","resolveBestExtension","remote","componentName","componentPath","Comp","React","loadRemoteModule","NotFound","Skeleton","props","DynamicComponent","fallback","fb","ErrorBoundaryWithFallback","Suspense"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../../packages/sdk/kos-ui-plugin/src/lib/contexts/plugins-provider/plugins-provider.tsx","../../../../packages/sdk/kos-ui-plugin/src/lib/hooks/use-dynamic-component.tsx","../../../../packages/sdk/kos-ui-plugin/src/lib/components/dynamic-component/dynamic-component.tsx"],"sourcesContent":["/**\n *\n *\n * @module remotes-provider\n * @description Provides a context for managing dynamic remotes and extensions in a React application.\n */\n\nimport styled from \"@emotion/styled\";\nimport {\n  PropsWithChildren,\n  createContext,\n  useContext,\n  useEffect,\n  useState,\n} from \"react\";\nimport type { DynamicRemotes } from \"../../../types/global\";\nimport type { PluginExtension } from \"../../../types/plugins\";\nimport { initPluginManager } from \"../../utils/plugin-extension-manager\";\n\ninterface PluginsType {\n  remotes?: DynamicRemotes;\n  extensions?: PluginExtensionsType;\n  extensionPoints?: Record<string, PluginExtension[]>;\n  getExtensions: (extensionPointId: string) => PluginExtension[];\n}\n\nexport interface PluginExtensionsType {\n  [k: string]: {\n    [k: string]: PluginExtension;\n  };\n}\n\n/**\n * The context for managing dynamic remotes and extensions.\n */\nexport const RemotesContext = createContext<PluginsType | undefined>(undefined);\n\ninterface Props {\n  remotesOverride?: DynamicRemotes;\n}\n\nconst MessageContainer = styled.div`\n  padding-inline: 20px;\n  width: 100%;\n  height: 100vh;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  position: fixed;\n  font-size: 14px;\n  top: 0;\n  left: 0;\n  z-index: 10000;\n`;\n/**\n * The provider component for the RemotesContext.\n */\nexport const KosPluginProvider: React.FunctionComponent<\n  PropsWithChildren<Props>\n> = ({ remotesOverride, children }) => {\n  const [contextValue, setContextValue] = useState<PluginsType | undefined>();\n\n  useEffect(() => {\n    initPluginManager(remotesOverride).then((value) => {\n      setContextValue(value);\n    });\n  }, [remotesOverride]);\n\n  return (\n    <RemotesContext.Provider value={contextValue}>\n      {contextValue ? (\n        children\n      ) : (\n        <MessageContainer>Loading remote plugins...</MessageContainer>\n      )}\n    </RemotesContext.Provider>\n  );\n};\n\n/**\n * Custom hook for accessing the RemotesContext.\n */\nexport const useKosPluginsContext = () => {\n  const context = useContext(RemotesContext);\n  if (!context) {\n    throw new Error(\n      \"useKosPluginsContext must be used within a KosPluginProvider\"\n    );\n  }\n  return context;\n};\n","import { loadRemoteModule } from \"@nx/react/mf\";\n\nimport React, { useEffect, useState } from \"react\";\nimport type {\n  BasePluginExtension,\n  BaseViewPluginExtension,\n} from \"../../types/plugins\";\nimport { useKosPluginsContext } from \"../contexts\";\nimport { resolveBestExtension } from \"../utils/resolve-best-extension\";\n\ninterface Props {\n  /**\n   * The extension point ID to resolve plugin modules from.\n   * Example: \"ddk.ncui.settings.tabView\"\n   */\n  extension: string;\n\n  /**\n   * Optional module ID to load a specific plugin.\n   * If not provided, the plugin with the **lowest rank** for the extension point is used.\n   */\n  module?: string;\n}\n\ntype DynamicComponentResult = [\n  React.FunctionComponent | null,\n  BasePluginExtension | null\n];\n\n/**\n * Determines whether a plugin extension follows the \"view\" structure.\n * This allows resolving the correct field (`view.component` vs `component`) when loading.\n */\nconst isViewPlugin = (module: any): module is BaseViewPluginExtension =>\n  module?.view?.component !== undefined;\n\n/**\n * React hook to resolve and lazily load a plugin component for a given extension point.\n *\n * - If `module` is provided, it directly loads that plugin.\n * - If `module` is not provided, it uses the **lowest-ranked plugin** from the extension point.\n * - Supports both standard plugins (`component`) and view-style plugins (`view.component`)\n * - Uses React.lazy + Module Federation to dynamically import the remote component.\n *\n * @param props.extension The extension point to resolve plugins from\n * @param props.module (Optional) Specific module ID to use, otherwise the highest-priority plugin is loaded\n * @returns A tuple: `[Component, PluginExtension]`\n */\nexport const useDynamicComponent = ({\n  extension,\n  module,\n}: Props): DynamicComponentResult => {\n  const { extensions } = useKosPluginsContext();\n\n  const [Component, setComponent] = useState<React.FunctionComponent | null>(\n    null\n  );\n  const [extensionPoint, setExtensionPoint] =\n    useState<BasePluginExtension | null>(null);\n\n  useEffect(() => {\n    async function loadComponent() {\n      // Determine which plugin to use\n\n      const _module = resolveBestExtension(extensions?.[extension], module);\n\n      setExtensionPoint(_module ?? null);\n\n      const remote = _module?.remote || \"\";\n\n      // Resolve the component path for the module\n      const componentName = isViewPlugin(_module)\n        ? _module.view.component\n        : _module?.component;\n\n      const componentPath = componentName ? `./${componentName}` : \"\";\n\n      if (!remote) return;\n\n      // Load the component using Module Federation\n      const Comp = React.lazy(() => loadRemoteModule(remote, componentPath));\n      setComponent(Comp);\n    }\n\n    loadComponent();\n  }, [extensions, module, extension]);\n\n  return [Component, extensionPoint];\n};\n","import styled from \"@emotion/styled\";\nimport { ErrorBoundaryWithFallback } from \"@kosdev-code/kos-ui-sdk\";\nimport React, { Suspense } from \"react\";\nimport { useDynamicComponent } from \"../../hooks\";\n\nconst NotFound = styled.div`\n  align-items: center;\n  display: flex;\n  height: 100%;\n  justify-content: center;\n  width: 100%;\n`;\ninterface Props {\n  extension: string;\n  fallback?: React.ReactNode;\n  module?: string;\n  props?: any;\n}\n\nconst Skeleton = styled.div<{ width: string; height: string }>`\n  align-items: center;\n  background-color: transparent;\n  display: flex;\n  flex-direction: column;\n  height: ${(props) => props.height};\n  justify-content: center;\n  width: ${(props) => props.width};\n`;\n\nexport const DynamicComponent: React.FunctionComponent<Props> = ({\n  extension,\n  fallback,\n  module,\n  props,\n}) => {\n  // get the list of extensions from the context\n  const [Component, extensionPoint] = useDynamicComponent({\n    extension,\n    module,\n  });\n  // get the module from the extension\n\n  if (!Component) {\n    return null;\n  }\n\n  const fb = fallback || (\n    <NotFound>{`Dynamic component, ${extension}, not found...`}</NotFound>\n  );\n\n  return (\n    <ErrorBoundaryWithFallback fallback={fb}>\n      <Suspense\n        fallback={\n          extensionPoint?.size ? (\n            <Skeleton\n              width={extensionPoint.size.width}\n              height={extensionPoint.size.height}\n            />\n          ) : null\n        }\n      >\n        <Component {...props} />\n      </Suspense>\n    </ErrorBoundaryWithFallback>\n  );\n};\n"],"names":["RemotesContext","createContext","MessageContainer","styled","KosPluginProvider","remotesOverride","children","contextValue","setContextValue","useState","useEffect","initPluginManager","value","jsx","useKosPluginsContext","context","useContext","isViewPlugin","module","_a","useDynamicComponent","extension","extensions","Component","setComponent","extensionPoint","setExtensionPoint","loadComponent","_module","resolveBestExtension","remote","componentName","componentPath","Comp","React","loadRemoteModule","NotFound","Skeleton","props","DynamicComponent","fallback","fb","ErrorBoundaryWithFallback","Suspense"],"mappings":"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"}

package/lib/hooks/use-dynamic-component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-dynamic-component.d.ts","sourceRoot":"","sources":["../../../../../../packages/sdk/kos-ui-plugin/src/lib/hooks/use-dynamic-component.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA8B,MAAM,OAAO,CAAC;AACnD,OAAO,KAAK,EACV,mBAAmB,EAEpB,MAAM,qBAAqB,CAAC;AAI7B,UAAU,KAAK;IACb;;;OAGG;IACH,SAAS,EAAE,MAAM,CAAC;IAElB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,KAAK,sBAAsB,GAAG;IAC5B,KAAK,CAAC,iBAAiB,GAAG,IAAI;IAC9B,mBAAmB,GAAG,IAAI;CAC3B,CAAC;AASF;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,mBAAmB,2BAG7B,KAAK,2BAmCP,CAAC"}
+{"version":3,"file":"use-dynamic-component.d.ts","sourceRoot":"","sources":["../../../../../../packages/sdk/kos-ui-plugin/src/lib/hooks/use-dynamic-component.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA8B,MAAM,OAAO,CAAC;AACnD,OAAO,KAAK,EACV,mBAAmB,EAEpB,MAAM,qBAAqB,CAAC;AAI7B,UAAU,KAAK;IACb;;;OAGG;IACH,SAAS,EAAE,MAAM,CAAC;IAElB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,KAAK,sBAAsB,GAAG;IAC5B,KAAK,CAAC,iBAAiB,GAAG,IAAI;IAC9B,mBAAmB,GAAG,IAAI;CAC3B,CAAC;AASF;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,mBAAmB,2BAG7B,KAAK,2BAqCP,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kosdev-code/kos-ui-plugin",
-  "version": "2.0.22",
+  "version": "2.0.23",
   "type": "module",
   "exports": {
     ".": {
@@ -26,7 +26,7 @@
   },
   "kos": {
     "build": {
-      "gitHash": "ab095f25172b0a41c0a0cf2bf1b1870fd1e3b8b1"
+      "gitHash": "3b4f1d292faaab6c2a1a989ddad74a35cdb34020"
     }
   },
   "publishConfig": {